How to Put Thumbnails Post on Homepage Without JavaScript

How to Put Thumbnails Post on Homepage Without JavaScript - One of the items that contribute vital to blog loading for Blogger platform is image loading, not to mention the post thumbnail on the homepage. Especially if the image element is not on scale correctly. Which size or image resolution is large, is displayed with a smaller custom size (width and height). It does not completely change the image dimension. Even if you already use resize image with JavaScript or CSS manipulation.

In this article, I will share a tip or how to display post thumbnails on the homepage (main page). Which you will place the first image of the post, as the background to be a thumbnail. Which will be called with the "background-image: url(CUSTOM_IMAGE_URL_HERE)".

For those of you who are interested to try it and want to use it in your blogger, can directly follow some steps below.

How to Put Thumbnails Post on Homepage Without JavaScript

1. Go to Edit HTML, then replace your post thumbnail (homepage) caller code with the following code:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <a class='thumb-wrapper' expr:href='data:post.url'>
                <b:if cond='data:post.thumbnailUrl'>
                  <span class='thumb-wrapper-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
                  <style>
                    @media (min-width: 768px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.firstImageUrl, 320).cssEscaped'/>);
                      }
                    }
                    @media (min-width: 600px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.firstImageUrl, 260).cssEscaped'/>);
                      }
                    }
                    @media (max-width: 480px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.firstImageUrl, 120).cssEscaped'/>);

                      }
                    }
                  </style>
            <b:else/>
                  <span class='thumbnail-empty-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
                </b:if>
              </a>
</b:if>
</b:if>

2. Then add the following CSS, to set the location and size of post thumbnails.

/* Homepage Thumbnail Post */
.post .thumb-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto; -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;z-index:100;float:left;margin-right:20px; height:185px;width:320px}
.post .thumb-wrapper-img,.post .thumbnail-empty-img{background-position:center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%; }
.thumbnail-empty-img{position:relative;background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxxItpb5K5VdJkgLaIMiO2_JLvlKrBmlNfUlpxr3oLlPAoZe83CaHmfBS3nA2-Mj_MamPt-cdmBA7cUEIIntqO4eOCz_NBrDmj00DwkhpTKsM4G_qSrQQdoPWhOij6E1QUWfQWQ4a6S0/s260/no_thumbnail.jpg&#39;);}
@media screen and (max-width:768px){ height:150px;width:260px }
@media screen and (max-width:480px){ height:72px;width:120px }

3. Then Save Theme

Note!!

• Please change Query media in the first step, adjust to your blog display needs.

• Resoluli / image dimensions, please change and adjust also the numbers 320, 260, and 120 in the above code (steps 1 and 2).

There is another alternative, if you want to make the post thumbnail appear to be square, please change the media style query in step 1, to be like this:

@media (min-width: 768px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.firstImageUrl, 320, &quot;1:1&quot;).cssEscaped'/>);
                      }
                    }

Attention:

• Code 1: 1 is the dimension of the image you want to display. You can change it to 2: 3 or 3: 4 and others.

• Then adjust the width and height in the .post .thumb-wrapper as the size you give in the code above.

By using this method of course you can speed up the loading of images on post thumbnail. Thus, loading the blog to view the homepage becomes lighter.

That's the tips I've tried to share about How to Put Thumbnails Post on Homepage Without JavaScript, hopefully with this short enough article can be useful and good luck.

Share :