Displaying a List of Scaled Images, Part 2

By Scott Mitchell

---

Read Part 1

---

In Part 1 we looked at how to display the images in a directory on a Web page. However, if the images are a variety of sizes, with some being too large, the resulting formatting is anything but eye-pleasing. In this final part, we'll examine how to dynamically resize the images using the .NET Framework's Image class. (Note that we won't be resizing the actual image file, but specifying the img tag's height and width attributes accordingly. To see how to actually resize an image, be sure to read the article: True Image Resizing.)

Determining an Image's Width and Height

What we want to be able to do is specify some maximum height and width constraints, and require that all images fit within those constraints. Since in our previous live demo we displayed a DataList with three columns, perhaps we'd want to limit the resulting HTML table to 600 pixels, meaning each image should be no more than 200 pixels in width. Also, let's assume that we don't want any image greater than 200 pixels in height.

Now, we need to be able to determine if one the image's we're about to display has a height or width greater than the allowed amount (200 pixels). If it does, then we need to scale the image's height and width so that it fits within the constraints. To determine an image's height and width, we can use the Image class. The following code creates a new instance of the Image class from the specified file:

Dim myImage as Image = Image.FromFile(physical path to image file)

Once we have an instance of the Image class we can determine the height and width of the image by checking the Height and Width properties. The following code iterates through all of the GIF files in the IMAGE_DIRECTORY directory and dynamically determines the property height and width for the image.

Const IMAGE_DIRECTORY as String = "/images/" Const maxWidth as Integer = 200 Const maxHeight as Integer = 200 Dim pics as ArrayList = new ArrayList() Dim s as String, html as String Dim imgHeight, imgWidth as Integer For Each s in System.IO.Directory.GetFiles(Server.MapPath(IMAGE_DIRECTORY), "*.gif") 'Get information about the image Dim currentImage as System.Drawing.Image = System.Drawing.Image.FromFile(s) imgHeight = currentImage.Height imgWidth = currentImage.Width If imgWidth > maxWidth OR imgHeight > maxHeight then 'Determine what dimension is off by more Dim deltaWidth as Integer = imgWidth - maxWidth Dim deltaHeight as Integer = imgHeight - maxHeight Dim scaleFactor as Double If deltaHeight > deltaWidth then 'Scale by the height scaleFactor = maxHeight / imgHeight Else 'Scale by the Width scaleFactor = maxWidth / imgWidth End If imgWidth *= scaleFactor imgHeight *= scaleFactor End If html = "<a href=""" & IMAGE_DIRECTORY & System.IO.Path.GetFileName(s) & """>" & _ "<img src=""" & IMAGE_DIRECTORY & System.IO.Path.GetFileName(s) & """" & _ "height=""" & imgHeight & """ width=""" & imgWidth & """>" & _ "</a>" pics.Add(html) Next

[View a Live Demo!]

The above code works in the following manner: each image's height and width is checked to see if either exceeds the maximum constraints. If neither do, then the image is shown at its actual size. If either of them do, though, the delta between the image's actual height and width and the maximum allowed height and width is computed. The largest delta is then used to determine how the scaling factor is computed.

So, if an image has a height of 300 and a width of 500, and the maximum height and width is 200, then the width delta is 300 (500 - 200) and the height delta is 100 (300 - 200). Since the width delta is larger than the height delta, the scaling factor is the max width divided by the image's width (200 / 500, or 0.4). The image's height and width are then multiplied by this scaling factor to determine the images new scaled height and width. For this particular examples, the image's new height would be 120 and the width would be 200. By multiplying both the height and width by this one scale factor, the image's height to width ratio is preserved.

Conclusion

In this article we examined two things: how to enumerate the files in a directory, and how to dynamically determine an image's height and width attributes. With these two bits of knowledge, this article demonstrated how to create an ASP.NET Web page that would list images from a directory in a three-columned HTML, where the images were guaranteed to be displayed no larger than 200x200 pixels. For more information on working with images in ASP.NET consider reading Saving Dynamically Created Images on the Web Server, which is from a sample chapter from the book ASP.NET: Tips, Tutorials, and Code.

Now that you have finished this article, be sure to read the follow-up article, True Image Resizing, in which we'll examine how to use the Image class's GetThumbnailImage() method to create an actual thumbnail of an image on-the-fly!

Happy Programming!

By Scott Mitchell