Resize First Image Post Blogger Tanpa Javascript

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

Untuk itu hendaklah jangan asal-asalan dalam menciptakan gambar untuk postingan. Buatlah gambar yang mempunyai kualitas yang elok biar cukup terang dilihat oleh pembaca dan juga mempunyai size yang cukup kecil biar tidak memberatkan loading blog.

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

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

Dan baru-baru ini Blogger mengeluarkan fitur gres adalah resizeImage yang sanggup merubah ukuran gambar Blogger dengan mudah.

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

 expr:src='data:post.thumbnail'

Dan menghasilkan URL gambar menyerupai di bawah ini sebagai contoh:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcoCmN2IXnpesdkTqOcOHV5s_k7-uMA7GEP8vQ0QFNv3hiFEjQzVy0dYEmJ3Tjm2wag91S55yQjcXcShMweED9UrDBNu2wH95WJawvdYvyVZpp0a65eBlw7FpRYOek2_ohc-gf3S3BQ-9/s72-c/windows-10.png

Dan sekarang src pada thumbnail popular post tampak menyerupai di bawah ini

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

Dan menghasilkan URL image menyerupai di bawah ini sebagai contoh:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcoCmN2IXnpesdkTqOcOHV5s_k7-uMA7GEP8vQ0QFNv3hiFEjQzVy0dYEmJ3Tjm2wag91S55yQjcXcShMweED9UrDBNu2wH95WJawvdYvyVZpp0a65eBlw7FpRYOek2_ohc-gf3S3BQ-9/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 arahan resizeImage yang terbaru dari Blogger, kita sanggup dengan gampang untuk merubah ukuran thumbnail dengan merubah angkanya sesuai kebutuhan kita. Misalnya kita ingin menampilkan thumbnail dengan ukuran 300px maka kodenya akan tampak menyerupai di bawah ini.

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

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

Namun kalau Anda bahagia dengan tampilan thumbnail dengan tampilan gambar penuh sesuai aslinya maka silahkan tulis menyerupai ini

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

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

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcoCmN2IXnpesdkTqOcOHV5s_k7-uMA7GEP8vQ0QFNv3hiFEjQzVy0dYEmJ3Tjm2wag91S55yQjcXcShMweED9UrDBNu2wH95WJawvdYvyVZpp0a65eBlw7FpRYOek2_ohc-gf3S3BQ-9/w300/windows-10.png

Nah, hal ini pun berkhasiat untuk me-resize thumbnail Blogger untuk firstImage Blogger yang dipakai pada thumbnail widget Featured Post Blogger, sanggup juga . Widget ini memakai arahan menyerupai di bawah ini.

 expr:src='data:postFirstImage'

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

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcoCmN2IXnpesdkTqOcOHV5s_k7-uMA7GEP8vQ0QFNv3hiFEjQzVy0dYEmJ3Tjm2wag91S55yQjcXcShMweED9UrDBNu2wH95WJawvdYvyVZpp0a65eBlw7FpRYOek2_ohc-gf3S3BQ-9/s1600/windows-10.png

Nah biar ukuran thumbnail Featured Post ini sesuai dengan ukuran daerah di mana widget ini di simpan maka kita sanggup memakai resizeImage menyerupai pada widget popular post. Misalkan widget featured post ini di simpan di sidebar dengan lebar 300px maka sanggup memakai arahan berikut.

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

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

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcoCmN2IXnpesdkTqOcOHV5s_k7-uMA7GEP8vQ0QFNv3hiFEjQzVy0dYEmJ3Tjm2wag91S55yQjcXcShMweED9UrDBNu2wH95WJawvdYvyVZpp0a65eBlw7FpRYOek2_ohc-gf3S3BQ-9/w300/windows-10.png

Perubahannya sanggup disimak dari animasi GIF di bawah ini.


Trik ini juga sanggup dipakai untuk arahan yang menampilkan thumbnail blogger di luar postingan atau untuk menampilkan thumbnail postingan di homepage menyerupai ini

 expr:src='data:blog.postImageUrl'

Dan silahkan gunakan arahan 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 sanggup memperkecil waktu pemuatannya.
Sumber https://www.kompiajaib.com/

Share this post