CSS Trick to Align Images in Blogger
How to Align Images on Blogger Posts - By default, Blogger aligns images on the post to center. You can try to align the image to left or right but the image will remain at the center of the post. This article teaches you how to align images on blogger blog post.
The Function of Images in a Blog Post
Whether you are using Blogger, WordPress, Wix, or any other blogging platform, images play important roles in your blog post. Images can help your readers to understand the content of your post because some information can only be grasped visually like diagrams.
It is wrong if people think that images only serve to beautify blog posts. Images serve as illustrations that convey ideas that cannot be conveyed through text. For example, if your blog post is about computer tutorials, the use of images is unavoidable.
News blog posts or food recipes also require illustrations in the form of images (even videos) so that the information they present can be understood by the readers. These various blogging needs that require images show that the use of images on a blog is not always optional.
Blogger Supported Image Format
By default, Blogger supports images in various formats such as JPG, PNG, GIF, and BMP. Each image format has its own characteristics. For example, if you want to use an image with a transparent background, then you need to use a PNG format image. If you want to use a small image, then you will probably choose a JPG format image. Some bloggers want to display motion pictures in their posts so they need to use GIF format images.
Blogger is a product of Google. If you have ever used PageSpeed Insights which is also owned by Google, you may have received suggestions that can improve the performance of your blog, namely image optimization.
Google recommends that the images used are in JPG 2000 format. To get a JPG 2000 format image, you can use Photoshop; when saving the file (Save As), select the JPG 2000 format. This format is said to have a smaller size and can be rendered by the browser in a very fast time.
Unfortunately, when you upload JPG 2000-formatted images into your blogger posts, you will be disappointed because Blogger doesn't support JPG 2000-formatted images.
Read also: Keyword Golden Ratio Tool and Case Study
Image Alignment on Blogger
Images in blogger posts are aligned to the center of the post. This is due to the location of the image tag inside a div assigned the class "separator". A div, by default, is set to have a display block. That is why, if you upload images directly into your blog post, you will not be able to do image layout alignment.
Many bloggers wonder how to put side-by-side images in their blog posts. Without using custom CSS code they can't do that because every div is 100% wide by default.
Blogger of course set up a panel to adjust the alignment of text and images in blog posts. Unfortunately, the alignment pane cannot be used to align an image because the image is in a div which cannot be aligned in the same way.
Should all images be aligned in the middle of a blog post? Of course you can align the image however you want if you (1) remove the image tag from the mentioned div, and (2) use a few lines of CSS code to position the image.
How to Align Images on a Blog Post
To align images in blog posts (for Google Blogger users), you need to use image tags outside of the default div. I will show you some examples of image alignment in blogger posts such as: (1) aligning images side by side, (2) alligning an image and text side by side, either in the right or left position.
The main requirement that you need to fulfill in order to be able to align images in blog posts is to upload images on a special page on your blog. Once you have uploaded an image on the blog, all you need to do then is retrieve the URL of the image and save it.
How to align images side by side in a blog post
Please note that side-by-side aligned images in blog posts are only for portrait-oriented images or those with a maximum width of 40% of the browser size (approximately 400-500 pixels). Especially if the blogger template you are using has a sidebar, you need to know that landscape-oriented images are not good for side-by-side alignment.
Example:
- Upload two or more images on a page you created specifically to store your image URL;
- Create a div and give it a class "row";
- Create a div and give it a class "my-img" and put this div inside the “row” div;
- Put an image URL in the div (in the image tag of course). Within the image tag, add style width to 100%;
- Add the following CSS code in your blog post or add it to your blogger template;
.row{
display:flex;
}
.my-img{
flex:33,33%;
padding:5px;
}
</style>
Your divs will look like:
<div class = “my-img”>
<img src = “img1.jpg” style = “width:100%;”/>
</div>
<div class = “my-img”>
<img src = “img2.jpg” style = “width:100%;”/>
</div>
</div>
Because we use flex, our images will be responsive. The size of the image will be reduced and enlarged according to the size of the screen or browser. You can create up to 3 images. Unfortunately, too many images will reduce the appearance of the image. If you want to create multiple rows of images, then you have to duplicate the row class div.
How to align image and text side by side in a blog post
The way to align an image and text side by side is to use CSS floats on the image. This time, we don't need to create a custom div because the CSS code will directly modify the float position of the image. All we need to do is place the image inside the <p> paragraph tag.
Write the following line of CSS code:
.my-img-left{
float:left;
width:170px;
height:170px;
margin-right:15px;
}
.my-img-right{
float:right;
width:170px;
height:170px;
margin-left:15px;
}
</style>
The problem with this method is that the image and text display less than perfect if the image size is higher than the text size. To anticipate this, then inevitably we have to place both an image and text into a div which we give a class "clearfix" and add this CSS code to the style.
overflow:auto;
}
With the CSS codes above, you can determine the location of an image in a text or paragraph. If you want to place it on the right, then use the appropriate class in the image.
Example:
Image Left:
Image Right:
I hope, the discussion of how to align images in blogger posts can solve the problem of aligning images in your blog posts. Feel free to leave a question in the comments section if you have difficulty implementing the methods I provide in this article.
Please, only relevant comments are accepted. Comments that are irrelevant and/or containing active links will be deleted. Thank you.
Post a Comment for "CSS Trick to Align Images in Blogger"