Photo Gallery - Aspect Ratio

Hi Folk,

Using PHP, how do I create a Photo Gallery displays the images on the page whilst keeping the aspect ratio in tact?

 

You need to use GD Library for checking images width and height then you can easily scale them.

list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");

PHP:

Note. This may not work for you if you do not have GDLibrary enabled. More info here.

 

I use the following function...

<?
function ResizeImage($imageNamePath, $target) { 
//takes the larger size of the width and height and applies the  
//formula accordingly...this is so this script will work  
//dynamically with any size image

$mysock = getimagesize("$imageNamePath");

$width = $mysock[0];
$height = $mysock[1];

If ($width > $target OR $height > $target)
{

if ($width > $height) { 
$percentage = ($target / $width); 
} else { 
$percentage = ($target / $height); 
} 

//gets the new value and applies the percentage, then rounds the value 
$width = round($width * $percentage); 
$height = round($height * $percentage); 

}

//returns the new sizes in html image tag format...this is so you 
//can plug this function inside an image tag and just get the 

$imageSize['width'] = $width;
$imageSize['height'] = $height;

return $imageSize; 

} 
?>

PHP:

with the following code to resize images...

$sizeAry = ResizeImage("$pathtopicture", 500);
echo "<img src='" . $pathtopicture . "' width='" . $sizeAry['width'] . "' height='" . $sizeAry['height'] . "'>";

PHP:

The 500 is used to tell the function what the maximum height or width is before it scales it down.

Hope this helps.

 

this is the best solution if GDLibrary enabled.

<img src="img/flag.jpg"<?php if($width > 500) { ?> width="500"<?php } ?>>

yhis will be the easyest way.

 

all of this distorting the image in the html itself is going to produce a very poor quality image. use getimagesize() to check the file dimensions itself and if it is larger than you want, scaled it down until you get it down to an appropriate size. don't resize it with html though. use gd to scale on the fly.

 

here, i wrote this for you as a working example. www.ansimation.net/tmp/dp_shit/thumb_on_fly/

you can download the source here www.ansimation.net/tmp/dp_shit/thumb_on_fly/thumb_on_fly.zip

or copy/paste the code

thumb.php

<?php
function thumb_on_fly($i,$h=null,$w=null,$max=100)
{
	if(file_exists($i))
	{
		if( isset($h) && isset($w) )  // check for user specified h/w -- this won't keep aspect ratios unless you figure them out manually and enter them as h/w
		{
			$s = getimagesize($i);
			$sx = $s[0];
			$sy = $s[1];
			$source = imagecreatefromjpeg($i);
			$target = imagecreatetruecolor($w, $h);
			$copy = imagecopyresampled($target, $source, 0, 0, 0, 0, $w, $h, $sx, $sy);
			$image = imagejpeg($target);
			imagedestroy($target);
			return $image;
		}
		else // scale automatically until < $max while keeping aspect ratios
		{
			$s = getimagesize($i);
			$sx = $s[0];
			$sy = $s[1];

			if($sx > $sy/2)
			{
				$nw=$max;
				$nh=($sy/$sx)*$nw;
			}
			else
			{
				$nh=$max*2;
				$nw=($sx/$sy)*$nh;
			}

			$source = imagecreatefromjpeg($i);
			$target = imagecreatetruecolor($nw, $nh);
			$copy = imagecopyresampled($target, $source, 0, 0, 0, 0, $nw, $nh, $sx, $sy);
			$image = imagejpeg($target);
			imagedestroy($target);
			return $image;
		}
	}
}

if ( isset($_GET['i']) && !isset($_GET['h']) && !isset($_GET['w']) && !isset($_GET['max']) )
{
	header("content-type: image/jpg");
	thumb_on_fly($_GET['i']);
}
elseif ( isset($_GET['i']) && isset($_GET['h']) && isset($_GET['w']) && !isset($_GET['max']) )
{
	header("content-type: image/jpg");
	thumb_on_fly($_GET['i'],$_GET['h'],$_GET['w']);
}
elseif ( isset($_GET['i']) && !isset($_GET['h']) && !isset($_GET['w']) && isset($_GET['max']) )
{
	header("content-type: image/jpg");
	thumb_on_fly($_GET['i'],null,null,$_GET['max']);
}
?>

PHP:

index.php - example

set h/w with no aspect ratio<br />
<img src="thumb.php?i=6936.jpg&h=100&w=100" alt="" /><br /><br />

scale automatically until reaching preset max width while keeping aspect ratio<br />
<img src="thumb.php?i=6936.jpg" alt="" /><br /><br />

scale automatically until reaching user defined max width while keeping aspect ratio<br />
<img src="thumb.php?i=6936.jpg&max=300" alt="" /><br /><br />

PHP:

do it the right way.