Jump to content

Resizing an image before it is used


cliftonbazaar

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.