Styled images with caption | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Saturday, 29th July, 2006

Styled images with caption

Here is an interesting problem that keeps cropping up. How do you balance the need for easy update by web editors with the desire to make a site as visually appealing as possible?

Development:
The estimated time to read this article is 4 minutes

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.

Click here for a very basic working example

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.