Create square thumbnail from any image size with PHP thumbnail class

*sebelumnya mohon maaf ini kalau bahasa saya agak berantakan*

Oke, postingan kali ini adalah berkenaan dengan create thumbnail dengan php thumbnail class.  Dalam suatu web, misal portal berita, atau web seperti http://carapedia.com untuk tampilan list news, kita biasanya nampilin image thumbnail di tampilan list news kita 😀 nah, untuk membuat thumbnail, kita bisa menggunakan Thumbnail.inc.php, itu bisa diambil dari sini aja -> Thumbnail.inc.php *ntah nemu darimana saya, yang jelas web yang saya oprek juga pake class ini*

Itu digunakan untuk membuat thumbnail dari image qt, disitu ada function resize , buat nge-resize image kita sesuai ukuran yang kita inginkan.  Untuk resize image,  dalam function resize ada  parameter maxWidth dan maxHeight.  Didalamnya ada perhitungan rationya, untuk menghasilkan gambar yang proportional. Jadi misalnya gambar 650×325, dengan maxWidth=120, idealnya untuk thumbnailnya adalah 120×60. Ini idealnya berdasarkan rationya.

Nah, maka masalah yang saya temui berdasarkan permintaan yang saya terima dan berdasarkan desain yang saya terima, bahwa image size untuk thumbnail haruslah square dengan ukuran 120×120. Lalu bagaimana? Bila image yang di upload sudah dalam bentuk square tentunya tidak masalah, tinggal pasang maxWidth dan maxHeight-nya 120, namun, ananging, jika image nya bukan pada ukuran square? misal 650×325, maka hasilnya ya tadi, 120×60, bukan square kan?

Lalu bagaimana cara ngakalinnya, emm, saya berputar-putar seharian untuk ini, nanya sama Galuh (temen kuliah saya) dan nanya bang ochi juga (senior programmer saya) dan mereka jawabannya sama. Di crop dulu untuk dapetin square image size, baru di resize.  Ada juga referensi logikanya, disini , bagian :

I want the thumbnail to be representative of the original image. This would be done by resizing the original so that it’s shortest side equalled the desired thumbnail size, while the longest side is worked out by restraining the ratio of the original image. Then, a crop would be taken directly from the center, at the desired thumbnail size, resulting in a pretty good thumbnail™.

Jadi gini nih, logikanya adalah apabila saya punya file image ukuran 650×325, saya akan crop dulu, ada function di thumbnail class untuk CropFromCenter, jadi image d crop dari tengah. Size yang dipilih adalah size minimal dari width dan height, jadi -> cropFromCenter(325); setelah itu baru kita resize sesuai ukuran yang kita inginkan. Hasilnya, kita bisa tepat memiliki image thumbnail dengan ukuran square.

Oke, langsung ke source codenya. Ini nyoba d localhost aja. Pertama, download thumbnail.class.php dulu dari link yang tadi, ini ntar di include. Lalu kita buat function ini :

<?php
include "thumbnail.inc.php";
function createThumbs( $pathToImages, $pathToThumbs, $maxWidth = 120, $maxHeight = 120, $quality=100 )
{
//echo "masuk createThumbs";
//include_once(_DOC_ROOT . "grab/thumbnail.inc.php");
if( is_file($pathToImages) )
{
$thumb = new Thumbnail($pathToImages);
if( $thumb )
{
list($width, $height) = getimagesize($pathToImages); //mendapatkan ukuran image, disimpan di list
$min = min($width, $height); //mendapatkan nilai terkecil dari height/widthnya
cropFromCenter($min); //memotong gambar dari tengah, sesuai ukuran min
$thumb->resize($maxWidth,$maxHeight); ///resize gambar
$thumb->save($pathToThumbs,$quality); //menyimpan gambar
}
else 
return false;
}
else
{
mail("feni@gmail.com","File Not Found $pathToImages", $pathToImages); 
return false;
}
return true;
}
?>

Nah, tinggal pake functionnya itu :

<?
$pathToImages = "img/online.jpg";
$pathToThumbs="thumb/online.jpg";
createThumbs( $pathToImages, $pathToThumbs, $maxWidth = 120, $maxHeight = 120, $quality=100 );

echo "ini image thumbnailnya  

 ";
echo "";
?>

Done, ada img thumnailnya kan? dengan ukuran fix 120×120, square.

Kelemahannya, ya karna image harus d crop kan, jadi ga tampil semuanya, dan kadang hasil cropnya aneh, hahhahaha., tapi paling manusiawi sih ya d crop dari tengah aja :3

Ohiya, sebenernya masih ada solusi kedua sih, yaitu kita main d CSS, ini kata temen kantor saya , programmer dan desainer.  Jadi, image size thumbnailnya dibesarkan, maunya kan 120×120, dibuat lebih dari itu. Trus nanti pas ditampilkan ke web, kita mainkan css, masukkan gambar d box div ukuran 120×120, lalu bila gambar lebih, d overflow:hidden, disembunyikan gitu. Tapi ini juga ada kelemahan, hla gambar yang dulu, yang kurang dari 120×120, yang sekarang kan saya tarik jadi 120×120, tapi kalau pake itu ntar, jadi ada backgorundnya dong? kotak 120×120 diisi gambar 60×80, jadi kaya ada ruang kosong. Dan untuk image yang baru., saya jadi tidak bisa memastikan ukuran eksaknya berapa. Misal saya buat width 150, lalu bila gambar 650×325, ntar gambarnya jadi 150×75, masih kurang kan? heightnya ga masuk. Belum untuk anysize yang lain, bisa aja ada kemungkinan ukurannya lebih kecil. Ini yang jadi masalah, kalo kebesaran sih gapapa :v Maka dari itu saya bingung, jadi gimana? Sampai saat ini sih masih mutusin make yang crop from center dari phpnya, biar pas aja gitu :3 hhe.

Kalau ada wangsit dan nasihat lain, monggo silahkan komen. Terimakasih, senang sekali bila ada yang berkenan memberi pencerahan 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s