Teknik Thumbnail Gambar

Dahulu pernah ada teman saya yang sedang mengerjakan tugas besar e-commerce di salah satu matakuliah pemrograman PHP. Dia bertanya mengenai gambar yang diupload. Jadi saat user melihat tampilan awal dari web e-commerce tersebut, gambar tersebut memiliki ukuran yang sama yaitu kecil-kecil, namun setelah diklik detailnya, gambar yang tadi kecil berubah menjadi besar.

Berikut contoh salah satu project saya :

Dapat dilihat bahwa gambar memiliki ukuran yang kecil dan sama semua.

Dan apabila kita klik detailnya, gambar memiliki ukuran yang berbeda-beda.

Mudah saja, main di height dan width gambar saja ?

Kadang kalau kita main dengan cara tersebut, gambar yang aslinya kecil akan pecah bila ukuran height dan width-nya dipaksain.

Ya buat saja upload untuk gambar yang kecil tersebut ?

Agak ribet bin ruwet kali ya, karena admin mesti mengupload gambar 2 kali. Kalau mengupload sampai 100 gambar, jadi mesti 200 gambar yang mesti dikerjain.

Solusi yang paling praktis adalah teknik thumbnail. Maksudnya adalah, kita membuat gambar baru dengan ukuran dan nama baru dari gambar yang telah kita upload dengan bantuan PHP. Caranya bagaimana ? Langsung kita praktikan ya.

Awalnya biasa, kita copy dahulu latihan pada artikel sebelumnya. Beri nama folder baru dengan teknik thumbnail gambar. Lalu buat file baru dengan nama fungsi_thumbnail.php. Lalu ketikan code seperti dibawah ini :

<?php
function thumbnailImage($nama_file,$tipe_file) {
    $d = "image/";
	$image	 = $d . $nama_file;
	
	$gambar_asli = imagecreatefromjpeg($image);
	$lebar 		 = imageSX($gambar_asli);
	$tinggi 	 = imageSY($gambar_asli);
	
	$tmb_lebar   = 110;
	$tmb_tinggi  = 125;
	
	$image_tmb   = imagecreatetruecolor($tmb_lebar,$tmb_tinggi);
	imagecopyresampled($image_tmb,$gambar_asli,0,0,0,0,$tmb_lebar,$tmb_tinggi,$lebar,$tinggi);
	
	imagejpeg($image_tmb,$d . "kecil_" . $nama_file);
	
	
	imagedestroy($gambar_asli);
	imagedestroy($image_tmb);
	
	return $image_asli;
  }
?>

Penjelasan Kode

• $nama_file adalah nama file gambar yang hendak diupload
• $tipe_file adalah tipe file gambar yang hendak diupload

Keduanya didapat dari parameter masukan yang akan kita panggil fungsi ini. Tepatnya pada code :

$tipe_file = $_FILES[‘adiputra’][‘type’];
$nama_file = $_FILES[‘adiputra’][‘name’];

Pada file proses_upload.php

• $d adalah direktori penyimpanan gambar yang diupload. Pada kasus ini, penyimpanan gambar kita disimpan pada folder image/.

$image adalah nama file yang telah kita upload. Jadi code ini

$image = $d . $nama_file;

Berarti nilainya adalah ‘image/burung.jpg’ dimana burung.jpg adalah $nama_file.

Setelah kita mengetahui bahwa gambar yang telah kita upload sudah berhasil, lalu kita buat thumbnail gambar upload tersebut dengan perintah :

$gambar_asli = imagecreatefromjpeg($image);

Fungsi imagecreatefromjpeg() adalah fungsi untuk membuat file image dari file yang telah ada, dimana file tersebut bertipe jpeg.

Lalu setelah kita buat gambar baru dengan fungsi imagecreatefromjpeg(), kita buat ukuran lebar dan tinggi dari gambar yang diupload sebagai perbandingan nantinya dengan fungsi imageSX() untuk mengetahui lebar gambar dan fungsi imageSY() untuk mengetahui tinggi gambar.

$lebar = imageSX($gambar_asli);
$tinggi = imageSY($gambar_asli);

Bila sudah, kita definisikan ukuran gambar thumbnail baik lebar dan tingginya.

$tmb_lebar = 110;
$tmb_tinggi = 125;

Sekarang kita buat gambar thumbnail dari ukuran lebar gambar thumbnail dan tingginya lalu kita simpan pada variable $image_tmb.

$image_tmb = imagecreatetruecolor($tmb_lebar,$tmb_tinggi);

Setelah itu, saya kita copy gambar yang telah diupload ($gambar_asli) lalu kita paste-kan ke gambar thumbnail ($image_tmb) dengan fungsi imagecopyresampled()

imagecopyresampled($image_tmb,$gambar_asli,0,0,0,0,$tmb_lebar,$tmb_tinggi,$lebar,$tinggi);

