Resize First Image Post Blogger Tanpa Javascript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/23/2016

Gambar merupakan salah satu pendukung agar postingan menjadi lebih menarik untuk dibaca ataupun untuk lebih menjelaskan artikel. Namun gambar juga merupakan salah satu penyumbang masalah pada loading blog.

Untuk itu hendaklah jangan asal-asalan dalam membuat gambar untuk postingan. Buatlah gambar yang memiliki kualitas yang bagus agar cukup jelas dilihat oleh pembaca dan juga memiliki size yang cukup kecil agar tidak memberatkan loading blog.

Atau jika tidak ingin gambar menghambat loading blog, kita bisa menggunakan cara men-defer gambar dengan sebuah javascript. Sebagai contoh, gambar animasi di bawah ini memiliki size 358KB namun dengan di-defer menjadi tidak terasa berat waktu pemuatannya.

Nah jika suatu artikel Blogger memiliki gambar di postingan, maka Blogger akan menampilkan thumbnail postingan dari gambar yang ada di dalam postingan, jika ada beberapa gambar maka thumbnail akan diambil dari gambar pertama di postingan.

Dan baru-baru ini Blogger mengeluarkan fitur baru yaitu resizeImage yang dapat merubah ukuran gambar Blogger dengan mudah.

Hal ini pertama kali diketahui pada perubahan kode untuk menampilkan thumbnail pada widget popular post. Sebelumnya untuk src pada thumbnail popular post tampak seperti di bawah ini.

expr:src='data:post.thumbnail'

Dan menghasilkan URL gambar seperti di bawah ini sebagai contoh:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0eS646qpnj269BzTgiRhWC86rpj7zbKYGjprlXt90-cPfyL8vPRrqWwFi4-J3fHSDeUpftbIz5oEy98r79Ks3MyvhkOgDQ24lcc4pQJuiYFycN9-A9XcDKE_UH7_O89n62ZbsoVOMycAi/s72-c/windows-10.png

Dan kini src pada thumbnail popular post tampak seperti di bawah ini

expr:src='resizeImage(data:post.thumbnail, 72, "1:1")'

Dan menghasilkan URL image seperti di bawah ini sebagai contoh:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0eS646qpnj269BzTgiRhWC86rpj7zbKYGjprlXt90-cPfyL8vPRrqWwFi4-J3fHSDeUpftbIz5oEy98r79Ks3MyvhkOgDQ24lcc4pQJuiYFycN9-A9XcDKE_UH7_O89n62ZbsoVOMycAi/w72-h72-p-nu/windows-10.png

Dari kedua URL gaembar di atas yang dihasilkan akan menampilkan gambar dengan ukuran yang sama, hanya berbeda pada s72-c dan w72-h72-p-nu.

Namun untuk kode resizeImage yang terbaru dari Blogger, kita bisa dengan mudah untuk merubah ukuran thumbnail dengan merubah angkanya sesuai kebutuhan kita. Misalnya kita ingin menampilkan thumbnail dengan ukuran 300px maka kodenya akan tampak seperti di bawah ini.

expr:src='resizeImage(data:post.thumbnail, 300, "1:1")'

Maka thumbnail akan tampil dengan ukuran 300px x 300px persegi empat.

Namun jika Anda senang dengan tampilan thumbnail dengan tampilan gambar penuh sesuai aslinya maka silahkan tulis seperti ini

expr:src='resizeImage(data:post.thumbnail, 300)'

Maka URL gambar akan tampak seperti di bawah ini sebagai contoh.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0eS646qpnj269BzTgiRhWC86rpj7zbKYGjprlXt90-cPfyL8vPRrqWwFi4-J3fHSDeUpftbIz5oEy98r79Ks3MyvhkOgDQ24lcc4pQJuiYFycN9-A9XcDKE_UH7_O89n62ZbsoVOMycAi/w300/windows-10.png

Nah, hal ini pun berguna untuk me-resize thumbnail Blogger untuk firstImage Blogger yang digunakan pada thumbnail widget Featured Post Blogger, bisa juga . Widget ini menggunakan kode seperti di bawah ini.

expr:src='data:postFirstImage'

Dan URL gambar yang dihasilkan akan tampak seperti di bawah ini sebagai contoh.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0eS646qpnj269BzTgiRhWC86rpj7zbKYGjprlXt90-cPfyL8vPRrqWwFi4-J3fHSDeUpftbIz5oEy98r79Ks3MyvhkOgDQ24lcc4pQJuiYFycN9-A9XcDKE_UH7_O89n62ZbsoVOMycAi/s1600/windows-10.png

Nah agar ukuran thumbnail Featured Post ini sesuai dengan ukuran tempat di mana widget ini di simpan maka kita bisa menggunakan resizeImage seperti pada widget popular post. Misalkan widget featured post ini di simpan di sidebar dengan lebar 300px maka dapat menggunakan kode berikut.

expr:src='resizeImage(data:postFirstImage, 300)'

Sehingga URL gambar yang dihasilkan akan tampak seperti di bawah ini sebagai contoh.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0eS646qpnj269BzTgiRhWC86rpj7zbKYGjprlXt90-cPfyL8vPRrqWwFi4-J3fHSDeUpftbIz5oEy98r79Ks3MyvhkOgDQ24lcc4pQJuiYFycN9-A9XcDKE_UH7_O89n62ZbsoVOMycAi/w300/windows-10.png

Perubahannya bisa disimak dari animasi GIF di bawah ini.


Trik ini juga bisa digunakan untuk kode yang menampilkan thumbnail blogger di luar postingan atau untuk menampilkan thumbnail postingan di homepage seperti ini

expr:src='data:blog.postImageUrl'

Dan silahkan gunakan kode di bawah ini untuk resizeImage dengan ukuran 600px

expr:src='resizeImage(data:blog.postImageUrl, 600)'

Dengan begitu thumbnail akan tampil sesuai dengan ukuran tempatnya berada sehingga dapat memperkecil waktu pemuatannya.