Membuat Thumbnail Post Pada Artikel Dengan PHP

Membuat Thumbnail Post Pada Artikel Dengan PHP


Tutorial Premium Mahir Web Development Membangun 5 (jenis) Project Website + Mahir Membuat Aplikasi Android (4 Project + Upload Playstore)

Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)


Sudah lama sekali di ilmuwebsite.com tidak dibahas seputar belajar php maupun tutorial belajar php. Oleh karenanya kita akan coba kembali menyuguhi perihal tutorial php ? Bagaimana? Setuju tidak? Kenapa nggak setuju? :P

Dalam tutorial php kali ini kita akan membahas fitur yang biasanya memang lumrah terdapat pada sebuah website. Yakni thumbnail post, atau thumbnail image. Seperti apa sih contohnya thumbnail post itu? Kurang lebih bentuknya adalah seperti ini.

thumbnail post

Thumbnail itu kurang lebih merupakan gambar-gambar yang mewakili setiap postnya. Dari mana kok bisa begitu? Biasanya thumbnail post ini diambil dari bagian tubuh artikel itu sendiri, misalkan mengambil gambar pertama yang bercokol dalam sebuah artikel. Sebagai contohnya artikel milik saya yang "Belajar Desain Grafis : Membuat Logo Apple" apabila di lihat di bagian depan ilmuwebsite, maka thumbnail yang muncul itu merupakan gambar pertama dari artikel tersebut, silahkan klik link di bawah ini untuk membuktikannya.

http://www.ilmuwebsite.com/belajar-desain-grafis-membuat-logo-apple

Baiklah, beberapa langkah dalam membuat thumbnail post dengan PHP tanpa menggunakan plugin tim-thumb adalah sebagai berikut.

1. Mendapatkan URL gambar pertama dari sebuah artikel (Anda nantinya bisa mengimplementasikannya pada wordpress, joomla, maupun cms buatan Anda sendiri)

2. Meresize gambar yang didapatkan menggunakan perantara URL dari gambar yang ditangkap pada poin 1.

Nah bagaimana melakukannya?

Berikut adalah source code lengkapnya :

<?php
	include "resize.php";
	
	/* artikelnya sebelah sini, judul, konten, dan intro konten */
	$post_title = "Belajar Desain Grafis : Membuat Logo Apple";
	$post_content = '<p><img src="coreldraw-tutorial.jpg" />Baiklah kali ini kita akan membahas <strong>belajar desain grafis</strong> dasar, atau <a href="#">belajar desain grafis</a> untuk pemula. Banyak sekali <strong>tutorial coreldraw</strong> – <a href="#">tutorial coreldraw</a> yang tersebar di dunia maya, yang mana Anda bisa menerawangnya lewat mbah google. Perihal tutorial corel draw didunia maya banyak sekali namun sayangnya penyajiannya masih kurang terstruktur, oleh karena itu kami akan mencoba melakukan pembahasan belajar desain grafis dasar menggunakan corel draw secara lebih terstruktur. Di awali dengan bagian yang pertama ini. Yakni Belajar Desain Grafis Dasar, Membuat Logo Apple.</p>';
	$post_intro = substr(strip_tags($post_content),0,500).'[...]';
	
	/* ambil gambar pertama */
	$get_image_tmb = catch_that_image($post_content);
	
	/* proses resize */
	$image = resize_image($get_image_tmb,300,200);
	
	/* function resize image */
	function resize_image($image=NULL,$w=100,$h=100){
		$resimage = NULL;	
		if($image != NULL){
			/* mengambil jenis ekstensi gambarnya, misalnya .jpg */
			$get_extension = strrpos($image,'.');
			$ext = substr($image, $get_extension);
			
			/* ganti namanya dari image asli misal dari coreldraw.jpg menjadi coreldraw_300x200.jpg */
			$replace_name = str_replace($ext, '_'.$w.'x'.$h.$ext, $image);
			
			/* resize image */
			$resize = new ResizeImage($image);
			$resize->resizeTo($w, $h);
			$resize->saveImage($replace_name);	
		}
		
		return $replace_name;
	}
	
	function catch_that_image($post) {
		$first_img = NULL;
		
		/*  */
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post, $matches);
		$first_img = $matches [1][0];
		return $first_img;
	}
?>

