February 27, 2010

This is the ninth post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

This theme, as I explained in previous posts, is elastic, meaning that as you increase the text size, the rest of the site scales up accordingly. The problem with this is images, when images scale up on a webpage all kinds of evil ensues and so it can’t really be done. This is my solution.

I will start with some screenshots to demonstrate the end result, then explain what I have done. They aren’t small but I wanted to get across the scale of the problem.

This is the same page at the original font size, and several sizes larger. The bottom image is simply styled with a width in EMs, the image above uses my technique.

Now, before I explain what I have done I wanted to temper expectations a little. This isn’t the grand solution to all image sizing, you might even consider it a slightly hacky solution to the problem, but it does work.

The short version is simply that the top image is actually 5 images, each at intermediate steps, 150px, 180px, 225px. 300px. and finally 450px. Using a div and absolute positioning each image comes into view as the appropriately sized text is selected.

The CSS is split between the stylesheet and inline styles. If you know what sizes your images will be before hand there is no reason why it can’t all be in the stylesheet.

The stylesheet contains two rules:

div.multiimage
{
overflow:hidden;
position:relative;
}

div.multiimage div.subimage
{
margin-top:-1000em;
position:absolute;
}

And the html looks like this:

<!– The Wrapper –>
<div style=”width:15em; height:10em;”>
<!– The original Image –>
<img src=”http://localhost:8080/wp-content/uploads/2008/03/11.jpg” alt=”Williams Formula 1 Car”  />
<!– Larger Image 1 –>
<div style=”width:18em; height:18em; top:12000px; background-image:url(http://localhost:8080/wp-content/uploads/2008/03/21.jpg);”></div>
<!– Larger Image 2 –>
<div style=”width:22.5em; height:22.5em; top:15000px; background-image:url(http://localhost:8080/wp-content/uploads/2008/03/31.jpg);”></div>
<!– Larger Image 3 –>
<div style=”width:30em; height:30em; top:20000px; background-image:url(http://localhost:8080/wp-content/uploads/2008/03/4.jpg);”></div>
<!– Larger Image 4 –>
<div style=”width:45em; height:45em; top:30000px; background-image:url(http://localhost:8080/wp-content/uploads/2008/03/5.jpg);”></div>
</div>

As the text is resized the negative margin (-1000em) of the larger images increases until it reaches a measure equal to the absolute position top, which is 1000 times the size that the base font (the font that applies to the body) will be when we want that image displayed, but in pixels so that it doesn’t change when the font is resized.

In this example the base font size, or 1em, is equal to 10px. So for the first larger image is positioned 12000 pixels from the top. When the font is increased to 1.2 the negative margin then equals 1000 times, i.e. -12000 and the image is displayed.

I have used div tags with backgrounds instead of images so that screenreaders do not end up listing image after image, this after all purely visual.

Disclaimer: As Safari won’t run on my computer I don’t know how it deals with resizing. Firefox on Windows resizes text as:1 , 1.2 , 1.5 , 2 , 3 and it is this I have based this on. Both Opera and IE zoom instead of resizing and so the technique is never used. If someone does try it on a Mac please report back.