Cara Membuat Thumbnail dari Gambar Pertama Postingan WP

Dalam memilih themes wordpress yang ingin digunakan dalam blog kadang cukup membingungkan. Di satu sisi pilihan themes wordpress sungguh sangat beragam, melimpah, dan beranega ragam. Namun di sisi lain dalam mencocokkan antara themes WP yang tersedia dengan keinginan kadang jadi memakan waktu.

Untuk itu diperlukan fleksibilitas dalam diri kita untuk menentukan pilihan themes yang cocok. Salah satu yang sempat menjadi kendala saya adalah penggunaan thumbnail di index blog kita. Banyak pilihan themes WP yang menawarkan tampilan thumbnail di halaman index blog. Namun kebanyakan thumbnail yang ditampilkan adalah thumbnail hasil upload image sendiri secara manual.

Cara Membuat Thumbnail dari Gambar Pertama Postingan WP

Contoh Theme Yang Menampilkan Thumbnail di Halaman Depan Blog

Sementara bagi penggemar autoblog jarang sekali bisa menampilkan thumbnail seperti ini. Yang ada hanya image postingan, itupun kadang nyomot dari web lain, misal dari amazon atau sumber image lainnya.

Untuk kebutuhan ini saya sempat googling mencari cara bagaimana agar salah satu gambar yang nongol di postingan kita bisa secara otomatis menjadi thumbnail di halaman index, tanpa harus mengupload sendiri gambarnya.

Nah untung ketemu blog-blog ini:

– css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/

– wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it

Di situ dikasih tahu caranya agar thumbnail yang ditampilkan di halaman depan blog, merupakan image pertama yang nongol di postingan. Caranyapun ternyata nggak susah-sudah amat:

Pertama kenali dulu themes yang akan kita gunakan. Buka folder themes kita, dan temukan file functions.php. Edit file functions.php dengan text editor, lalau sisipkan baris kode berikut ini:

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches[1][0];

if(empty($first_img)) {
   $first_img = "/path/to/default.png";
}
return $first_img;

}

Kedua, buka file index.php di direktori themes kita (atau mungkin juga file loop.php), lalu dibagian yang ingin kita tampilkan thumbnail-nya kita sisipkan kode berikut ini:

if ( get_the_post_thumbnail($post_id) != '' ) {

echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
the_post_thumbnail();
echo '</a>';

} else {

echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
echo '<img src="';
echo catch_that_image();
echo '" alt="" />';
echo '</a>';

}

Sudah itu saja, lalu coba buka blog kita, maka tadaaaaaa… thumbnailnyapun sudah nongol. Bagusnya lagi kalau di widget dibutuhkan thumbnail atau di related post dibutuhkan thumbnail maka tinggal sesuaikan kebutuhan dengan menyisipkan kode kedua di tempat / file yang dibutuhkan.

Jangan lupa juga untuk mengedit link “/path/to/default.png” sesuai gambar default yang diinginkan jika dalam postingan tidak tersedia image/gambar.

Semoga bermanfaat

Fuad Muftie

4 Responses to “Cara Membuat Thumbnail dari Gambar Pertama Postingan WP”
  1. abu ubaidilah says:
    • Fuad says:
  2. dona says:
    • Fuad says:

Leave a Reply

Your email address will not be published. Required fields are marked *

*