Have you ever found that images don't appear when opening a website? If so, here's a guide on how to deal with images not appearing in posts and thumbnails on Blogger.
As a blog visitor, of course there are questions about why this happened, is there an error on the laptop or cellphone, is there an error in the browser and hasn't been updated, or is the internet network slow.
I also experienced this when I found a blog whose post images and thumbnails were missing or did not appear on the web. As a blogger, of course this is a problem because maybe the images and thumbnails of my blog won't appear either.
And after I opened my blog, it turned out that the image and thumbnail in the post were missing. The only thing that was there was a small white box and the title of the image when the cursor was hovered over an empty area and the thumbnail on the post dashboard on Blogger also didn't appear.
Post Image Function for Blogs
Images are an important element for a blog or website that visually explains what is in the blog and posts. Images can provide an explanation to blog visitors, especially blogs that have a tutorial theme or niche.
Create a blog or business website. Images must be displayed, especially the business products that will be offered and sold.
So if the blog or website image is missing or doesn't appear then you have to fix it so that traffic and business ventures become successful through the managed website.
There are several things that cause post images to disappear on the website display. The image above is a thumbnail image of the representative in question. And this image is already embedded in the blogger template.
Why is an image not showing on my website?
- The server is experiencing problems or errors which can be caused by hosting being repaired or down. Contact your blog or website hosting service so that the problem of missing images can be resolved.
- The browser has not been updated, which can cause bugs to occur so that page retrieval is not perfect. What must be done to overcome this is to check whether the browser used is Chrome, Opera, Firefox, Microsoft Edge, or Safari in the latest version. Update if the latest version of the browser you are using is available.
- Slow internet operator networks with weak signals are a classic factor that often causes images not to appear on blogs. Change to the strongest cellular network in your area.
- The ISP Internet Service Provider or a country's authorities block certain image URLs.
Fix Thumbnail Image Not Appearing on Home Blog
There are at least 4 ways you can do to fix blog post images that don't appear on the website homepage.
1. Removing the Double Quotes
The content you publish contains a colon (") symbol or in the title of the article.
Please remove these double quotes, then replace (change) with single quotes. If possible, just delete these quotes in the title of the article you wrote.
2. Replace Photos with Own Images
If the photo of the article still doesn't appear on the homepage, then there is something wrong with the image.
Make sure when uploading images, don't use features/services like From a URL. Usually, the From a URL feature displays an image but the image belongs to a third party.
The solution? Upload your own images via the computer/laptop you are using; by Uploading > Choose File.
This image that you have uploaded will be saved in your Drive. You can manage, add, or delete these images on Google's Picasa Web.
3. Editing Feeds in Blogger Settings
If it still doesn't work, please apply the tutorial steps below.
- Click the Settings button, then press the Other menu
- In Site Feed - right in the Allow Blog Feed section, change Short to Full
- Then press the Save button
The tutorial above has been done, and it turns out that the thumbnail image still has errors? Good. Let's make modifications to the blogger template, right in the HTML section of the blogger template that you are using.
4. Modify HTML Post Thumbnail in Blogger Template
Look for this code:
"<b:if cond='data:post.thumbnailUrl'>...ada kode-kode lainnya yang cukup panjang...</b:if>"
Remove the code, and replace (replace) it with the code below:
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/>
</a>
<b:else/>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img alt='thumbnail' class='post-thumbnail' expr:src='data:post.firstImageUrl'/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img alt='no image' class='noimage post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cIpJQfYK22WgHjGMng1DhHfja2zJWOPWQKfH4_7Yk2f7FH0CxfBvv7F95ZBn8TZH39kjvdRFARoIAKFxFCn7aQgfv-pv6spqJ65Q_x7cBnWSWJpjXyAHWfawXLp1sAAEoOtFIPT5QLr8/s400/Tutorial-Tips-Trik-Cara-Mengatasi-Gambar-Thumbnail-Tidak-Muncul-di-Home-Blogspot-Blogger.jpg'/>
</a>
</b:if>
</b:if>
Note: You can change the image URL below, with your own private property.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cIpJQfYK22WgHjGMng1DhHfja2zJWOPWQKfH4_7Yk2f7FH0CxfBvv7F95ZBn8TZH39kjvdRFARoIAKFxFCn7aQgfv-pv6spqJ65Q_x7cBnWSWJpjXyAHWfawXLp1sAAEoOtFIPT5QLr8/s400/Tutorial-Tips-Trik-Cara-Mengatasi-Gambar-Thumbnail-Tidak-Muncul-di-Home-Blogspot-Blogger.jpg
Conclusion
So, hopefully it's useful. If there is something you don't understand, we can discuss it in the comments column. That's how to fix the article thumbnail image not appearing on the front page of the blog. If you think it still fails, it is certain that the blogger's theme is the problem.