Menampilkan featured image pada artikel WordPress

Image thumbnails, pasti sudah banyak yang tahu dan lihat mode thumbnail di website. Entah yang dibuat dengan WordPress ataupun bukan, tetap saja menjadi daya tarik tersendiri bagi tampilan suatu halaman web.  Pada WordPress sendiri digunakan istilah Featured image ( dahulu post thumbnails ).

Kali ini kita akan bahas bagaimana menampilkan thumbnails di WordPress secara mudah, dimana saja, masih bersama saya, Riesurya.

Memasang Featured Image pada setting artikel

Tahapan yang paling penting adalah memastikan bahwa theme yang digunakan mempunyai fitur support terhadap featured image, yang ditandai dengan adanya sebaris kode :

add_theme_support( 'post-thumbnails' );

dan kalau belum ada, mari kita tambahkan, caranya adalah sebagai berikut :

add_action( 'after_setup_theme', 'my_theme_setup');

function  mytheme_setup()
{
/*
* Enable support for Post Thumbnails on posts and pages.
*
* See: https://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
*/
add_theme_support( 'post-thumbnails' );
}

Dengan mendeklarasikan theme support diatas, dan jangan lupa dipanggil melalui hook action after_setup_theme() maka kita akan mendapati Tab Featured Image di admin artikel.

Sampai disini, kita sudah berhasil memasang featured image, dan kini tinggal bagaimana kode untuk menampilkannya, seperti pada contoh ilustrasi di atas.

Menampilkan featured image pada single artikel

Dalam contoh berikut featured image akan ditampilkan sebagai post thumbnail tepat diantara judul dan paragraf pertama artikel. Perhatikan ilustrasi berikut, seperti inilah kurang lebih hasilnya.

devio-full-postthumbnail

kode yang digunakan:

<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>

Ukuran post thumbnail secara default akan diambil berdasarkan ukuran file image yang diupload. Jadi kalau file image yang diset sebagai featured image mempunyai ukuran 1600px X 800px, maka dimensi itulah yang akan digunakan (secara default ) sebagai post thumbnail. Sepertinya tidak terlalu menyenangkan ya, bila halaman harus memuat post thumbnail dengan ukuran besar sementara yang ditampilkan hanya mungkin 25% nya ( baca document size halaman menjadi besar ).

PS : ukuran document size adalah total ukuran html hasil render + semua elemen yang diload oleh browser. Semakin besar document size maka semakin besar pula kuota internet dan waktu yang dibutuhkan untuk menampilkan halaman oleh pengunjung = mimpi buruk performa web.

Bagaimana bila diinginkan ukuran tertentu, misal 500px X 240px untuk post thumbnail, dan dengan demikian diharapkan tidak ada lagi pembesaran document size halaman HTML yang tidak perlu.

Caranya sederhana saja, kita cukup menambahkan sebaris kode di atas di dalam function  mytheme_setup() – lihat contoh kode awal :

set_post_thumbnail_size(500, 240, true );

Penjelasan :
500 : ukuran lebar ( width ) post thumbnail target
240: ukuran tinggi ( height ) post thumbnail target
true : dimensi akan dipaksa proporsional sesuai parameter yang disebutkan ( 500, 240 )

dan setelah kita re-load ulang maka hasilnya adalah …sama saja ????

Ada apa gerangan? Kenapa ukuran post thumbnail tidak berubah setelah setting ukuran post thumbnail diubah?

Sederhananya, pengaturan dengan menggunakan fungsi set_post_thumbnail() hanya berlaku untuk image yang sudah diupload setelah fungsi ditulis, dan tidak berpengaruh terhadap image yang sudah diupload sebelumnya. Bisa dipahami kan 😀

OK, jangan menyerah dulu. Solusinya banyak dan kali ini saya akan menggunakan cara yang paling mudah tanpa harus menulis kode.

Install plugin Regenerate Thumbnails, dan aktifkan lalu jalankan settingnya. ( lihat screenshot )

screenshot …ahhhh belum diupload juga nih

Setelah itu, kembali ke halaman depan ( frontend ) dan reload halaman dengan post thumbnail ( dengan ukuran yang baru ). Hasilnya adalah seperti tampak pada screenshot berikut :

devio-resized-postthumbnail

Ternyata memang mudah dan menyenangkan kan :D. Dan bagaimana lanjutan tampilan post thumbnail di dalam artikel terserah anda. Dalam contoh di atas, post thumbnail ( image dari featured Image ) di kemas dalam tag <div class=”post-thumbnail”> dan tinggal mainkan saja CSS nya. Dalam ilustrasi seperti pada screenshot diset untuk tampil dengan mode center.

sampai ketemu di sesi lainnya seputar post thumbnail dan selamat bersenang-senang 🙂

Comments are closed.