<html>
	<head>
		<title></title>
		<style type="text/css">
			body{font-size:12px;font-family:Arial;background:#fafafa;}
			h1,p{margin:0;padding:0;}
			h1{line-height:20px;margin:0 0 15px 0;}
			p{line-height:18px;	}
			#wrapthumb{width:50%;height:auto;padding:40px;margin:15% auto;border:1px solid #dfdfdf;background:#fff;box-shadow:0 0 15px #eee;}
			#wrapthumb img{width:300px;height:200px;float:left;border:1px solid #efefef;padding:5px;margin:0 20px 20px 0;}
		</style>
	</head>
	<body>
		<div id="wrapthumb">
			<img src="<?php echo $image;?>" /><h1><?php echo $post_title;?></h1>
			<p><?php echo $post_intro;?></p>
		</div>
	</body>
</html>

 

Dan selanjutnya adalah library untuk resizenya yakni resize.php

<?php
/**
 * Resize image class will allow you to resize an image
 *
 * Can resize to exact size
 * Max width size while keep aspect ratio
 * Max height size while keep aspect ratio
 * Automatic while keep aspect ratio
 */
class ResizeImage
{
	private $ext;
	private $image;
	private $newImage;
	private $origWidth;
	private $origHeight;
	private $resizeWidth;
	private $resizeHeight;

	/**
	 * Class constructor requires to send through the image filename
	 *
	 * @param string $filename - Filename of the image you want to resize
	 */
	public function __construct( $filename )
	{
		if(file_exists($filename))
		{
			$this->setImage( $filename );
		} else {
			throw new Exception('Image ' . $filename . ' can not be found, try another image.');
		}
	}

	/**
	 * Set the image variable by using image create
	 *
	 * @param string $filename - The image filename
	 */
	private function setImage( $filename )
	{
		$size = getimagesize($filename);
		$this->ext = $size['mime'];

		switch($this->ext)
	    {
	    	// Image is a JPG
	        case 'image/jpg':
	        case 'image/jpeg':
	        	// create a jpeg extension
	            $this->image = imagecreatefromjpeg($filename);
	            break;

	        // Image is a GIF
	        case 'image/gif':
	            $this->image = @imagecreatefromgif($filename);
	            break;

	        // Image is a PNG
	        case 'image/png':
	            $this->image = @imagecreatefrompng($filename);
	            break;

	        // Mime type not found
	        default:
	            throw new Exception("File is not an image, please use another file type.", 1);
	    }

	    $this->origWidth = imagesx($this->image);
	    $this->origHeight = imagesy($this->image);
	}

	/**
	 * Save the image as the image type the original image was
	 *
	 * @param  String[type] $savePath     - The path to store the new image
	 * @param  string $imageQuality 	  - The qulaity level of image to create
	 *
	 * @return Saves the image
	 */
	public function saveImage($savePath, $imageQuality="100", $download = false)
	{
	    switch($this->ext)
	    {
	        case 'image/jpg':
	        case 'image/jpeg':
	        	// Check PHP supports this file type
	            if (imagetypes() & IMG_JPG) {
	                imagejpeg($this->newImage, $savePath, $imageQuality);
	            }
	            break;

	        case 'image/gif':
	        	// Check PHP supports this file type
	            if (imagetypes() & IMG_GIF) {
	                imagegif($this->newImage, $savePath);
	            }
	            break;

	        case 'image/png':
	            $invertScaleQuality = 9 - round(($imageQuality/100) * 9);

	            // Check PHP supports this file type
	            if (imagetypes() & IMG_PNG) {
	                imagepng($this->newImage, $savePath, $invertScaleQuality);
	            }
	            break;
	    }

	    if($download)
	    {
	    	header('Content-Description: File Transfer');
			header("Content-type: application/octet-stream");
			header("Content-disposition: attachment; filename= ".$savePath."");
			readfile($savePath);
	    }

	    imagedestroy($this->newImage);
	}

	/**
	 * Resize the image to these set dimensions
	 *
	 * @param  int $width        	- Max width of the image
	 * @param  int $height       	- Max height of the image
	 * @param  string $resizeOption - Scale option for the image
	 *
	 * @return Save new image
	 */
	public function resizeTo( $width, $height, $resizeOption = 'default' )
	{
		switch(strtolower($resizeOption))
		{
			case 'exact':
				$this->resizeWidth = $width;
				$this->resizeHeight = $height;
			break;

			case 'maxwidth':
				$this->resizeWidth  = $width;
				$this->resizeHeight = $this->resizeHeightByWidth($width);
			break;

			case 'maxheight':
				$this->resizeWidth  = $this->resizeWidthByHeight($height);
				$this->resizeHeight = $height;
			break;

			default:
				if($this->origWidth > $width || $this->origHeight > $height)
				{
					if ( $this->origWidth > $this->origHeight ) {
				    	 $this->resizeHeight = $this->resizeHeightByWidth($width);
			  			 $this->resizeWidth  = $width;
					} else if( $this->origWidth < $this->origHeight ) {
						$this->resizeWidth  = $this->resizeWidthByHeight($height);
						$this->resizeHeight = $height;
					}
				} else {
		            $this->resizeWidth = $width;
		            $this->resizeHeight = $height;
		        }
			break;
		}

		$this->newImage = imagecreatetruecolor($this->resizeWidth, $this->resizeHeight);
    	imagecopyresampled($this->newImage, $this->image, 0, 0, 0, 0, $this->resizeWidth, $this->resizeHeight, $this->origWidth, $this->origHeight);
	}

	/**
	 * Get the resized height from the width keeping the aspect ratio
	 *
	 * @param  int $width - Max image width
	 *
	 * @return Height keeping aspect ratio
	 */
	private function resizeHeightByWidth($width)
	{
		return floor(($this->origHeight/$this->origWidth)*$width);
	}

	/**
	 * Get the resized width from the height keeping the aspect ratio
	 *
	 * @param  int $height - Max image height
	 *
	 * @return Width keeping aspect ratio
	 */
	private function resizeWidthByHeight($height)
	{
		return floor(($this->origWidth/$this->origHeight)*$height);
	}
}
?>

Untuk melihat demo nya silahkan klik link di bawah ini :

Lihat Demo

Sekian tutorial belajar php kali ini, Anda bisa mengkostumisasi kode tersebut sesuai dengan kebutuhan Anda. Selamat bereksperimen.

Artikel Terkait :