Resizing an image before it is used

[cliftonbazaar]

I have the following code (nothing special) -

echo "<TABLE background=images/buildings/".$building_array[$building]."/".$size.".gif >";

Which works fine - BUT, I want the background image to be 40*40 pixels (height=40 width=40 doesn't work) because it is simply displaying a thumbnail of an image that I already have at 160*160.

 

My only option at the moment is to resize the original image and then save another copy, but this would give me two copies of every image (a big one and a small one), I also have the problem that if I change the image I have to change both of them.

 

Is there a way of HTML code resizing the image before it uses it?

[jcombs_31]

If an image is only  160x160 I don't see much harm in just setting the width in html/css.  You're not dealing with large images here so the bandwidth overhead shouldn't be a big issue unless you are talking many many images loading on the page. 

 

But to answer your question, no, html can not resize the actual image, just the way you see it on screen.  You could use the GD library to dynamically create your thumbnails if you really want to cut the size down.

[Axeia]

You can't set the size of a background image, you could use a position: absolute; foreground image instead.

[Ken2k7]

You can't set the size of a background image, you could use a position: absolute; foreground image instead.

But you can set the width and height.

[Axeia]

That's cropping instead of resizing as the OP is asking for.

[jcombs_31]

Doh, I guess I didn't read thoroughly enough. I can't figure out why you'd want to the the thumbnail as a background image.

[cliftonbazaar]

Thanks for all the replies.

 

If an image is only  160x160 I don't see much harm in just setting the width in html/css.  You're not dealing with large images here so the bandwidth overhead shouldn't be a big issue unless you are talking many many images loading on the page. 

It's not the bandwidth that is the problem, it is the amount of pictures, I just don't want to go through and make thumbnails of them all.

 

That's cropping instead of resizing as the OP is asking for.

Excactly, and I don't want it cropped.

 

Doh, I guess I didn't read thoroughly enough. I can't figure out why you'd want to the the thumbnail as a background image.

So you can click on it in order to see the larger picture; because of the amount of pictures there are I don't really want to spend the time making thumbnails of them all.

I know it sounds weird having the thumbnail as the background but it is a large program and, currently, this is the easiest way to do it.

[Ken2k7]

Oh oops.

 

Why can't you just use the IMG HTML tag and give it a style z-index: -999 or something? You can resize it there, right?

[jcombs_31]

Thanks for all the replies.

 

If an image is only  160x160 I don't see much harm in just setting the width in html/css.  You're not dealing with large images here so the bandwidth overhead shouldn't be a big issue unless you are talking many many images loading on the page. 

It's not the bandwidth that is the problem, it is the amount of pictures, I just don't want to go through and make thumbnails of them all.

 

That's cropping instead of resizing as the OP is asking for.

Excactly, and I don't want it cropped.

 

Doh, I guess I didn't read thoroughly enough. I can't figure out why you'd want to the the thumbnail as a background image.

So you can click on it in order to see the larger picture; because of the amount of pictures there are I don't really want to spend the time making thumbnails of them all.

I know it sounds weird having the thumbnail as the background but it is a large program and, currently, this is the easiest way to do it.

 

That still doesn't make sense. Will the larger image open in the same container?  That would make the page shift.  You should just use the <img> tag and set the width on that as stated above.  I still don't see why you would have to set any z index.

 

Can you post a screen shot of the result you are trying to achieve.

[Ken2k7]

Oops, you're right. You don't need z-index for that. I guess I didn't read his last post carefully. My bad. But if I were you, I would just fetch a lightbox script.

[jcombs_31]

Lightbox might be nice, but that is why I wanted him to explain a little bit more what he is trying to achieve.

[Axeia]

If you're just looking up against the amount of constantly resizing images, nearly every host offers either gd2 or imagick (or both!) to automate resizing.

Certainly with images this small it works perfectly and quite fast.

 

But still, my position: absolute; suggestion earlier does what you're after.. I think.

Pretty much drops the image to the background and since it's still an <img> tag it can be resized.

[fry2010]

If you have php running here is a nice little script that will dynamically change the size of the image. It will keep the proportions the same.

 

Save this as resize_img.php or whatever name you want:

<?php

  $image = $_REQUEST['image'];
  $max_width = $_REQUEST['max_width'];
  $max_height = $_REQUEST['max_height'];

  if(!$max_width)
  {
    $max_width = 500;
  }
  if(!$max_height)
  {
    $max_height = 400;
  }

  $size = GetImageSize($image);
  $width = $size['0'];
  $height = $size['1'];

  $x = $max_width / $width;
  $y = $max_height / $height;

  if(($width <= $max_width) && ($height <= $max_height))
  {
    $tn_width = $width;
    $tn_height = $height;
  }
  else if(($x * $height) < $max_height)
  {
    $tn_height = ceil($x*$height);
    $tn_width = $max_width;
  }
  else
  {
    $tn_width = ceil($y*$width);
    $tn_height = $max_height;
  }

  $src = ImageCreateFromGif($image);
  $dst = ImageCreate($tn_width, $tn_height);
  ImageCopyResized($dst, $src, 0, 0, 0, 0, $tn_width, $tn_height, $width, $height);
  header('Content-type: image/gif');
  ImageJpeg($dst, null, -1);
  ImageDestroy($src);
  ImageDestroy($dst);

?>

 

Then to use it, in the page you need it just do a normal img element as such:

<?php
$image_location = 'images/image_name.jpg';
?>

<img src="resize_img.php?image=<?php echo $image_location; ?>" />

<?php 
?>

 

To set a standard size for the image just edit the width and height values in the resize_img.php file.

 

[Ken2k7]

fry2010 overdid that by a mile! Appreciate the effort though.