Jump to content
bigsilk

Resizing Images Relative To Their Original Size...

Recommended Posts

I'm putting together a page that uses thumbnails of paintings. The paintings are different sizes, and I want the thumbnails to be relative in size to each other and the original (thus, if a painting is 5x10, I want the thumb to be .05x.10, but if another painting is 10x20, I want the thumb to .10x.20) As it happens, all the thumbs are ending up at the same height.Page:Visit the pageAnd here's the css I'm using:

body{}div.wall{width: 746px;height: 450px;text-align: center;vertical-align;center}img.gallery{width:auto;height:25%;margin:10px;}

Share this post


Link to post
Share on other sites

It would be nice if the page was actually showcasing the problem, as it seems fine to me.Either way, you should have different copies of the images for each size, and display them accordingly.

Share this post


Link to post
Share on other sites
It would be nice if the page was actually showcasing the problem, as it seems fine to me.Either way, you should have different copies of the images for each size, and display them accordingly.
The problem is that each of the images are different sizes. The painting of the woman's back is twice as tall as the guitar painting, but it appears to be the same height. The images in the directory are different sizes, but the thumbs appear the same height. This is what I'm trying to overcome, having the the thumbs represent a scale of the original.

Share this post


Link to post
Share on other sites

What is the PHP code you're currently using to generate the thumbnails? CSS isn't even close to the prolem.

Share this post


Link to post
Share on other sites

I put it here by accident. I was doing a search on a possible solution and found a search hit in .php, then hit post new topic when I couldn't find what I was looking for.Sorry.I'll contact an admin to have it moved.Nonetheless, I still have the problem.

Share this post


Link to post
Share on other sites

i've just put this together, which sorts out the resize and positioning issue<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function resizeme(){imgtotal = document.images.length;requiredimgsize = 50; //percentagefor(i=0;i<imgtotal;i++){currentHeight = document.images.height;currentWidth = document.images.width;newHeight = (currentHeight/100)*requiredimgsize;newWidth = (currentWidth/100)*requiredimgsize;document.images.style.width=parseInt(newWidth)+"px";document.images.style.height=parseInt(newHeight)+"px";document.images.style.marginTop="-"+((parseInt(newHeight))/2)+"px";}}window.onload=resizeme;/*--*//*]]>*/</script> <style type="text/css">.wall img{ border: 1px solid #00ff00; top: 50%; position: relative; padding: 0 10px;}.wall a {display: block; float:left; height: 100%; border: 1px dashed #0000ff; }</style></head><body><div class="wall" style="border: 1px dashed red; background-color:#FF9933; height: 100px; overflow:hidden;"><a href="#"><img src="one.png" /></a><a href="#"><img src="two.png" /></a><a href="#"><img src="three.png" /></a><a href="#"><img src="four.jpg" /></a></div></body></html>

Edited by dsonesuk

Share this post


Link to post
Share on other sites

That's going to resize every single image on the page, including the interface graphics (e.g. the couple sitting on the bench). If the interface graphics are converted to background images in CSS the Javascript should work (i.e., if the only images on the page are the paintings).It looks like all of your pages are just static HTML pages. If you aren't using PHP to upload the images, if you're just building the pages with the images there, the best thing to do is to resize the images yourself and create thumbnails. That way people don't have to download the full images only to have them resized smaller, you can save yourself some bandwidth and save transfer time and give them the thumbnails first which can link to the larger images. Or, you can also use PHP to set up an upload form where it can resize the images automatically and create thumbnails when you upload a new image. Or, you can have a PHP script that will resize each image dynamically when they load up the page. That may be a bit slow (it may take .5 seconds per image), but it may give you the most flexibility.

Share this post


Link to post
Share on other sites

Oh my Gosh you are right! the background colours, solid borders, not to mention dashed borders, and there's totally the wrong number of images, wrong background(well there's no background actually) all would make this code unusable. if only there was a way to remove these, and restrict the number of images to be resized and reposition? looks like a job for Mr Picky! enter YOU.

Share this post


Link to post
Share on other sites

You don't take criticism very well, do you? I'm simply trying to cover the possible options, you can appreciate that right? Javascript is good for a lot of things, but it's not always the best tool for the job. But, like they say, if all you have is a hammer, everything looks like a nail.This is the solution I was talking about. This is a PHP script that will resize the image for you, I've modified my image resize function to accept a percentage argument and a display argument that controls whether it saves as a new file or just outputs to the browser:

