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

  1. 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

  1. 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
  2. Right click the image > Show Pictures Toolbar
  3. On the Pictures toolbar > click the Auto Thumbnail button. (2nd icon from the left) Screenshot Auto Thumbnail icon. OR right click the image and choose Auto Thumbnail.
  4. To save the thumbnail picture >File > Save
  5.  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" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/Users/Patricia Geary/Documents/My Web Sites/test-auto-thumbnail/images/barnett-loni-jones-kids.jpg" --></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
  6. 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">


Copyright November 2009 Expression Web Tutorials & Templates All Rights Reserved