Menampilkan gambar WebP di WordPress tanpa plugin

Melanjutkan tutorial sebelumnya: Mengatasi tidak bisa upload file WebP WordPress, pada panduan kali ini ada persyaratan untuk mendukung image format .webp bisa tampil untuk thumbnail pada summary post dan large pada single post, yaitu:

• Versi PHP 7 ke atas
• GD library (kebanyakan hosting shared/cPanel sudah ada)
• Pengetahuan struktur theme WordPress

Catatan:

• Saat membuat gambar .webp untuk post sebaiknya disesuaikan dulu ukuran saat menyimpan gambar, karena format .webp tidak bisa diresize melalui mesin WordPress. Jadi ukurannya tetap large mode.

Berikut langkah-langkahnya:

1. Mendeteksi ekstensi image .webp

Buat kondisional PHP paste kode berikut untuk mendeteksi format .webp sebelum the_post_thumbnail kalau di theme standard WordPress berbasis underscores.me ada di template-parts/content.php.

$id1 = get_post_thumbnail_id($post->ID);
$type = get_post_mime_type( $id1 );
$mime_type = explode('/', $type);
$type = '.'.$mime_type['1'];

Credit: @TBI Infotech.

2. Mengambil data meta height dan weight pada .webp

Setelah mendapatkan format valid .webp dari data get_post_thumbnail_id, tambahkan kondisional seperti ini

//Jika terdeteksi format .webp
if($type == '.webp'){
	/*
	* Maka, ambil width and height dari .webp dengan function
	* imagecreatefromwebp
	* imagesx
	* imagesy
	*/
	$url = get_the_post_thumbnail_url();
	$img = imagecreatefromwebp($url);
	$width = imagesx($img);
	$height = imagesy($img);
}

Ini saya dapat dari @h2ooooooo

3. Menampilkan gambar WebP di WordPress

Sekarang, setelah semua dipersiapkan waktunya print hasilnya, menampilkan thumbnail untuk cuplikan post dan ukuran penuh untuk single post, tapi kita perlu menyaring dan replace tag img seperti kode di bawah ini

//Jika terdeteksi format .webp
if($type == '.webp'){
	// Saring dan replace tag <img
	$image = get_the_post_thumbnail( $post->ID, '', array( 'class' => 'img-fluid' ) );
	$attrs = 'width="'.$width.'" height="'.$height.'" ';
	$image = str_replace('src=', $attrs.'src=', $image);

	//Tampilkan
	echo $image;
}else{
	the_post_thumbnail('large', array('class' => 'img-fluid'));
}

Untuk menampilkan ukuran thumbnail ganti large dengan thumbnail atau small

4. Kode keseluruhan

Secara keseluruhan kodenya akan tampak seperti ini, sudah saya sederhakanan, silahkan dimodifikasi.

//Mendeteksi attachment post format gambar .webp
$id1 = get_post_thumbnail_id($post->ID);
$type = get_post_mime_type( $id1 );
$mime_type = explode('/', $type);
$type = '.'.$mime_type['1'];

//Jika terdeteksi format .webp
if($type == '.webp'){
	/*
	* Maka, ambil width and height dari .webp dengan function
	* imagecreatefromwebp
	* imagesx
	* imagesy
	*/
	$url = get_the_post_thumbnail_url();
	$img = imagecreatefromwebp($url);
	$width = imagesx($img);
	$height = imagesy($img);
	
	// Saring dan replace tag <img
	$image = get_the_post_thumbnail( $post->ID, '', array( 'class' => 'img-fluid' ) );
	$attrs = 'width="'.$width.'" height="'.$height.'" ';
	$image = str_replace('src=', $attrs.'src=', $image);

	//Tampilkan
	echo $image;
}else{
	the_post_thumbnail('large', array('class' => 'img-fluid'));
}

Hasilnya akan seperti ini:

Jika format gambar WebP, maka:

<img width="800" height="480" src="https://www.idnetter.com/../../gambar.webp" class="img-fluid" />

Jika bukan WebP

<img width="actual_width" height="actual_height" src="https://www.idnetter.com/../../gambar.jpg" class="img-fluid" />

Tutorial ini sudah saya praktekkan dan hasilnya bisa dilihat pada gambar thumbnail di homepage untuk artikel ini dan featured image di atas.

Nah, selesai. Semoga bermanfaat dan teman-teman berhasil menampilkan gambar WebP tanpa plugin.