Cara Lain Memasang Thumbnail Post di Homepage tanpa JavaScript

Salah satu item yang memberi sumbangsi vital terhadap loading blog untuk platform Blogger/blogspot ialah pemuatan gambar, tidak terkecuali thumbnail post di homepage. Lebih-lebih jika elemen gambar tersebut tidak di scale dengan benar.

Yang mana size atau resolusi gambar yang besar, ditampilkan dengan custom ukuran (lebar dan tinggi) yang lebih kecil. Cara tersebut tidak sepenuhnya mengubah dimensi gambar. Meskipun menggunakan trik resize image dengan JavaScript ataupun manipulasi CSS.

Nah, berikut ini ada satu trik lagi untuk menampilkan thumbnail post di homepage (halaman utama). Yaitu menempatkan gambar pertama dari postingan, sebagai background untuk dijadikan thumbnail. Yang akan dipanggil dengan background-image: url(CUSTOM_IMAGE_URL_HERE).

Cek DEMO berikut, lalu IE/buka sourcenya, perhatikan pengkodean pada bidang thumb-wrapper.

Demo

Cara bikinnya adalah sebagai berikut:

Langkah 1: Masuk ke Edit HTML, lalu ganti kode pemanggil thumbnail post (homepage) Anda dengan kode berikut ini:

<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>

Langkah 2: Lalu tambahkan CSS berikut ini, untuk mengatur letak dan ukuran thumbnail post.

/* 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/AVvXsEgL73DWmISqsGicySVY69qJ_7fhe-PUL6rK4ePe9IpuGHsD5sGFYGgG8OfFqkB8rmPV5WtLNqlZZjWvXfELB86hNF9wkLFYAhlhXaHFoy565ZpeZxPs9TlsEmhgWsragmabiWVUSzwEsBM/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 }

Lalu simpan Theme.

Catatan:

• Silahkan rubah media Query pada langkah pertama, sesuaikan dengan kebutuhan tampilan blog Anda.
• Resoluli/dimensi gambar, silahkan ubah dan sesuaikan juga angka 320, 260, dan 120 pada kode di atas (langkah 1 dan 2).

Ada alternative lain, jika ingin membuat thumbnail post tampil menjadi persegi, silahkan ubah style media query pada langkah 1, menjadi seperti ini:

                    @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'/>);
                      }
                    }

Perhatian:

• Kode 1:1 adalah dimensi gambar yang hendak ditampilkan. Anda bisa ubah menjadi 2:3 atau 3:4 dan lainnya.
• Lalu sesuaikan juga width dan height pada .post .thumb-wrapper seperti size yang Anda berikan pada kode di atas.

Sejauh ini, cara tersebut dapat mempercepat pemuatan gambar pada thumbnail post. Dengan demikian, loading blog untuk tampilan homepage menjadi lebih ringan. Tidak percaya? Buktikan sendiri!