Jump to content

Displaying images in a ratio


Mutley

Recommended Posts

Instead of fixing the images height/width, can I have it show by a ratio of the original size?

 

What I have is a large image and want to make a small "preview" of it (without creating another file), at the moment I just set it to 80x80pixels but the problem with this is if the large image isn't square it looks squashed. Is it possible to do it by a ratio?

Link to comment
https://forums.phpfreaks.com/topic/44162-displaying-images-in-a-ratio/
Share on other sites

It's really not a good idea to just change image dimensions since the full size image will have to load anyway while the visitor waits ... and waits.

 

Ratioing is simple. Use getimagesize() to determine the x and y dimensions, then a little basic math and you're done.

try that function:

<?php
function resizeimage($file){
	if(!file_exists($filename)) return false;
	$im_info	= getimagesize($filename); //unresized image
	$im_width	= $im_info[0];
	$im_height	= $im_info[1];
	$im_flag	= $im_info[2];

	if ($im_flag == 1) $image = imagecreatefromgif($filename); //unresized image
	elseif ($im_flag == 2) $image = imagecreatefromjpeg($filename);
	elseif ($im_flag == 3) $image = imagecreatefrompng($filename);
	else return false;

	//max height: 100px; max width: 100px
	if($im_width >= $im_height) {
		$im_divice	= $im_width / 100;
	}else {
		$im_divice	= $im_height / 100;
	}
	$thumb_width	= $im_width / $im_divice;
	$thumb_height	= $im_height / $im_divice;

	//create empty image
	$thumb	= imagecreatetruecolor($thumb_width, $thumb_height);
	//resize image
	imagecopyresampled($thumb, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $im_width, $im_height);

	header('Content-Type: image/jpeg', true);
	imagejpeg($thumb)

	imagedestroy($thumb); //destroy temporary image-resource
	imagedestroy($image); //destroy temporary image-resource
}
?>

I fixed it, I put the function at the very top of my file.

 

However no image is displaying from using it ? What exactly do I need to do ?

 

I have:

<?php resizeimage("./images/products/$id.jpg");?>

 

$id is the file name, it doesn't show any image or code in the HTML though. :(

Do you get any php errors displayed? If so, what?

 

Are you certain that the image exists? Are you certain that the path to the image is appropriate for the function?

 

Add a line like:

 

<?php
echo "<img src='./images/products/". $id. ".jpg'>";
?>

 

What do you see? (I might believe ../images/products/ as the path)

The image shows when I do the echo but the function still doesn't do anything, this is what I'm trying:

 

<?php
function resizeimage($file){
	if(!file_exists($filename)) return false;
	$im_info	= getimagesize($filename); //unresized image
	$im_width	= $im_info[0];
	$im_height	= $im_info[1];
	$im_flag	= $im_info[2];

	if ($im_flag == 1) $image = imagecreatefromgif($filename); //unresized image
	elseif ($im_flag == 2) $image = imagecreatefromjpeg($filename);
	elseif ($im_flag == 3) $image = imagecreatefrompng($filename);
	else return false;

	//max height: 100px; max width: 100px
	if($im_width >= $im_height) {
		$im_divice	= $im_width / 100;
	}else {
		$im_divice	= $im_height / 100;
	}
	$thumb_width	= $im_width / $im_divice;
	$thumb_height	= $im_height / $im_divice;

	//create empty image
	$thumb	= imagecreatetruecolor($thumb_width, $thumb_height);
	//resize image
	imagecopyresampled($thumb, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $im_width, $im_height);

	header('Content-Type: image/jpeg', true);
	imagejpeg($thumb);

	imagedestroy($thumb); //destroy temporary image-resource
	imagedestroy($image); //destroy temporary image-resource
}
$id = '44';

echo "<img src='./images/products/". $id. ".jpg'>";

resizeimage(".images/products/". $id ."");
resizeimage(".images/products/". $id .".jpg");
?>

Sorry there are some mistakes of mine:

<?php
function resizeimage($filename){ //here was my mistake
	if(!file_exists($filename)) return false;
	$im_info	= getimagesize($filename); //unresized image
	$im_width	= $im_info[0];
	$im_height	= $im_info[1];
	$im_flag	= $im_info[2];

	if ($im_flag == 1) $image = imagecreatefromgif($filename); //unresized image
	elseif ($im_flag == 2) $image = imagecreatefromjpeg($filename);
	elseif ($im_flag == 3) $image = imagecreatefrompng($filename);
	else return false;

	//max height: 100px; max width: 100px
	if($im_width >= $im_height) {
		$im_divice	= $im_width / 100;
	}else {
		$im_divice	= $im_height / 100;
	}
	$thumb_width	= $im_width / $im_divice;
	$thumb_height	= $im_height / $im_divice;

	//create empty image
	$thumb	= imagecreatetruecolor($thumb_width, $thumb_height);
	//resize image
	imagecopyresampled($thumb, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $im_width, $im_height);

	header('Content-Type: image/jpeg', true);
	imagejpeg($thumb, NULL, 100); //thumbnail with the best quality

	imagedestroy($thumb); //destroy temporary image-resource
	imagedestroy($image); //destroy temporary image-resource
}
$id = '44';

//no echos please
//echo "<img src='./images/products/". $id. ".jpg'>";

//also you don't use that 
//resizeimage(".images/products/". $id ."");
//the filename was wrong... it has to be ./...
resizeimage("./images/products/". $id .".jpg");
?>

 

If your php-script is in

/Users/ and also your picture is in /Users/ you say ./image.jpg

the only . stands for the same directory as the directory of your php-script.

if you say ../image.jpg it tries to read the file image.jpg of /

Do you understand?

And if you write .image.jpg then the file is called .image.jpg

I use getimagesize() to get the original width height of the image, and by using the while(), divide both width and height at the same time until it goes below the max, like while($image[0] > 100 or $image[1] > 100) {... divide by 2 or something}

this keeps the ratio of the width to height meanwhile, you also have full and easy control over the image size.

 

Ted

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.