The IMGSZ code presented in my earlier article, Determining Image Properties in ASP, was written in response to my need to be able to fit images proportionally within a given area. My client had asked me to develop a photo gallery application for their site, and the photo gallery was to display photos surrounded by a complex graphical ‘photo album’ motif. As a result, all photos (regardless of their original size) needed to ‘fit’ within a defined pixelspace.

Many questions ensued: So how would I accomplish that within HTML? Would I need to buy a component? And is ‘pixelspace’ even a real word? Although I mentioned the possibility of enhancing the IMGSZ routines to allow for proportional resize, I left it up to the readers of that original article to enhance those routines to do the proportional sizing. However, so many of you have asked for the resizing routine that I am pleased (relieved?) to offer it here now.

Why Do I Need It?

If you are just learning HTML (or any of its younger variants) you already know that the IMG tag has HEIGHT and WIDTH properties that can be used to force an image to a particular size. However, it has no easy way to do a proportional resize that fits in a desired area. For example, let’s say you’re showing images in a table for an on-line product catalog. To make things look nice, you’re defining the size of the image presented to 100×75 pixels. So you may decide to use WIDTH="100" HEIGHT="75" in your IMG tag for each picture. What will happen is that images may get squashed or stretched in ways that you (and your customers) do not find pleasing. This IMGSZ add-on function will allow you to overcome that problem.

How Does It Work?

The ImageResize function is passed an image filename, a maximum width and a maximum height. The function returns either a HEIGHT=xxx or a WIDTH=xxx string that you embed in your IMG tag to provide the proportional resize.

So How Do I Use It?

Using the function can be as simple as embedding a function call in your IMG tag. For example, the following code will present an image proportionally in a 100×75 pixel area:

The parameters passed to the function are as follows:

As a further example, let’s look at some simple test code. This code will look at your server’s C:\ drive, root directory, and display all GIF images that it finds there in a table. The images will be proportionally resized to fit within a 75×45 pixel area. Be sure to view the live demo!

<%
   ':::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   ':::                                                   :::
   ':::  SCRIPT:   testpropresize.asp                     :::
   ':::  AUTHOR:   Mike Shaffer                           :::
   ':::  DATE:     11-Jan-01                              :::
   ':::  PURPOSE:  Test/show the operation of the resize  :::
   ':::            (proportional) function                :::
   ':::                                                   :::
   ':::::::::::::::::::::::::::::::::::::::::::::::::::::::::
%>
  <!--#INCLUDE FILE='imgsz.asp'-->
  <!--#INCLUDE FILE='propresize.asp'-->
<%
' To test, we'll just try to show all files with a .GIF
' extension in the root of C: by fitting them to a common
' area (75 pixels x 45 pixels)

dim objFSO, objF, objFC
dim f1, w, h, c, strType

Set objFSO = CreateObject("Scripting.FileSystemObject")
Set objF = objFSO.GetFolder("c:\")
Set objFC = objF.Files

response.write "<table border=""1"" cellpadding=""5"">"

For Each f1 in objFC
  if instr(ucase(f1.Name), ".GIF") then
     response.write "<tr><td>" & f1.name & "</td><td>" & _
         f1.DateCreated & "</td><td>" & f1.Size & "</td><td>"

     if gfxSpex(f1.Path, w, h, c, strType) = true then
        response.write w & " x " & h & " " & c & " colors</td>"
        response.write "<td><img src=""" & f1.Path & """ " & _
              ImageResize(f1.Path, 75, 45) & " border=""1""></td>"
     else
        response.write " </td><td align=""center"">bad image</td>"
     end if

     response.write "</tr>"

  end if
Next

response.write "</table>"

set objFC = nothing
set objF = nothing
set objFSO = nothing
%>

[View the live demo!]

Enough Yakking Already, Show Me The Code!

The code for the function (below) is quite simple, really. Here is a description of the steps it follows to do its magic:

• First, call the gfxSpex function (contained in IMGSZ.ASP) to determine
  the height and width (and color depth and validity!) of the image.
• Determine the target image ratio and the file’s image ratio
  (width divided by depth)
• If the file’s image ratio is greater-than the target image ratio,
  then we know that we have to size proportionally based on WIDTH,
  otherwise we size proportionally based on HEIGHT (and if it was
  not a valid image, return an empty resize string)

Oops! I’m yakking again, here’s the code, already!

function ImageResize(strImageName, intDesiredWidth, intDesiredHeight)
   dim TargetRatio
   dim CurrentRatio
   dim strResize
   dim w, h, c, strType

   if gfxSpex(strImageName, w, h, c, strType) = true then
      TargetRatio = intDesiredWidth / intDesiredHeight
      CurrentRatio = w / h
      if CurrentRatio > TargetRatio then  ' We'll scale height
         strResize = "width=""" & intDesiredWidth & """"
      else
         ' We'll scale width
         strResize = "height=""" & intDesiredHeight & """"
      end if
   else
      strResize = ""
   end if

   ImageResize = strResize
end Function

Caveats

You can integrate the PROPRESIZE.ASP contents into the IMGSZ.ASP code if you like. Note that this does NOT perform an actual resize of the graphical image file, only the visual representation of the image. What this means is that if you have an image that is 800×600x24 bits which is 1 megabyte in size, and you ask the routine to scale the image to a 100×75 pixel area, you will STILL be downloading that entire 1 megabyte of picture information from the server. If you want to do TRUE thumbnail file creation (on disk) you will need to obtain any one of the graphical components available today that offer this feature.

Article collateral materials:

Download the PROPRESIZE.ASP source code in text format
Download the IMGSZ.ASP source code in text format