Cara Mengatur Rasio Gambar Thumbnail di Blogger


Selamat datang kembali di Code Pelajar, pada kesempatan kali ini saya akan menjelaskan cara mengatur rasio gambar thumbnail pada blog yang menggunakan platform blogger. Pengaturan rasio ini sebenarnya ada pada kode resize di blogger yang memungkinkan kita mengubah dan mengatur ukuran gambar thumbnail di setiap postingan kita. Ini berguna agar ukuran gambar disesuaikan dengan kebutuhan sekaligus mempercepat loading halaman karena ukuran gambar yang dibuat untuk thumbnail tidak berukuran seperti gambar aslinya.
Sebelum mengatur rasio gambar, kamu harus mengetahui dahulu resizer pada blogger, jika belum silahkan baca artikelnya disini. Pada resizer di blogger kira-kira seperti ini kodenya:

expr:src='resizeImage(data:post.thumbnailUrl, 240, "640:400")'


Baiklah berikut saya akan menjelaskannya terlebih dahulu pada kode dan gambar diatas. Itu adalah contoh penerapan pengaturan rasio yang saya lakukan untuk template yang saya buat. Kita bisa melihat angka 240 dan juga 640:400 pada pengaturan resizer gambar di blogger yang saya terapkan. jika kita terjemahkan, kode itu berarti "ukuran panjang 240 dengan rasio 640:400" dan ukurannya menggunakan satuan pixel/px. Nah ini lah yang dimaksud cara mengatur rasio untuk gambar thumbnail.

expr:src='resizeImage(data:post.thumbnailUrl, {{panjang_gambar}}, "{{rasio_panjang}}:{{rasio_tinggi}}")'

Saya ada contoh dari blog yang tidak mengatur rasio thumbnailnya dengan benar sehingga gambarnya dia atur menggunakan CSS langsung pada gambarnya. Inilah yang membuat index post pada blog Kode Jarwo menghasilkan gambar yang gepeng.


Cara kerja rasio pada resizer ini yaitu melakukan cropping pada gambar sehingga hasil yang didapat sesuai rasio. Bagi kamu yang kebingungan saya ada beberapa contoh rasio yang bisa kamu terapkan sesuai kebutuhan

1. Rasio Gambar Thumbnail Kotak

Untuk mengatur gambar thumbnail agar berbentuk persegi atau kotak sempurna, kita cukup memakai rasio 1:1 ini artinya rasio panjang berbanding sama dengan tingginya. Maka penerapannya seperti dibawah ini.

expr:src='resizeImage(data:post.thumbnailUrl, 240, "1:1")'


2. Rasio Gambar Thumbnail Persegi Panjang Landscape

Untuk rasio ini banyak pilihan. Kita cukup menambahkan nilai lebih untuk rasio panjangnya dan penerapannya seperti berikut ini

<-- Rasio ukuran foto -->
expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;4:3&quot;)'
<-- Rasio ukuran widescreen -->
expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;16:10&quot;)'
expr:src='resizeImage(data:post.thumbnailUrl, 240,&quot;16:9&quot;)'
<-- Rasio ukuran banner persegi panjang -->
expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;24:8&quot;)'


3. Rasio Gambar Thumbnail Persegi panjang Potret/Tegak

Rasio tegak ini mungkin kebalikan dari lanscape saja. Kita hanya menambahkan nilai lebih untuk rasio tingginya seperti berikut:


expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;3:4&quot;)'
expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;10:16&quot;)'


4. Rasio Gambar Thumbnail Custom

Untuk mengatur rasio sebenarnya tidak harus terpaku pada kode yang diatas, namun kita juga bisa mengkustomnya sesuka hati kita. Misalnya kita terbiasanya membuat gambar thumbnail dengan ukuran 640x420, agar hasil thumbnail tidak terkena cropping pada resizer kita bisa mengatur dengan ukuran rasio seperti pada gambarnya seperti ini:

expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;640:240&quot;)'


Dengan menggunakan rasio custom ini kamu akan mendapatkan gambar thumbnail tanpa cropping alias full seperti aslinya. Seperti biasa 240 untuk panjangnya bisa disesuaikan sesuai keinginan. Namun saran saya sesuaikan dengan ukuran yang tampil pada layar agar tidak buram ataupun menghamburkan loading bit.

Seperti itulah cara mengatur rasio gambar thumbnail untuk blogger. Dengan memakai rasio ini kamu bisa mengatur ukuran thumbnail tanpa harus mengatur ukuan gambarnya secara langsung menggunakan css ataupun inline atribute. Dengan begitu gambarnya akan terlihat rapih.
Untuk memaksimalkan gambarnya jangan lupa menggunakan konsep gambar responsif pada tag <img> dengan css seperti berikut:

img {
 max-width:100%;
 height:auto;
}


Jika kamu belum mengerti konsep responsive gambar silahkan pelajari lebih lanjut di artikel yang saya buat disini.

Itulah penjelasan bagaimana cara mengatur rasio thumbnail di blogger. Masih banyak tutorial lainnya yang saya ingin bagikan, namun untuk sekarang cukup sampai disini dulu. nantikan artikel seputar fundamental di Code Pelajar Lainnya. Jangan lupa jika tidak mengerti atau kurang paham bisa berkomentar di bawah setelah artikel ini selesai. jangan lupa klik iklannya juga.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel