Dimensions

Dimensions is an input filter which attempts to add width and height attributes to <img> tags in content which do not already have them.

Why are width and height attributes important?

The width and height attributes of the <img> tag specify how large the image being referenced should appear. Strictly speaking, <img> tags do not need width and height attributes; the size of the image will be dictated by the image itself. However, it’s a good idea to include them anyway so that the browser knows how large the image will appear while it's rendering the page for the first time, before the image is loaded. Otherwise, the browser must re-render the page after it downloads the image and determines what its dimensions are going to be. Besides slowing down the browser, this can also be annoying for the user; for example, if the user has already started reading the text of a webpage before the image has started downloading, then the browser starts downloading the image and re-renders the page accordingly, the bit of text the user is reading may move depending on the new geometry of the page, causing the user to lose their reading place as the text “jumps around.” This problem is exacerbated by every image on a page which does not have width and height attributes.

So adding these attributes is important, but it can also be kind of annoying, as it requires opening the images in a program which will display the images’ dimensions, remembering those values, switching back to the content editor in Drupal to type them in, and so on. Especially if you have many images you want to put into your content, this isn't much fun. So I wrote this input filter to do this annoying work for me. With this filter, I can just upload the images and put them in content as normal, ignoring the width and height attributes, and let Dimensions do the work for me. I hope you find Dimensions similarly useful.

Installation

Dimensions is an input filter. I suggest you read up on what input filters and formats are in Drupal if you are unfamiliar with the concept.

Enable the Dimensions module as normal, then add the Dimensions filter to the desired text formats. Here’s how to do that in Drupal 6 and in Drupal 7.

Dimensions has no configuration options. However, in most cases, you want to be sure that the order of your filters on your input formats is such that Dimensions is the last filter that runs on the format. In Drupal 6, you can do this by configuring a format, clicking the “Rearrange” tab, and rearranging the filters so that Dimensions is at the very bottom. In Drupal 7, this is done on the same page used to enable or disable filters for a format. (Note that if you're also using Pathologic or other path-rewriting filters which want to be the last filter run in a format, Dimensions should still be after those filters, as it's important for the paths to images to be correct in order for Dimensions to function.)

How Dimensions works

Dimensions basically finds all <img> tags in your content and examines them for the following criteria:

Does the tag not already have a width or height attribute?
Does the tag have an src attribute?
Does the src attribute contain an absolute path, with or without the domain fragment?
If the src attribute contains a domain fragment, does it appear to reference this site?
For security reasons, does the src attribute not contain two consecutive periods (..)
Can an image be found and opened at the path hinted at by the src attribute?

Those third and fourth ones are probably going to be where people run into the most trouble. Basically, Dimensions wants src attributes to be absolute, so it better can guess how to find the image being referenced on disk on that server. Dimensions does not currently work for images stored on external servers, though it may be theoretically possible in the future in the Drupal 7 version using Drupal 7’s stream wrappers. But for now, Dimensions expects to find images on the same server it is running on.

If you're in the habit of always using relative paths for your images, I suggest you install my Pathologic module, which will rewrite paths so that they are always absolute.

If you’re confused by all this absolute/relative talk, here’s some examples of various src attributes and how Dimensions will consider them. These examples assume the server is located at http://example.com.

src attribute value	Will Dimensions work?
http://example.com/sites/default/files/image.png	Yes. The path is an absolute path with a server fragment. Dimensions should easily be able to find where on the server the image is located and check its dimensions.
/sites/default/files/image.png	Yes. The path is lacking a server fragment, but is still an absolute path.
sites/default/files/image.png	No. The path is not an absolute path, even though it kind of looks like one.
../image.png	No. Again, the path is not absolute. Also, it contains two consecutive dots; even in absolute paths, Dimensions will ignore such paths for security reasons.
http://example.org/images/image.png	No. The image being referenced is on a different server (uses a different domain name). Dimensions expects all images it works upon to be on the same server it is running on.

Once Dimensions has a path to an image it can work with, it will then attempt to open the image, determine its dimensions, and add that information to the <img> tag using width and height attributes. Thus, Dimensions won’t work on images which don't exist or are unreadable by the PHP process and its image handling functions due to permissions or corruption issues.

ImageCache support

Dimensions may not always seem to function when given paths to images being run through ImageCache. This is because those images may not yet physically exist for Dimensions to examine at the time it runs - ImageCache has yet to create them. Solutions to this problem are being considered; for now, it is recommended that you do not use Dimensions with ImageCache paths if results must be consistent.