Blogger repeats my first image

Some of the Blogger templates use the first post image in a special way – for example to display it above the post title. This might be useful for you but if you’re just showing the images it will look strange when the images are repeated. Here’s how to work around that.

Edit the post you want to change and change it to HTML view.

Once you’re in the editor, switch to HTML view and look for your first image.


Find your first image HTML code

It will start with: <img

This is how it looks in my case:


It might be hard to spot  <img  at first, so it’s a good idea to use browser find function (keyboard shortcut: cmd+F or ctrl+F) and type in <img.


Add a CSS code to hide the image from the post

Once you found it, you need to add a css style code to hide the image. This way, the image will not be visible in the post content, but will be displayed in all additional places where your template uses the first image.

Here’s the code you need to add:

style="display: none;"

You should add it right after the start of the img tag, so it looks like this:

<img style="display: none;" border="0" height="240" src="" width="320" />

That will do the trick! In case you have the style attribute in your img already, only add display: none; inside the quotation marks. But make sure that the previous statement ended with a semicolon ;


A good idea of using this is when you want to make the covers of your post look different than the images in the post. For example using a collage of photos, illustrated cover or an image with a text overlay.



Leave a Reply