Just Another Thumbnail Method in WordPress

belakangan ini kembali marak adanya serangan terhadap blog ber-engine wordpress yang dilakukan melalui celah keamanan pada on-the-fly thumbnailer yang marak digunakan pada themes wordpress. fungsi thumbnailer sendiri sebetulnya sudah built in dalam system wordpress, tapi salah satu kelemahannya adalah hanya terbatas pada satu ukuran saja.

dan untuk themes yang membutuhkan beberapa macam ukuran thumbnail, kita bisa menambahkan thumbnailer sendiri yang tidak menggunakan metode on-the-fly tapi menggunakan metode membuat file gambar baru dengan ukuran yang ditentukan sebelumnya.

untuk menggunakan metode ini, ada dua file di struktur themes yang harus diubah atau ditambahkan kode di dalamnya, yang pertama file functions.php dan penambahannya sebagai berikut :

[php]
if ( ! function_exists( ‘itz_a_thumbnailer_selector’ ) ) :
function itz_a_thumbnailer_selector($post_ID, $size = ‘thumbnail’, $w = 120, $h = 120) {
if($size == ‘thumbnail’) {
if(has_post_thumbnail( $post_ID ) ) {
$post_thumbnail_id = get_post_thumbnail_id( $post_ID );
$attachment= wp_get_attachment_image_src( $post_thumbnail_id, $size, false, ”);
if($attachment[1] == $w.’px’ && $attachment[2] == $h.’px’) {
$related_img_src = $attachment[0];
} else {
$thumm = itz_the_thumbnailer($attachment[0], $w, $h);
$related_img_src = get_bloginfo(“template_directory”) . ‘/cache/’.$thumm;
}
} else {
if ($images = get_children(array(
‘post_type’ => ‘attachment’,
‘numberposts’ => 1,
‘post_status’ => null,
‘post_parent’ => $post_ID,))) {
foreach($images as $image) {
$attachment = wp_get_attachment_image_src($image->ID, $size);
}
if($attachment[1] == $w.’px’ && $attachment[2] == $h.’px’) {
$related_img_src = $attachment[0];
} else {
$thumm = itz_the_thumbnailer($attachment[0], $w, $h);
$related_img_src = get_bloginfo(“template_directory”) . ‘/cache/’.$thumm;
}
} else {
$related_img_src = get_bloginfo(“template_directory”) . ‘/images/image_dasar.png’;
}
}
} else {
if(has_post_thumbnail( $post_ID ) ) {
$post_thumbnail_id = get_post_thumbnail_id( $post_ID );
$attachment= wp_get_attachment_image_src( $post_thumbnail_id, $size, false, ”);
if($attachment[1] == $w.’px’ && $attachment[2] == $h.’px’) {
$related_img_src = $attachment[0];
} else {
$thumm = itz_the_thumbnailer($attachment[0], $w, $h);
$related_img_src = get_bloginfo(“template_directory”) . ‘/cache/’.$thumm;
}
} else {
if ($images = get_children(array(
‘post_type’ => ‘attachment’,
‘numberposts’ => 1,
‘post_status’ => null,
‘post_parent’ => $post_ID,))) {
foreach($images as $image) {
$attachment = wp_get_attachment_image_src($image->ID, $size);
}
if($attachment[1] == $w.’px’ && $attachment[2] == $h.’px’) {
$related_img_src = $attachment[0];
} else {
$thumm = itz_the_thumbnailer($attachment[0], $w, $h);
$related_img_src = get_bloginfo(“template_directory”) . ‘/cache/’.$thumm;
}
} else {
$related_img_src = get_bloginfo(“template_directory”) . ‘/images/image_dasar.png’;
}
}
}
return $related_img_src;
}
endif;

