The problem is a simple one. A client wants to add an image to their site via the content management system. They want it to look attractive, not appear too boxy (let us say they want a nice rounded corner, as this is all the rage) and have a nice caption underneath it. However, they do not know how to use an image editor (beyond basic resizing) or how to edit HTML.

What would be great is if they could just add a normal everyday image using the img tag, add a title tag including the caption and then it magically styled itself. Well by combining CSS and DOM scripting, I have managed to get this working.

Of course, I am not the best scripter in the world so if you can improve on the code below then please let me know by posting a comment.

Step One: The HTML

The website owner adds the image resized to the appropriate dimensions. Notice they have added img tag contains a caption in the form of a title tag and a class name of "imgRight" (something easy to add with a WYSIWYG editor like Xstandard or contribute). They have also set the width and height of the image. This is important from a styling point of view later.

<img src="/images/foo.jpg" alt="Description of picture" width="200" height="147" class="imgRight" title="The caption would go here" />

Step Two: The DOM Script

The script I have created does the following:

• Finds all images with the class "imgRight" or "imgLeft"
• Loops through each one extracting the title tag and inserting it into a new p tag it has created
• It then effectively wraps the img tag in a div and inserts the p caption after the image
• It removes the class name from the img and adds it instead to the div.
• It also uses the width of the image as the width of the div. This prevents the caption expanding beyond the width of the image.
• Finally it adds an additional span tag that we are going to use later to create the rounded corner.

Just to keep the code a little more streamlined I use the getElementsByClassName function created by Robert Nyman so don't forget to include that in your javascript file.

function addCaption(xClass) {
var allImages = getElementsByClassName(document, "img", xClass);
for ( var i=0; i < allImages.length; i++) {
var imageCaption = document.createTextNode(allImages[i].title);
var imageContainer = document.createElement("div");
var imagePara = document.createElement("p");
var imageWidth = allImages[i].getAttribute("width");
var spareSpan = document.createElement("span");
imagePara.appendChild(imageCaption);
allImages[i].parentNode.insertBefore(imageContainer, allImages[i]);
imageContainer.appendChild(allImages[i]);
if ( allImages[i].title != "" ) {
imageContainer.appendChild(imagePara);
}
imageContainer.appendChild(spareSpan);
imageContainer.className = xClass
spareSpan.className = "spareSpan"
allImages[i].className = "img"
imageContainer.style.width = imageWidth + "px";

}
}

// Runs all the listed functions on the loading of the window

window.onload=function(){
addCaption("imgLeft");
addCaption("imgRight");
}

Step Three: Add the styling

Once the Javacript has run it should output the following HTML which we can now style:

<div style="width: 200px;" class="imgRight">
<img src="/images/foo.jpg" alt="Description of picture" width="200" height="147" class="img" title="The caption would go here" />
<p>The caption would go here</p>
<span class="spareSpan"></span>
</div>

Obviously, you can style this in whatever way you want but some basic styling might look like this:

.imgRight {
float:right;
margin:0.5em 0 1em 1em;
position:relative;
}

.imgLeft {
float:left;
margin:0.5em 1em 1em 0;
position:relative;
}

.imgRight p, .imgLeft p {
font-size:0.9em;
color:#FFFFFF;
margin:0;
background-color:#4D6D80;
padding:0.5em;
}

.spareSpan {
position:absolute;
top:0;
right:0;
display:block;
width:17px;
height:17px;
background:url(/images/curvedCorner.png);
}

This styling basically absolutely positions the sparespan in the top right corner and adds a nice curve to it while at the same time applying some styling to the caption.

So there you have it. Still very much a work in progress but I would very much like the feedback of the coders out there who are more knowledgeable about such things.