« Reading List: Empire | Main | A Quarter Century Ago Today »

Sunday, January 28, 2007

Movable Type: XHTML 1.0 Compliant Popup Image Template

I recently updated the Fourmilab Movable Type installation to the 3.34 release. Whenever I install a new release, I modify a few representative pages and pass them through the W3C markup validator to make sure the generated documents remain compliant with the XHTML 1.0 (Transitional) standard. One potentially confusing thing about updating Movable Type is that the process of installing an update does not automatically apply any updates to the templates used by a Web log (there are gimmicky ways to set things up with templates linked to files in the default_templates directory of the distribution which can achieve this, but that has its own risks and, besides, hardly anybody does that). This is a good thing, since if you've modified one or more of the templates used to generate your Web log, you wouldn't want your changes blindly overwritten when you installed the update. But it does mean that it's wise to review the changes in the default templates between the old and new releases because there may be fixes you should integrate into your own templates.

When you upload an image file, create a thumbnail for it, and specify “Popup” presentation, Movable Type creates HTML to embed a thumbnail image in the item which, when clicked, will pop up a new window that displays the full size image. This is done by linking to a little HTML document, placed in the directory with the image and thumbnail, which simply includes the image. In the process of testing such a document updated with the new release, I discovered that the rudimentary HTML which wraps the full size image fails validation with 8 errors among which are the absence of a character set specification, missing DOCTYPE, absence of a “<head>” section, no “alt=” specification for the image, and browser-specific margin specifications in the “<body>” tag. I initially assumed this was due to an obsolete template being used for these documents but when I checked, it turned out that the default template in question, “default_templates/uploaded_image_popup_template.tmpl” in the Movable Type 3.34 distribution, still prescribed the generation of such documents.

I created a new template which generates XHTML 1.0 compliant popup image documents which the validator accepts without errors or warnings. If you'd like to implement this fix on your Movable Type installation, download the zipped archive, extract the file fourmilab_uploaded_image_popup_template.tmpl, and replace your current “Uploaded Image Popup Template” (found under the System tab of the Templates configuration page) with the contents of this file. After saving the changed template, be sure to try uploading a popup image with a thumbnail and make sure everything is working properly. If you wish to revert to the standard configuration, you can replace the modified template with the contents of the default_templates/uploaded_image_popup_template.tmpl distribution file.

Note that installing this template will only affect images you subsequently upload; if you have existing popup image documents which you wish to pass validation, you'll need to manually modify them individually. Unlike a change to an Index or Archive template, which can be applied to all documents simply by rebuilding the site, this System template only runs once when you actually upload the image.

Posted at January 28, 2007 20:34