Mengganti Thumbnail Anew Theme Wordpress Dengan Gambar Pertama Postingan

Melanjutkan dari postingan saya yang kemudian wacana mengamankan bandwidth hosting dari image postingan pada blog Wordpress, kini saya share cara mengganti thumbnail pada Anew theme Wordpress dengan gambar pertama pada postingan yang diupload di pihak ketiga menyerupai Picassa dan lainnya. Dengan begitu, meskipun kita tidak mengupload gambar di postingan wordpress tapi thumbnail postingan di homepage akan tetap muncul dengan post-format image. Sebagai tumpuan ialah blog wordpress saya, silahkan klik kanan dan open image in new window kemudian lihat URL-nya. Itu ialah URL dari Google+.

Namun tentunya dengan ini akan menambah kerjaan lagi ketika kita menciptakan postingan, selain mengupload terlebih dahulu gambar kita di pihak ketiga, kita juga harus menambahkan lagi instruksi html image ke dalam postingan secara manual. Namun berdasarkan saya, demi menghemat bandwidth hosting maka hal ini harus kita lakukan.

Seperti yang saya katakan pada postingan sebelumnya, alasannya ialah ini memakai image yang dihosting di pihak ketiga, maka semoga gambar tidak menjadi beban loading blog maka kita gunakan juga trik defer image (menunda penayangan gambar).

Langkah Pertama

Silahkan buka functions.php melalui Dashboard > Appearance > Editor. Kemudian simpan php di bawah 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)){ //Defines a default image
     $first_img = "/images/default.jpg";
   }
   return $first_img;
 }

Silahkan save perubahannya. Kode di atas ialah untuk menampilkan gambar pertama di postingan. 

Langkah Kedua

Kemudian buka post-formats.php dan cari instruksi berikut

 <?php if ( has_post_format( 'image' ) ): // Image ?>
 
 <div class="post-format">
 <div class="image-container">
 <?php if ( has_post_thumbnail() ) {
 the_post_thumbnail('thumb-large'); 
 $caption = get_post(get_post_thumbnail_id())->post_excerpt;
 if ( isset($caption) && $caption ) echo '<div class="image-caption">'.$caption.'</div>';
 } ?>
 </div>
 </div>
 
 <?php endif; ?>

Kemudian silahkan ganti instruksi di atas dengan instruksi di bawah ini.

 <?php if ( has_post_format( 'image' ) ): // Image ?>
 
 <div class="post-format">
 <div class="image-container">
 <img alt="Mengganti Thumbnail Anew Theme Wordpress Mengganti Thumbnail Anew Theme Wordpress Dengan Gambar Pertama Postingan" src="data:image/gif;base64,R0lGODlhAwABAIAAAP///wAAACH5BAEAAAAALAAAAAADAAEAAAIChAsAOw==" data-src="<?php echo catch_that_image() ?>" title="Mengganti Thumbnail Anew Theme Wordpress Dengan Gambar Pertama Postingan"/>
 </div>
 </div>
 
 <?php endif; ?>

Kemudian jangan lupa simpan perubahannya. 

Langkah Ketiga

Sekarang silahkan buka footer.php dan simpan instruksi javascript di bawah ini di atas instruksi </body>

 <script type='text/javascript'>
 function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
 </script>

Nah perubahan pada instruksi php untuk menampilkan gambar pertama postingan untuk dijadikan thumbnail di homepage pada tema Anew di wordpress sudah beres.

Langkah Keempat

Sekarang tinggal cara menciptakan postingan dengan memakai image yang dihosting di pihak ketiga.

Seperti biasa, silahkan tulis postingan Anda pada tampilan visual. Kemudian pada format postingan di sebelah kanan, atur pada poin Image. Setelah simpulan menciptakan postingan, silahkan alihkan editor postingan pada tampilan Text. Kemudian silahkan simpan instruksi di bawah ini di awal postingan.

 <img class="aligncenter thumbnail-postingan" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="URL IMAGE DARI PICASSA DI SINI" alt="Mengganti Thumbnail Anew Theme Wordpress Mengganti Thumbnail Anew Theme Wordpress Dengan Gambar Pertama Postingan" title="Mengganti Thumbnail Anew Theme Wordpress Dengan Gambar Pertama Postingan" width="" height="" />

Silahkan sesuaikan URL image-nya, begitu pun untuk tag alt, title, width, dan height. Nah semoga gambar tidak tampil di dalam postingan juga (karena gambar akan tampil di atas postingan), maka kita harus menyembunyikannya. Perhatikan pada instruksi class="aligncenter thumbnail-postingan" nah instruksi thumbnail-postingan ini untuk mengaturnya.

Sekarang publikasikan dulu postingannya dalam keadaan tampilan editor postingan Text. Setelah itu silahkan masuk ke Appearance > Editor dan silahkan buka style.css kemudian simpan css di bawah ini untuk menyembunyikan gambar pertama di postingan.

 .thumbnail-postingan{display:none!important;visibility:hidden;width:0;height:0}

Selesai kini thumbnail postingan akan muncul dari image pertama postingan dan image pertama postingan tidak akan tampil di postingan.

Namun permasalahan lain muncul yaitu ketika postingan di share ke sosial media maka postingan tidak akan mempunyai image alias no-image alasannya ialah tidak mempunyai featured image. Untuk dikala ini saya belum mendapat solusinya, jikalau sudah ada akan saya share kembali.

Fixed (21 Feb. 2015): Silahkan ikuti trik untuk menciptakan Open Graph dan Twitter Card secara manual semoga dapat dishare ke sosial media DI SINI.

Selesai....untuk selanjutnya setiap kali menciptakan postingan, Anda hanya perlu melaksanakan langkah keempat saja. Selamat mencoba.

Sumber:
Get First Post Image: http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it

Sumber https://www.kompiajaib.com/

Share this post