bioneural.net

If your blog has a fixed-width stylesheet, what do you do when you have an image that is too wide for its container? If you are using iBlog 1.4.1 to drag-and-drop images into the RTF editor, you don't have the option to scale or size-restrict the occasional wide image by styling it directly e.g. <img src="" style="width:450px" />. You do, however, have the option to style a div container using the HTMLCode tag. So how does this help?

This article refers to iBlog (version 1.x), a Mac blogging client that was formerly used to publish this site. It may refer to design elements and other features that have since been replaced.

The problem

In Safari and Firefox a wide image that breaks out of its fixed-width container just sits on top of the content behind. Not pretty:

IE6 on Windows is much more pushy, preferring to shove other div containers around in a suspiciously Microsoftesqe way:

The problem, therefore, is this. For flexible designs, how do iBloggers:

• Drag-and-drop one version of a wide image into the iBlog RTF editor that will not break out of a fixed-width div container.
• Constrain image proportions at all times.
• Display a full/ actual-size image if the user switches to a variable-width stylesheet for widescreen viewing.
• Achieve the above while preserving cross-browser (Safari, Firefox, IE6 Win) harmony.

Method A: Overflowing with joy

What about using the overflow CSS property to always show a full-sized image, but with a horizontal scroll bar when necessary in a fix-width design? In the RTF editor we would enclose our wide image with something like the following inside the HTMLCode tags:

<img src="warn.jpg" alt="Warn" width="24" height="24" />
Wide image! Use horizontal scroll or change to a widescreen view.

<div style="overflow:auto"><img src="img.jpg" height="64" width="64" alt="" /></div>

We expect a result like this (image truncated), were the image sits nicely inside a fixed-width container, with a horizontal scroll-bar (not ideal):

Notice I included a link to the style-switcher; clicking on widescreen has the same effect as using the button in the sub-navigation menu of this site. When we apply the widescreen style the image is displayed in its full glory and the scroll bar is hidden: we don't want to see it, so we don't use [div style="overflow:scroll"].

Safari is cool. Firefox is cool. IE6 is... bugger! Same pushy behaviour as described above and no scroll-bar: our joy is short-lived!

Wait a moment... overflow will work with IE6 if you add a width e.g. [div style="width: 450px; overflow:auto"] or [div style="width: 100%; overflow:auto"]. But this can add a vertical scroll-bar in IE6 (it goes away when you resize) and Firefox (it goes away when you refresh or resize).

Note that width=100% is preferable, because it means that the image won't be stuck at 450px wide when you switch to a widescreen view.

