Cara Mengatasi Gambar Thumbnail Blur pada Theme Blogger

Thumbnail merupakan gambar mini yang terlihat menghiasi beranda blog. Gambar ini berfungsi untuk menarik perhatian layaknya sebuah sampul buku. Untuk itulah, thumbnail ini tetap mendapat perhatian meskipun terlihat kecil.

Seperti yang saya alami sekarang pada saat menerapkan theme Blogger. Sebagaimana sering dikatakan, saya tuh lagi belajar membuat theme Blogger dengan Bootstrap. Dan saya dapati dua kondisi berbeda terkait gambar mini ini.

Yakni, mengapa theme satunya terlihat blur dan lainnya tidak? 

Ternyata banyak sumber yang membahas namun kurang tepat. Karena kode yang bermasalah tidak ditemukan pada theme sendiri. Sehingga solusinya hanya cocok untuk theme yang sejenis.

Lalu bagaimana jika theme yang kita punya dibuat sendiri dari nol?

Ini yang akan kita bahas dalam artikel kali ini. Karena ditemukan tersangkanya pada script auto read more masing-masing. Menurut saya ini ada kaitannya dengan gambar thumbnail yang blur. 

Buktinya saya memiliki theme sendiri yang tidak blur pada thumbnailnya. Dan ini menggunakan script auto read more yang disertai kode JavaScript. Namun theme lain dengan auto read more tanpa JavaScript koq malah blur.

Sebetulnya bisa sih solusi cepat untuk mengatasi masalah gambar thumbnail ini. Tinggal ganti dengan script auto read more yang disertai javascript saja. Namun masalah lain timbul jika theme Blogger dibangun dengan Bootstrap seperti yang saya alami.

Iya, theme saya dengan Bootstrap jika disandingkan script auto read more with javascript jadi aneh. Masa iya semua artikel bisa dipendekin tapi ada satu artikel tidak. Dan keanehan ini tidak muncul pada awal-awal blog ini berjalan. Akhirnya saya ganti script auto read more yang tidak menggunakan javascript.

Setelah masalah tersebut selesai lalu bagaimana dengan thumbnail yang terlihat buram? Simak terus artikel kali ini tentang solusi untuk mengatasi thumbnail yang terlihat buram.

Cara Mengatasi Gambar Thumbnail Blur pada Theme Blogger

Pada dasarnya, gambar thumbnail sejatinya dihasilkan oleh Blogger secara otomatis. Namun ketika ditampilkan di hompage tergantung kreator theme blogger masing-masing. Dan kebanyakannya memang menggunakan javascript untuk merubah ukurannya menjadi lebih baik. Sekarang coba lihat baris kode berikut. 

<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div>

Dari sintaks baris kode tersebut akhirnya thumbnail dihasilkan dengan ukuran 72 x 72 pixel dengan aspek ratio sebesar 1:1. Lihat baris kode:"resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)" di atas. Nah, ukuran inilah yang kemudian diambil oleh theme/template agar tampil di homepage.

Makanya wajar jika template dengan script auto read more with javascript bisa gak blur. Karena ukuran thumbnail sebesar 72 x 72 pixel dinaikan dengan fungsi JavaScript. Lalu bagaimana jika script auto read more kita tidak menggunakan javascript. 

Berikut ini tahapannya agar ukuran thumbnail bukan merupakan "zooming" dari gambar 72 x 72 pixel.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Tekan Ctrl + F dan masukan: "data:post.thumbnailUrl" lalu tekan enter.

3. Perhatikan baris kode yang disusun oleh script auto read more ini, terutama:"<img expr:src='data:post.thumbnailUrl'/>" karena kode inilah yang memanggil gambar agar tampil di home.

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='post-thumb'> <img expr:src='data:post.thumbnailUrl'/> </div> </b:if> <data:post.snippet/> <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if>

4. Ganti menjadi:"<img expr:src='resizeImage(data:post.thumbnailUrl, 200, &quot;1:1&quot;)'/>" dengan sintaks ini ukuran gambar naik menjadi 200 pixel.

5. Kode di atas selengkapnya akan terlihat seperti berikut:

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='post-thumb'> <img expr:src='resizeImage(data:post.thumbnailUrl, 200, "1:1")'/> </div> </b:if> <data:post.snippet/> <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if>

6. Simpan theme.

7. Selesai.

Kesimpulan

Baris kode di atas tidak terlihat saat membuat theme dari nol. Baru muncul nanti ketika memasang script auto read more. Untuk itu, solusinya tidak hanya dengan satu cara. Karena tergantung kreator themenya. Apakah menggunakan javascript ataukah tidak ketika memasang auto read more.

Dalam hal ini sudah banyak tutorial yang menjelaskan. Namun rata-rata berkutat pada javascript. Sampai akhirnya ketemu bahasan yang cocok. Ini sesuai dengan gaya theme Blogger saya yang dibangun dengan Bootstrap.

Oh iya, solusi di atas sebetulnya tersinspirasi dari stackoverflow.

Semoga bermanfaat.

Baca Juga