Ditulis oleh: Ditulis pada: 2/20/2015
Melanjutkan dari postingan saya yang lalu tentang 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 seperti 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 contoh adalah blog wordpress saya, silahkan klik kanan dan open image in new window kemudian lihat URL-nya. Itu adalah URL dari Google+.
Namun tentunya dengan ini akan menambah kerjaan lagi ketika kita membuat postingan, selain mengupload terlebih dahulu gambar kita di pihak ketiga, kita juga harus menambahkan lagi kode html image ke dalam postingan secara manual. Namun menurut saya, demi menghemat bandwidth hosting maka hal ini harus kita lakukan.
Seperti yang saya katakan pada postingan sebelumnya, karena ini menggunakan image yang dihosting di pihak ketiga, maka agar 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 adalah untuk menampilkan gambar pertama di postingan.
Langkah Kedua
Kemudian buka post-formats.php dan cari kode 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 kode di atas dengan kode di bawah ini.
<?php if ( has_post_format( 'image' ) ): // Image ?>
<div class="post-format">
<div class="image-container">
<img alt="<?php the_title(); ?>" src="data:image/gif;base64,R0lGODlhAwABAIAAAP///wAAACH5BAEAAAAALAAAAAADAAEAAAIChAsAOw==" data-src="<?php echo catch_that_image() ?>" title="<?php the_title(); ?>"/>
</div>
</div>
<?php endif; ?>
Kemudian jangan lupa simpan perubahannya.
Langkah Ketiga
Sekarang silahkan buka footer.php dan simpan kode javascript di bawah ini di atas kode
</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 kode php untuk menampilkan gambar pertama postingan untuk dijadikan thumbnail di homepage pada tema Anew di wordpress sudah beres.
Langkah Keempat
Sekarang tinggal cara membuat postingan dengan menggunakan 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 selesai membuat postingan, silahkan alihkan editor postingan pada tampilan Text. Kemudian silahkan simpan kode 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="" title="" width="" height="" />
Silahkan sesuaikan URL image-nya, begitu pun untuk tag alt, title, width, dan height. Nah agar gambar tidak tampil di dalam postingan juga (karena gambar akan tampil di atas postingan), maka kita harus menyembunyikannya. Perhatikan pada kode
class="aligncenter thumbnail-postingan" nah kode 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 sekarang 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 memiliki image alias no-image karena tidak memiliki featured image. Untuk saat ini saya belum mendapatkan solusinya, jika sudah ada akan saya share kembali.
Fixed (21 Feb. 2015): Silahkan ikuti trik untuk membuat Open Graph dan Twitter Card secara manual agar bisa dishare ke sosial media DI SINI.
Selesai....untuk selanjutnya setiap kali membuat postingan, Anda hanya perlu melakukan 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
Get First Post Image: http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it