Skip to content

A podcast for those who design, develop and run websites.

Boagworld is the blog of web strategist Paul Boag who lives in the heart of rural Dorset (hence the cows). He produces a weekly podcast with UX consultant Marcus Lillington on building and running websites. They also run the web design agency Headscape.

Latest Shows

216. Thanks for all the fish
This week on Boagworld: Chris Coyier talks CSS and more, we say goodbye to the boagworld podcast and ask what can you listen to now?
215. Web Directions
This week on Boagworld: Emerging trends at Web Direction @Media, playful web design and death to design by committee.
214. When to hire a web designer
This week on Boagworld: When to hire a web agency, user testing on disposable websites and a need for speed.
213. Getting all emotional
This week on Boagworld: Stephen Anderson on emotional design, I review the iPad and we talk fonts, flash and fotos.
212. More skills to learn
This week on Boagworld: 5 new skills every web designer needs to know and how to be inspired while maintaining focus.

or view all shows

Have your say

Become a part of the Boagworld community...

Styled images with caption

Posted in Tech/Development on: Saturday, July 29, 2006 by Paul Boag

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? Take for example the images that website owners inevitably want to add to their site via a content management system.

The problem is a simple one. A client wants to add an image to their site via the 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 (beyond basic resizing) or how to edit .

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 and 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 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 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

Post to Twitter Post to Delicious

What did you think about this post?

48 Comments

Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email

Additional Information

Produced by Headscape

Boagworld is produced by the web design agency Headscape founded by Marcus, Paul and Chris Scott. Headscape also has a number of other talented guys who blog. Check them out.

  • Craig Rowe is one of our amazing developers and writes some superb posts on everything from .net to AIR apps.

  • Ed Merritt is a Headscape designer who's blog contains examples of his work and a number of free Wordpress themes.

  • Dave McDermid is a Headscape developer who has an excellent blog. He blogs on everything from AJAX to security.

  • Rob Borley is one of our project managers and blogs regularly on client and project management issues.

  • Leigh Howells is our multimedia design guru (whatever one of those is). He blogs on a mixture of design and music.

You can now download my video presentation of 40 better ways to work with clients for only £9.25.