fungsi imagecopysampled() adalah fungsi untuk mengcopy gambar satu ke gambar lainnya sesuai dengan tinggi dan lebar dari masing-masing gambar.

Sampai proses ini, kita telah membuat file gambar thumbnail, sekarang kita posisikan nama dan tempat penyimpanan gambar thumbnail ini dengan fungsi imagejpeg();

imagejpeg($image_tmb,$d . “kecil_” . $nama_file);

fungsi imagejpeg($image,$nama_image); adalah fungsi untuk mengeluarkan $image ke browser atau ke file. Pada kode diatas, kita mengeluarkan / output ke file dengan nama file disesuaikan dengan alamat penempatan file tersebut. Jadi nantinya pada folder image/ terdapat file dengan nama kecil_burung.jpg dimana file tersebut adalah file gambar thumbnail yang baru saja kita buat.

Lalu sekarang buka file proses_upload.php. Lalu ubah seperti pada kode dibawah ini :

<?php
  
  include("fungsi_koneksi.php");
  include("fungsi_validasi_tipe_image.php");
  include("fungsi_cek_dimensi.php");
  include("fungsi_thumbnail.php");
  
  
  
  $lokasi_file = $_FILES['adiputra']['tmp_name'];
  $tipe_file   = $_FILES['adiputra']['type'];
  $nama_file   = $_FILES['adiputra']['name'];
  $direktori   = "image/$nama_file";
  
  
  $hasil = cekTypeImageUpload($tipe_file); 
  
  if ($hasil == 1){
	echo "<script language='javascript'>alert('Maaf hanya menerima file gambar yang bertipe jpg')</script>";
	echo "<script language='javascript'>window.location = '../teknik thumbnail/'</script>";
	exit();
  }
  
  $cekMax = cekDimensiMax($lokasi_file);
  
  if ($cekMax == 1){
	echo "<script language='javascript'>alert('Maaf ukuran dimensi gambar maksimal berukuran 200x300')</script>";
	echo "<script language='javascript'>window.location = '../teknik thumbnail/'</script>";
	exit();
  }
  
  $cekMin = cekDimensiMin($lokasi_file);
  
  if ($cekMin == 1){
	echo "<script language='javascript'>alert('Maaf ukuran dimensi gambar minimal berukuran 100x125')</script>";
	echo "<script language='javascript'>window.location = '../teknik thumbnail/'</script>";
	exit();
  }
  
  if (!empty($lokasi_file)) {
	move_uploaded_file($lokasi_file,$direktori); 
  
  	// pemanggilan fungsi thumbnailImage
	thumbnailImage($nama_file, $tipe_file);
	
    $koneksi = koneksi_db();
    $sql = "insert into dtimage values (null,'$nama_file')";
    $aksi = mysql_query($sql,$koneksi);
    
	
	
	if (!$aksi) {
	echo "maaf gagal memasukan gambar";
  	}else{
		echo "gambar berhasil di upload<br>";
		echo "untuk melihatnya silakan klik <a href='view_image.php'>Link ini</a>";
  	}
	
	
  }else{
	echo "terjadi kesalahan";  
  }
  
  
  
?>

Yang penting adalah code include fungsi dan pemanggilan fungsi_thumbnailnya.

thumbnailImage($nama_file, $tipe_file);

Lalu untuk menampilkannya, sekarang buka file view_image.php. Berikut perubahan untuk pemanggilan gambar thumbnail.

<?php
  
  include("fungsi_koneksi.php");
  
  
  $koneksi = koneksi_db();
  $sql  = "select * from dtimage";
  $aksi = mysql_query($sql,$koneksi);
  
  echo "<table align='center' border='1'>
        <tr>
      	 <td>No</td>
      	 <td>Gambar Asli</td>
		 <td>Gambar Thumbnail</td>
     	</tr>";
		
  $no = 1;
  while($data = mysql_fetch_array($aksi)):?>
	 <tr>
      <td>
       <?php echo $no; ?>
      </td>
      <td>
       <center>
         <img src="image/<?php echo $data['nama_image']; ?>" border="0"/> 
       </center>
      </td>
      <td>
       <center>
         <img src="image/kecil_<?php echo $data['nama_image']; ?>" border="0"/>
       </center>
      </td>
     </tr>
  <?php 
  $no++;
  endwhile;
  ?>
  </table>
  <br /><center><a href="index.php">Upload lagi</a></center>

Silahkan dicoba sendiri ya,
Oiya, fungsi diatas hanya mendukung file yang bertipe jpeg, untuk tipe lainnya silakan ulik sendiri. Bila terdapat error kemungkinan library GD-nya belum support, silakan cek dengan perintah phpinfo().

Semua file bisa di comot disini

Semoga bermanfaat dan membantu, mohon maaf kalau ada kesalahan dalam menjelaskan.