<?phpif (isset($_GET['image']))  $image = trim($_GET['image']);if ($image == "")  exit("no image");$w = isset($_GET['w']) ? $_GET['w'] : 0;$h = isset($_GET['h']) ? $_GET['h'] : 0;$pct = isset($_GET['pct']) ? $_GET['pct'] : 0;resize_image(array(  'source' => $image,  'w' => $w,  'h' => $h,  'pct' => $pct,  'disp' => true));function resize_image($opts){  $src = isset($opts['source']) ? $opts['source'] : '';  $dest = isset($opts['dest']) ? $opts['dest'] : '';  $w = isset($opts['w']) ? intval($opts['w']) : 0;  $h = isset($opts['h']) ? intval($opts['h']) : 0;  $pct = isset($opts['pct']) ? floatval($opts['pct']) : 0;  $disp = isset($opts['disp']) ? $opts['disp'] : false;  if ($src == '')  {	echo 'no source';	return;  }  if ($w == 0 && $h == 0 && $pct == 0)  {	echo 'no size';	return;  }  if ($dest == '')	$dest = $src; // resize in place  // open the image  $ext = strtolower(array_pop(explode('.', $src)));  switch ($ext)  {	case 'jpg':	case 'jpeg':	  $i = imagecreatefromjpeg($src);	break;	case 'gif':	  $i = imagecreatefromgif($src);	break;	case 'png':	  $i = imagecreatefrompng($src);	break;	default:	  echo 'bad extension';	  return;  }  $new_w = imagesx($i);  $new_h = imagesy($i);  if ($pct == 0)  {	if (($w != 0 && $new_w < $w && $h == 0) ||		($w == 0 && $h != 0 && $new_h < $h) ||		($w != 0 && $new_w < $w && $h != 0 && $new_h < $h))	{	  // image is small enough	  if ($dest != $src)	  {		if (!$disp)		{		  copy($src, $dest);		  return;		}	  }	}	else	{	  // determine new size	  if ($w != 0 && $new_w > $w)	  {		$new_h = ($w / $new_w) * $new_h;		$new_w = $w;	  }	  if ($h != 0 && $new_h > $h)	  {		$new_w = ($h / $new_h) * $new_w;		$new_h = $h;	  }	}  }  else  {	$new_w *= $pct;	$new_h *= $pct;  }  // resize  $new = imagecreatetruecolor($new_w, $new_h);  imagecopyresampled($new, $i, 0, 0, 0, 0, $new_w, $new_h, imagesx($i), imagesy($i));  imagedestroy($i);  if (!$disp)  {	// save the image	switch ($ext)	{	  case 'jpg':	  case 'jpeg':		imagejpeg($new, $dest);	  break;	  case 'gif':		imagegif($new, $dest);	  break;	  case 'png':		imagepng($new, $dest);	  break;	}  }  else  {	// output to browser	switch ($ext)	{	  case 'jpg':	  case 'jpeg':		header('Content-type: image/jpeg');		imagejpeg($new);	  break;	  case 'gif':		header('Content-type: image/gif');		imagegif($new);	  break;	  case 'png':		header('Content-type: image/png');		imagepng($new);	  break;	}  }  imagedestroy($new);}?>

If you save that file as resize_img.php, you can use this code to show "guitar.jpg" at 25% of original size:<img src="resize_image.php?image=guitar.jpg&pct=.25">or at 320x240:<img src="resize_image.php?image=guitar.jpg&w=320&h=240">or at a height of 100px, and resize the width to match:<img src="resize_image.php?image=guitar.jpg&h=100">You can call that picky if you want, I prefer to call it the best tool for the job.

Edited by justsomeguy

Share this post


Link to post
Share on other sites

Hi there

I have a website ( www.beautifulcastril.com ) which has approx 1,400 images of the area.  I have just included a 'view images' section which displays thumbnails whch you can then click on to see the full sized image.  The images from which I am producing the thumbnails are 512 x 384px and the large images are 1600 x 1200px.  As I am displaying the images at a width of 150px, I would like to use php to reduce the 512px images to 150px before download to reduce server load and screenfll time.  I have looked through the code from justsomeguy but it seems awfully complex (to a simple soul like me!).  Is there no php instruction such as 'resize('myimage.jpg',150) ?? I don't need to test for the existence of a file as I have just found it with glob().

 

I have trawled through the imagick manual but just get more and more baffled, apart from the fact that it seems that my server (1and1.es) doesn't support imagick.  

 

I can always trawl through 1,400 images and load them individually into MS Paint, resize them, save them on the PC and then upload them via FileZilla but it will take hours and is not very elegant.

 

All advice will be much appreciated.

 

Regards from a very sunny Spain.

Max

all_images.php

Share this post


Link to post
Share on other sites
6 hours ago, Max Castril said:

I have trawled through the imagick manual but just get more and more baffled, apart from the fact that it seems that my server (1and1.es) doesn't support imagick.

Really? maybe is a Spain hosting problem, because they show how to install here https://help.1and1.com/hosting-c37630/webspace-and-access-c85098/ssh-c37775/install-imagemagick-via-ssh-a649013.html

 

  • Like 1

Share this post


Link to post
Share on other sites
7 hours ago, Max Castril said:

I can always trawl through 1,400 images and load them individually into MS Paint, resize them, save them on the PC and then upload them via FileZilla but it will take hours and is not very elegant.

Well it would using MS Paint, but using FastStone Photo Resizer, it will do multiple selected images, to a specific size proportionately, rename adding custom suffix like '_thumb', and save to alternative format, to a destination you chose.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks, dsonesuk.  I will work on your advice. 

 

The FastStone looks really good - I will probably just use that in future instead of MS Paint.  I think the imagick is a bit beyond my powers of understanding, to be honest.

 

Thanks

Max

 

Share this post


Link to post
Share on other sites

You would only use ImageMagik for formats that php imagecreate functions can't process, like tiff images to jpg/png that was brought up in recent topic, for jpg/png/gif images, php should be able to resize/rename/relocate without the need for imagemagick.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×