As developers, we're often called on to create picture galleries, thumbnails to larger images, and with an ecommerce site, product pages where all the images need to fit within a constrained image size. With the wonders of ASP (and 4guysfromrolla), we're going to do just that. All the code for this method was created by 4guysfromrolla, I'm just going to give you a slightly less convoluted (and technical) explanation on how to implement it.
Note: for more advanced server side image resize check out the Smart Image Resize
As developers,
we're often called on to create picture galleries, thumbnails to larger images,
and with an ecommerce site, product pages where all the images need to fit within
a constrained image size. With the wonders of ASP (and 4guysfromrolla), we're
going to do just that. All the code for this method was created by 4guysfromrolla,
I'm just going to give you a slightly less convoluted (and technical) explanation
on how to implement it.
First, we obviously need an image we need to resize.
Image 1: <img src="DefaultPic.jpg"
width="184" height="233">
We are just
using some straight HTML code to display this one. Let's assume that I want
to be able to make it 100x100 pixels though. I want to make a photo album, and
don't want anything over that size. I can try this:
<img src="DefaultPic.jpg" width="100" height="100">
It's 100x75, but not very pretty. The image is warped, and a user isn't likely
to click on it, or think I know what the hell I'm doing.
In comes
4guys to the rescue. This image has been scaled down, so that it's longest side
is no larger than 100 pixels. It is also perfectly scaled, so that someone can
actually tell what they're looking at.
Image 2: <img src="DefaultPic.jpg"
<%=ImageResize(Server.MapPath("DefaultPic.jpg"), 100, 100)%>>
The generated code from the asp is:
<img src="DefaultPic.jpg"
height="100" align="left">
"So Dan, how the heck do I do it?"
1. You need to create two additional files for this script to work. The first
one is imgsz.asp (click the link to get the code for it). The second
one is propresize.asp - you can download those here
On any page that will be resizing images, you need to call these files from
an include, like so:
<!--#INCLUDE FILE='imgsz.asp'-->
<!--#INCLUDE FILE='propresize.asp'-->
Place these above your <html> tag.
Now to resize our image, we need to follow this syntax:
<img src="image.gif" <%=ImageResize(Server.MapPath("image.gif"),
height, width)%>>
The Server.MapPath declaration should match your src exactly.
This will invoke the filesystem object, test the image's height and width,
and then force the largest side to fit into the smallest dimension.
The complete 4guys article is here: http://www.4guysfromrolla.com/webtech/011201-1.shtml
Comments
Does this code DL the image with a size of the full image or the thumbnail...
Example supposed the image is 900x900 and takes up 90K. Using this code does the image DL to the browser the full 90K version? My guess would be yes...
Also this is just an example...
Thanks,
-Greg
RE: Does this code DL the image with a size of the full image or the thumbnail...
Using A Dynamic Image....
How would I go about using this with a dynamic image. I will be pulling the image name from a recordset. How would I go about doing this?
Thanks.
-Greg
RE: Using A Dynamic Image....
<img src="<%=rs("File")%>" <% =ImageResize(Server.MapPath(rs("File")), 100, 100)%>>
You must me logged in to write a comment.