function itz_the_thumbnailer($filename, $maxw = 120, $maxh = 120) {
$target = md5($filename).$maxw.$maxh.’.jpg’;
$path_to_folder = $_SERVER[‘DOCUMENT_ROOT’].’/wp-content/twentyten/cache/’;
if(!is_file($path_to_folder.$target)) {
$get = explode(‘.’, $filename);
$result = count($get);
$gambar = $get[$result-1];
list($w, $h) = getimagesize($filename);

$a = $maxw/$w;
$b = $maxh/$h;

if($a>$b) {
$newwidth = (int) ($w*$a);
$newheight = (int) ($h*$a);
if($newwidth>$maxw) {
$ndx = (int) (($newwidth – $maxw)/2);
$dx = -$ndx;
} else $dx = 0;
if($newheight>$maxh) {
$ndy = (int) (($newheight – $maxh)/2);
$dy = -$ndy;
} else $dy = 0;
} else {
$newwidth = (int) ($w*$b);
$newheight = (int) ($h*$b);
if($newwidth>$maxw) {
$ndx = (int) (($newwidth – $maxw)/2);
$dx = -$ndx;
} else $dx = 0;
if($newheight>$maxh) {
$ndy = (int) (($newheight – $maxh)/2);
$dy = -$ndy;
} else $dy = 0;
}

$thumb = imagecreatetruecolor($maxw, $maxh);
$white = imagecolorallocate($thumb, 255, 255, 255);

imagefill($thumb, 0, 0, $white);

if ($gambar==’jpg’||$gambar==’jpeg’) {
$source = imagecreatefromjpeg($filename);
} else if ($gambar==’gif’) {
$source = imagecreatefromgif($filename);
} else if ($gambar==’png’) {
$source = imagecreatefrompng($filename);
}

imagecopyresampled($thumb, $source, $dx, $dy, 0, 0, $newwidth, $newheight, $w, $h);
imagejpeg($thumb, $path_to_folder.$target, 85);
imagedestroy($thumb);
}
return $target;
}
[/php]

penambahan kedua adalah pada file viewer, bisa home.php, index.php, atau category.php tergantung dimana fungsi multiple thumbnail akan digunakan, dan pada gambar di atas, fungsi tersebut diletakkan pada file home.php dengan penambahannya bisa sebagai berikut :

[php]
echo ‘<ul>’;
echo ‘<li><h2>Main Featured</h2>’;
echo ‘<img src=”‘.itz_a_thumbnailer_selector($post->ID, ‘medium’, 380, 240).'” alt=”‘.the_title().'” />’;
echo ‘</li>’;
echo ‘<li><h2>Secondary Featured</h2>’;
echo ‘<img src=”‘.itz_a_thumbnailer_selector($post->ID, ‘medium’, 186, 140).'” alt=”‘.the_title().'” />’;
echo ‘</li>’;
echo ‘<li><h2>Normal Post</h2>’;
echo ‘<img src=”‘.itz_a_thumbnailer_selector($post->ID).'” alt=”‘.the_title().'” />’;
echo ‘</li>’;
echo ‘<li><h2>Normal Post</h2>’;
echo ‘<img src=”‘.itz_a_thumbnailer_selector($post->ID).'” alt=”‘.the_title().'” />’;
echo ‘</li>’;
echo ‘<ul>’;
[/php]

fungsi itz_a_thumbnailer_selector() yang ditambahkan di file functions.php merupakan fungsi yang akan digunakan untuk menentukan data image mana yang akan digunakan sebagai thumbnail sesuai dengan ukuran yang dibutuhkan oleh file viewer, setelah data image ditemukan diperiksa apakah ukuran image telah sesuai dengan yang dibutuhkan atau tidak. jika tidak, maka fungsi itz_the_thumbnailer() akan dipanggil untuk memproses data image menjadi image baru yang sesuai dengan ukuran yang dibutuhkan.

fungsi itz_the_thumbnailer() akan menurunkan ukuran image menuju ukuran yang dibutuhkan tanpa mengubah proporsi-nya, dan apabila terdapat perbedaan perbandingan antara tinggi dan lebar antara image asli dengan ukuran thumbnail, maka fungsi tersebut akan secara otomatis menggeser peletakan image baru sehingga image asli dan thumbnail memiliki titik tengah yang sama.

berikut contoh jadinya :

oh ya, jangan lupa untuk membuat folder penyimpan thumbnailnya sebelum menggunakan script ini –dimana jauh lebih baik apabila diletakkan di dalam folder themes yang digunakan–, agar thumbnail-nya dapat dibuat dengan baik.

selamat mencoba :D

Published by

Alit Mahendra Bramantya

Complicatedly simple, not just another internet presence enthusiast. Currently managing Research (including Analytics) Division at Think.Web with Web App Development and Digital Analytics as main responsibility. Views are my own.