resizeImage() permudah sesuaikan thumbnail Blogger

Kebutuhan akan mempercantik dan mempercepat tampilan web/blog semakin dibutuhkan. Apalagi kreatifitas dan kemampuan dalam membuat theme semakin hari semakin expresif. Meski fungsi yang akan dibahas ini telah keluar lama, tapi tak masalah untuk dipubublikasikan ulang.

Pemanggilan gambar

Perlu diingat, bahwa sejak dahulu (entah pastinya) untuk menampilkan thumbnail cukup dengan pemanggilan <data:post.thumbnail/> pada tiap loop post yang kita punya. Sedangkan untuk hasilnya hanya menampilkan gambar kecil dengan format s72-c, contoh:

https://2.bp.blogspot.com/-ZmfcM9-CwX0/WluUXKS8jCI/AAAAAAAATEk/34COXB_6y-IHvhmhp675tinPGn26XLCCQCK4BGAYYCw/s72-c/blogger-resizeImage-function-totoprayogo-795864.png
Sangat kecil, dan dengan hasil yang seperti itu kita harus pintas mensiasati dengan kode tambahan javascript agar sesuai dengan yang kita mau. Perlu diingat juga script javascript yang banyak kadang berpengaruh pada kecepatan loading web/blog.

Seperti yang sudah ada di-intro, ini adalah fungsi lama dari Blogger. Untuk menampilkan url gambar pertama tiap pos, kita dapat memanggilnya dengan <data:post.featuredImage/>. Dengan cara ini gambar asli tiap pos akan tampil sempurna, tapi perlu diingat juga bahwa gambar dengan ukuran besar juga akan mempengaruhi kecepatan load web.

Atur ulang ukuran gambar

Untuk mengatur ukuran gambar yang "kekecilan" atau mungkin "kebesaran" dari pemanggilan diatas, Blogger ada fungsi resizeImage. Untuk syntax-nya sebagai berikut:
Default:
{imageUrl} resizeImage {number} resizeImage {dimension}
Contoh baku pemanggilan fungsi-nya sebagai berikut:

<img expr:src='data:post.featuredImage resizeImage 600 resizeImage "4:3"'/>
Fungsi Syntax:
resizeImage(imageUrl,number,dimension)
Dengan contoh pemanggilan sebagai berikut:
<img expr:src='resizeImage(data:view.featuredImage, 600, "4:3")'/>
Dan Anda juga dapat langsung memberikan value url gambar jika itu statis. Ingat lagi ya, ini hanya berlaku untuk gambar yang di host oleh Google seperti Blogger, GooglePhotos dan mungkin yang lainnya yang belum diketahui.

Kedua cara tersebut diatas akan menghasilkan gambar dengan format gambar dengan ukuran lebar 600px dengan dimensi 4:3. Namun sayang, lagi-lagi perlu disayangkan, untuk dimensinya kemungkinan besar hanya berlaku jika hasil square dan landscape, sedangkan untuk portrait tidak/belum tersedia. Hal ini kemarin sempat membuat kepala pusing karena BlogShop (Blogger Shop) pun jadi tak menarik karena menginginkan tampilan portrait, maklum bidang fashion.

Oh iya, sedikit tambahan, dimensi diatas tadi hanya optional, jadi jika menginginkan thumbnail sesuai ukuran asli dan hanya mengubah ukurannya saja, dapat langsung diterapkan tanpa perlu menambahkan dimensi.

Semoga cara ini membantu Anda dalam mempercantik tampilan blog/web.
Trimakasih

Toto Prayogo

Artikel Terkait

Berlangganan pos via email

Powered by FeedBurner