Auto Thumbnail in Expression Web

When I need to create thumbnail images for my web sites I normally turn to Snagit. While Snagit is NOT a graphics program like PhotoShop or PaintShop, it works just fine for my purposes. Recently I was helping someone who was new to Expression Web develop a photo gallery. She had been using the auto thumbnail feature in FrontPage and then Expression Web and wanted to continue doing so.

I created a photo template for her to use for the various galleries first.

Check doctype declaration

Make sure that you are using a complete doctype declaration on your page. Those inserted using code snippets are NOT complete.

Set the Default Properties for thumbnails

Tools > Page Editor Options > Auto Thumbnail Tab
View Screenshot
1. In the Set box, choose your option then type a value in pixels. I use 200px.
2. I do NOT select a border thickness as I specify in my external sheet no border around body images so I do not have the ugly blue border around hyperlinks images. body img { border: 0px; text-decoration: none;}
3. I also do NOT choose to have a beveled edge as that is a rather out of date look.

Create a thumbnail picture

Insert the full size image into your page Insert > Picture > From File OR you can drag and drop the image. NOTE: Make sure you save your page before you start inserting the images or the path to your images may not be correct.
In the Accessibility Properties dialogue box, insert an alternate description for the image. View Screenshot
Right click the image > Show Pictures Toolbar
On the Pictures toolbar > click the Auto Thumbnail button. (2nd icon from the left) OR right click the image and choose Auto Thumbnail.
To save the thumbnail picture >File > Save
In the Save Embedded Files dialog box, set the options you want and then click OK. NOTE: I keep all of my images in a folder called images so I browse to that folder to save the thumbnail image.
The following lines of code are added to your html code:

<a href="images/barnett-loni-jones-kids.jpg"><img alt="Picture of Barnett and Lonie Jones and children." src="images/barnett-loni-jones-kids_small.jpg" width="200" height="276" ></a>

NOTE: file names for images should NOT contain spaces or special characters.
If you have a lot of pictures this could add a considerable amount of unnecessary code to your page.
View Screenshot Code Created for 3 images before optimization
The code created using the Auto Thumbnail feature will validate BUT you can clean up that code considerably and do no harm to the images or your display.
With your page open in Code View > Right Click > Optimize HTML View Screenshot
View Screenshot Code Created for 3 images after optimization. NOTE: The code highlighted above is what will be removed in the optimization process.

Using the auto thumbnail feature is NOT the best way to optimize your images for use on the web. Instead use your favorite graphics editor. If you don't have one installed on your computer there are free ones available such as Irfanview and paint.net.

Problems with HTML Strict doctype declaration

NOTE: If you use the HTML Strict doctype shown below, your page will NOT validate with the code used by the auto thumbnail feature.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Optimizing the code will NOT remove the offending code.

XHTML Strict doctype declaration

If you change your doctype declaration to an XHTML Strict doctype, the page will validate and optimizing the code will remove the thumbnail statement

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Expression Web 4.0 Tutorials 2nd Edition from Install to Publish, a FREE EBook by Pat Geary.

Expression Web has a group on Facebook. If you are a FB user, come join us.

Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.

Microsoft MVP Logo.
April 2007 - April 2013