Generate Thumbnail on the Fly with PHP

In a previous article I already showed you how to generate square thumbnails with PHP. Now I show you how to keep the original ratio of the image and how to control the alignment of the square image. Why align images? Some pictures just does not look well as a centered square thumbnail, to make sure your thumnails look perfect you can set alignment. In the demo you will see two examples what helps you to understand this more.

HTML markup

Basic usage, creates square thumbnail form given image. Replace IMAGESOURCE with your image source.

<img src="thumb.php?img=IMAGESOURCE" />

Advanced usage, replace IMAGETYPE with square, large or small to create different thumbnail. Edit IMAGEALIGN to align landscape images left, rigth, portrait images top, bottom.

<img src="thumb.php?img=IMAGESOURCE&type=IMAGETYPE&align=IMAGEALIGN" />

PHP

Copy this script,  change thumb width as you like and save it as thumb.php.

<?php

// thumb width
$square = 150;
$large = 200;
$small = 100;

////////////////////////////////////////////////////////////////////////////////// square
if( isset($_GET[img]) &&  ( $_GET[type] == "square" || $_GET[type] == "" ) ){

// thumb size
$thumb_width = $square;
$thumb_height = $square;

// align
$align = $_GET[align];

// image source
$imgSrc = $_GET[img];
$imgExt = substr($imgSrc,-3);

// image extension
if($imgExt == "jpg"){ $myImage = imagecreatefromjpeg($imgSrc); }
if($imgExt == "gif"){ $myImage = imagecreatefromgif($imgSrc); }
if($imgExt == "png"){ $myImage = imagecreatefrompng($imgSrc); }

// getting the image dimensions  
list($width_orig, $height_orig) = getimagesize($imgSrc);   

// ratio
$ratio_orig = $width_orig/$height_orig;

// landscape or portrait?
if ($thumb_width/$thumb_height > $ratio_orig) {
   $new_height = $thumb_width/$ratio_orig;
   $new_width = $thumb_width;
} else {
   $new_width = $thumb_height*$ratio_orig;
   $new_height = $thumb_height;
}

// middle
$x_mid = $new_width/2;
$y_mid = $new_height/2;

// create new image
$process = imagecreatetruecolor(round($new_width), round($new_height)); 
imagecopyresampled($process, $myImage, 0, 0, 0, 0, $new_width, $new_height, $width_orig, $height_orig);
$thumb = imagecreatetruecolor($thumb_width, $thumb_height); 

// alignment
if($align == ""){
imagecopyresampled($thumb, $process, 0, 0, ($x_mid-($thumb_width/2)), ($y_mid-($thumb_height/2)), $thumb_width, $thumb_height, $thumb_width, $thumb_height);
}
if($align == "top"){
imagecopyresampled($thumb, $process, 0, 0, ($x_mid-($thumb_width/2)), 0, $thumb_width, $thumb_height, $thumb_width, $thumb_height);
}
if($align == "bottom"){
imagecopyresampled($thumb, $process, 0, 0, ($x_mid-($thumb_width/2)), ($new_height-$thumb_height), $thumb_width, $thumb_height, $thumb_width, $thumb_height);
}
if($align == "left"){
imagecopyresampled($thumb, $process, 0, 0, 0, ($y_mid-($thumb_height/2)), $thumb_width, $thumb_height, $thumb_width, $thumb_height);
}
if($align == "right"){
imagecopyresampled($thumb, $process, 0, 0, ($new_width-$thumb_width), ($y_mid-($thumb_height/2)), $thumb_width, $thumb_height, $thumb_width, $thumb_height);
}

imagedestroy($process);
imagedestroy($myImage);	

if($imgExt == "jpg"){ imagejpeg($thumb, null, 100); }
if($imgExt == "gif"){ imagegif($thumb); }
if($imgExt == "png"){ imagepng($thumb, null, 9); }

}

////////////////////////////////////////////////////////////////////////////////// normal
if( isset($_GET[img]) && ( $_GET[type] == "large" || $_GET[type] == "small" )  ){

if( $_GET[type] == "large" ){ $thumb_width = $large; }
if( $_GET[type] == "small" ){ $thumb_width = $small; }

// image source
$imgSrc = $_GET[img];
$imgExt = substr($imgSrc,-3);

// image extension
if($imgExt == "jpg"){ $myImage = imagecreatefromjpeg($imgSrc); }
if($imgExt == "gif"){ $myImage = imagecreatefromgif($imgSrc); }
if($imgExt == "png"){ $myImage = imagecreatefrompng($imgSrc); }

//getting the image dimensions  
list($width_orig, $height_orig) = getimagesize($imgSrc);   

// ratio
$ratio_orig = $width_orig/$height_orig;
$thumb_height = $thumb_width/$ratio_orig;

// new dimensions
$new_width = $thumb_width;
$new_height = $thumb_height;

// middle
$x_mid = $new_width/2;
$y_mid = $new_height/2;

// create new image
$process = imagecreatetruecolor(round($new_width), round($new_height));

imagecopyresampled($process, $myImage, 0, 0, 0, 0, $new_width, $new_height, $width_orig, $height_orig);
$thumb = imagecreatetruecolor($thumb_width, $thumb_height); 
imagecopyresampled($thumb, $process, 0, 0, ($x_mid-($thumb_width/2)), ($y_mid-($thumb_height/2)), $thumb_width, $thumb_height, $thumb_width, $thumb_height);

if($imgExt == "jpg"){ imagejpeg($thumb, null, 100); }
if($imgExt == "gif"){ imagegif($thumb); }
if($imgExt == "png"){ imagepng($thumb, null, 9); }

}
?>

CSS

And finally add some CSS styling. Do not forget to add class="thumb" to your images.

<style type="text/css">
.thumb{
	border:1px solid #CCC;
	padding:5px;
	background:#FFF;
	box-shadow:0px 0px 5px #DDD;
	-webkit-box-shadow:0px 0px 5px #DDD;
	-moz-box-shadow:0px 0px 5px #DDD;	
}
</style>

 

Demo »


Go Daddy


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

Would you like some cool stock photos for free? Check out this article, and try this website.


2 comments

Michael Wassil2015-02-06 10:22

Nice script. I wonder if it\'s possible to set a \'max height and width\'. I have some galleries with mixed landscape and portrait oriented photos. The portrait oriented photos cause the rows of thumbnails to spread rather much.Something like:$scale = min(MAX_WIDTH/$width, MAX_HEIGHT/$height);if ($scale < 1) {$new_width = floor($scale*$width);$new_height = floor($scale*$height);}Thanks.

IƱaki Soria2014-04-25 12:03

Here are some changes in lines 18 to 23 to accept filenames in mayus and also JPEG pictures$imgExt = strtolower(substr($imgSrc,-3));// image extensionif($imgExt == "jpg"||$imgExt == "peg"){ $myImage = imagecreatefromjpeg($imgSrc); }

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the flower *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top