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 kalau 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 memakai 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, kemudian IE/buka sourcenya, perhatikan pengkodean pada bidang thumb-wrapper.

Demo

Cara bikinnya yakni sebagai berikut:

Langkah 1: Masuk ke Edit HTML, kemudian ganti instruksi pemanggil thumbnail post (homepage) Anda dengan instruksi 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/AVvXsEiTcwBunMneJ4080AZMnPJdrWVTb6rOjg6eROmIbVo14eLARKw8hrSEFwSjKNRnpsP5C7H0Vn6bqgwsT-lhJutCH1R8crGG2VuXrecCHf1newKiwgAPGsyMAaGMSaOxZLBvxF_6_FDApTA/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 instruksi di atas (langkah 1 dan 2).

Ada alternative lain, kalau ingin menciptakan thumbnail post tampil menjadi persegi, silahkan ubah style media query pada langkah 1, menjadi ibarat 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 yakni dimensi gambar yang hendak ditampilkan. Anda sanggup ubah menjadi 2:3 atau 3:4 dan lainnya.
• Lalu sesuaikan juga width dan height pada .post .thumb-wrapper ibarat size yang Anda berikan pada instruksi di atas.

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

Advertisement