Display Custom Thumbnail Image for posts with no featured image in Blogger Emporio Theme

2022/9/26 witten2022/9/12

In the Emporio theme, articles that do not have images do not display images in the home page view and the titles appear oddly misplaced.

In this article I will teach you how to display custom thumbnail images in the home page view even for articles that do not have images.

Go to your blogger.com dashboard -> Theme tab -> Edit HTML -> in the edit window press ctrl + f then copy paste .feed-view .not-hero.post-wrapper.no-image .post-title-container{ and hit Enter key.

Then delete all the following lines.

  
.feed-view .not-hero.post-wrapper.no-image .post-title-container{
position:relative;
top:-90px
}

After you delete the entire css of ".feed-view .not-hero.post-wrapper.no-image .post-title-container", at the same place where you just deleted write the following css.

  
.feed-view .no-image{background-image:url("https://your.desired.image.url")}

Now your desired custom image appears on the articles with no featured image in home page view. If you want the background size to be resposive then add the following css instead.

  
@media (max-width: 285px) .feed-view .no-image{background-image:url("https://your.desired.smallest-size.image.url")}
@media (max-width: 385px) and (min-width: 286px) {.feed-view .no-image{background-image:url("https://your.desired.smaller-size.image.url")}}
@media (max-width: 485px) and (min-width: 386px) {.feed-view .no-image{background-image:url("https://your.desired.small-size.image.url")}}
@media (max-width: 745px) and (min-width: 486px) {.feed-view .no-image{background-image:url("https://your.desired.normal-size.image.url")}}

This will display the desired background image on the thumbnail element with the "no-image" class. Different sized background images can be displayed for each resolution. This is to ensure that the image is displayed clearly and at the appropriate size.

Now you are done ! see how easy it it ? You don't need to spend long time editing.