Another option for "elasticizing" images is suggested on ALA is to specify width using em, "equal to the computed value of the 'font-size' property of the element on which it is used" (Yeah, that's what I thought!):

<div style="width: 10em; overflow: hidden">

It works (in that IE6 doesn't get pushy) and although the image is clipped it displays consistently in all browsers. More of the image is revealed as you increase text size:

A compromise is:

<div style="width: 100%; overflow: hidden"> 

Method B: A class act

If we forget overflows and change the container to div class="toowide", we can try to style the image using our external stylesheet. The most obvious thing to do is to set the width of images of the class "toowide" to 450px as this happens to be a maximum safe size for the fixed-width stylesheet used on this site:

.toowide img {
	width: 450px;
	}

No, no good: the image is unattractively squashed horizontally but unaltered vertically—a result that, if nothing else, is consistent in all browsers! it looks just as bad when the widescreen stylesheet is applied. Let's try a relative-width alternative:

.toowide img {
	width: 100%;
	}

No good. The wide image is horizontally squashed by the same degree viewed using the fixed-width stylesheet, but now it's over-stretched in the widescreen view. Can we stop this over-streching? As suggested here we could try this:

.toowide img {
	width: 100%;
	max-width:600px;
	}

Two problems. First, IE6 doesn't do "max-width" (see here) and second, all of our wide images are most unlikely to have the same maximum width.

What if we shrink the image width and height for the fixed-width styling:

.toowide img {
	width: 50%;
	height: 50%;
	}

...and change the widescreen stylesheet to reveal the full-sized image:

.toowide img {
	width: 100%;
	height: 100%;
	}

OK, so in both cases the image dimensions are proportionate and it does not break out of it's container. But it looks terrible when scaled too small (fixed-width) or too large (widescreen).

Method C: Follow the script

There seems to be a JavaScript for pretty much everything: surely someone's written the code to solve this problem? There is a script that comes close, but it scales the image disproportionately.

A very simple JavaScript solution is exemplified here, but unfortunately relies on your being able to edit the properties of the img tag (as a reminder, iBlog won't allow this):

<img src="edit.jpg" style="width:276px;" onmouseover="this.style.width='552px'" onmouseout="this.style.width='276px'" alt="" />

If you don't mind using a thumbnail image in iBlog and uploading a full size image elsewhere, try the following script (thanks for the tip-off Robt.).

Originally from Peter Curtis, the essential JavaScript (with a couple of corrections) is here.

You then contain your thumbnail within an anchor, enclosing the following within href:

javascript:popitup5('URL','title',width,height,'colour')

where:

• URL = the path to the full size image;
• title = the title you want the pop-up window to have (not supported by Safari);
• width = the width the full size image in pixels;
• height = the height of the full size image in pixels;
• colour = the background colour used in the pop-up window.

For example, an image photoshop.jpg that is 584px wide and 755px tall on a white background would be called by:

javascript:popitup5('photoshop.jpg','Expanded image',584,755,'white')

As Greg discovered, an easy way to add this (without having to use the iBlog-specific HTMLCode tags) might seem to involve double-clicking on the thumbnail image in the iBlog editor, and pasting the code directly into the hyperlink box:

However, I found this caused a JavaScript error (popitup5 is not defined), perhaps because it inserts target="_blank" into the anchor. So my advice is to stick with the HTMLCode tags.

Note: You may be wondering about creating a simple hyperlink to open the image in a new window with target="_blank". The disadvantage with this approach is that the new window does not size to fit the dimensions of the image.

Method D: The Kimler Caption #2 approach

The description of this method held much promise:

...a pure-CSS, XHTML-valid, image and caption zoom. Move the cursor over the image and it will 'zoom' (pop, explode, magnify) to reveal a larger image with a caption... A single image is used for both the small and large views. (No need to have a large and a small version).

Try it out here. Copy the CSS from here, and in iBog create an HTMLCode container for your wide image containing something like this above your image (replace [ + ] with angle brackets):

<img src="warn.jpg" alt="Warn" width="24" height="24" style="vertical-align: middle" /> Wide image! Mouseover to expand:
<div class="Zoom (Zright/Zleft) w550 t250">
<a href="#" onmouseover="setActiveStyleSheet('wide', 1);return false;" onmouseout="setActiveStyleSheet(' ', 1);return false;" title="Mouseover/out to zoom/shrink">

Now drag-and-drop your full-size wide image into iBlog's RTF editor. Below it, add the following code, remembering to close the HTMLCode container:

<span class="caption">
<span class="inner">
Fig: Workflow for .VOB editing from DVD+RW.
</span>
</span>
</a>
</div>

I modified Kimler's code so that hovering over the thumbnail with the mouse activated my style-switcher, to show the full-sized image and reveal the caption.

Two issues. The scaling works in 50px steps, so my 552px wide image didn't zoom until I rounded it to 550px width. Close enough and, sure, I could resize my original wide image to the nearest 50px or simply change the step size using CSS. The second issue is that the image thumbnail in the fixed-width view doesn't have the right proportions; it's squeezed in width but maintains the original image height.

To solve the latter issue we could try using percentages in our CSS rather than pixels to define our thumbnail width (e.g. 50%) and create a new class for height:

.Zoom.tw50 img { width:50%; } /* Thumb width */
.Zoom.th50 img { height:50%; } /* Thumb height */
.fw100 a:hover img,.fw100 a:hover .caption {width:100%} /* Full width */
.fh100 a:hover img,.fh100 a:hover .caption {height:100%} /* Full width */

Our div container is then written as:

<div class="Zoom (Zright/Zleft) tw50 th50 fw100 fh100">

This is generic and should work for most images we are likely to display. It all looks OK—until you have a very wide browser window which causes the full scale image to stretch to fill a div container wider than its actual pixel width. So let's try creating a half-sized thumb by specifying pixel width for a specific image:

.Zoom.tw276 img { width:276px; } /* Thumb width */
.Zoom.th354 img { height:354px; } /* Thumb height */
.fw552 a:hover img,.fw552 a:hover .caption {width:552px} /* Full width */
.fh708 a:hover img,.fh708 a:hover .caption {height:708px} /* Full width */

Our div container is then written as:

<div class="Zoom (Zright/Zleft) tw276 th354 fw552 fh708">

The image looks great—but now the span containing our caption is way too tall. Oh well...

Final solution

Most solutions involve a compromise. Mine is based on modified Kimler Caption #2 CSS plus some in-page CSS styling that isn't IE6-friendly. The result is that I have a thumbnail that looks OK using the fixed-width stylesheet in all three browsers (IE6, Safari, Firefox) and a full size image that is not over-stretched in Safari or Firefox using the variable-width stylesheet; it does look a bit rough in IE6 on wide screens, but at least it plays nicer than before. In the final analysis if Microsoft can't be bothered fully supporting CSS standards, I can't be bothered full supporting IE.

So, what was the final code? First, the CSS:

.zoom img {
	border: 0;
	} 

.zoom.tw50 img {
	width:50%;
	}

.zoom.th50 img {
	height:50%;
	} 

.fw100 a:hover img,.fw100 a:hover .caption {
	width:100%;
	} 

.fh100 a:hover img,.fh100 a:hover .caption {
	height:100%;
	}

Now comes the XHTML, sitting between the iBlog-specific HTMLCode tags (commentary added):

<img src="warn.jpg" alt="Warn" width="24" height="24" style="vertical-align: middle" />
Wide image! Mouseover to reveal; resize browser window if required:

The above line lets the viewer know that placing their mouse over the thumbnail will expand the image. It also includes a JavaScript to maximize display area.

<div class="zoom tw50 th50 fw100 fh100" style="max-width: 552px; max-height: 708px">

The above line transfers some of the shared styling to the external stylesheet; it creates a thumbnail for all images of this class that occupies 50% of the width of the containing div. When we zoom/ expand the image we are telling it to occupy 100% of the containing div, but with a caveat. The local styling says it shouldn't get wider or taller than the actual dimensions of the image in pixels (i.e. we don't want to over-stretch it). We will over-stretch it—but only in IE6 which doesn't understand this syntax.

<a href="#" onmouseover="setActiveStyleSheet('wide', 1);return false;" title="Mouseover to expand">

The above line activates the style-switching JavaScript when we mouseover the thumbnail; the variable-width stylesheet is invoked since we want to be able to give the image as much space as possible to grow into, without running into fixed boundaries.

IMG

IMG would be replaced by our single/ full size image in the iBlog entry editor.

[/a]

The above line closes the hyperlink that initiates our onmouseover instruction.

</div>

The above line closes our container, and likewise brings this struggle to an end.

Postscript

I'm kicking myself. All that work... a much simpler and satisfactory solution was at hand. Forget the external CSS. Take the XHTML in "Final solution" above, and replace this line:

<div class="zoom tw50 th50 fw100 fh100" style="max-width: 552px; max-height: 708px">

...with this line:

<div class="toowide" style="width: 100%; overflow: hidden">

It's as simple as the combination of hidden overflow (100% width added so IE6 doesn't choke) with a mouseover-mediated change from a fixed-width to a variable-width stylesheet. No ugly image stretching, squashing, or pop-ups involved.