Skip to main content

Cara Mengecilkan Thumbnail Template Notable



Sesuai selera, ada yang menyukai thumbnail besar dan ada juga yang menyukai yang sedang atau kecil. Pada Template Notable thumbnailnya cenderung besar dan pada Template Contempo cenderung kecil, tapi karena saya menyukai model gaya header dari Notable namun juga menyukai thumbnail ala Contempo maka keduanya saya gabungkan.

Pada Template Notable contoh kode gambar thumbnailnya seperti berikut:

background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, &quot;1:1&quot;).cssEscaped'/>);

256 adalah PX size gambar dan bisa diubah dengan ukuran lain, namun yang menjadi pekerjaan tambahan adalah jika size itu diubah maka style div yang mengikat kode itu juga harus disesuaikan yaitu div .snipppet-thumbnail.

Saya punya trik agar tidak terlalu banyak yang diubah agar tidak menambah pekerjaan baru yaitu dengan cara berikut.

1. Hapus atau salin semua kode gambar bawaan/asli dari Template Notable seperti diatas. Kode tersebut berada disekitar bagian <b:defaultmarkups>

2. Lalu ganti dengan kode gambar dari milik Template Contempo. Kodenya berikut ini.

Catatan: Kode ini hanya bisa muncul ketika dipanggil dengan kode include, silakan baca lebih lanjut keterangannya dibagian bawah postingan ini.

<b:includable id='snippetThumbnails' var='post'>
<div class='snippet-thumbnails'>
<b:include data='{
image: data:post.featuredImage, imageSizes: [64, 128, 256], imageRatio: &quot;1:1&quot;, sourceSizes: &quot;128px&quot;
}' name='responsiveImage'/>
</div>
</b:includable>

3. Namun ganti nama selectornya menjadi .snippet-thumbnails (ujungnya ditambahi huruf s agar beda dan agar tidak bertabrakan dengan style asli/bawaan)

4. Tambahkan juga selector css berikut.

.post-content .snippet-thumbnails{
float:$(startSide);
border:1px solid $(item.separator.color);
background:$(feed.button.background.color);
margin:8px 1em 0 0;
max-height:128px;
max-width:128px
}
.snippet-thumbnails, .snippet-thumbnails img{
border-radius:8px
}

5. Selesai. 

Pada tahap ini gambar thumbnail sudah berhasil menjadi kecil namun tetap saja banyak penyesuaian yang harus dilakukan, diantaranya:

1. Pada aslinya gambar besar berada di luar element html .post-content, setelah diganti gambar kecil dan agar posisisinya rapi maka sebaiknya dimasukkan ke dalam element html .post-content.

2. Cara memasukkannya adalah dibagian <b:defaultmarkups> dengan menambahkan kode <b:include name='snippetThumbnails'/> dan tempatkan dalam element html .post-content. Kode include ini berfungsi untuk menampilkan kode <b:includable.. diatas.

3. Style css .post-content ini juga harus diubah sedikit yaitu max-width-nya sebaiknya dihapus yang berarti biarkan menjadi default atau auto.

Saya rasa hanya itu dan selamat mencoba!

Comments