Skip to content

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

Boagworld is the web design blog of Paul (the Wurzel) Boag who lives in the heart of rural Dorset. He produces a weekly podcast with Marcus (pop star) Lillington on all things relating to building and running websites. They also run web design agency - Headscape.

Latest Shows

203. Why your blog fails
This week on boagworld: the secret of successful blogging, will Google personalisation affect your sites ranking and how to help users too busy to read.
202. Rocket Surgery Made Easy
This week on Boagworld: Steve Krug on monthly usability, Steve Marshall talks about form design and Paul rejoices over the new era for browsers in Europe.
201. Are clients stupid?
This week on Boagworld: We review the freelancing book Noded, discover a new web tool called 'Support Details' and Paul tells us all a story.
200. A taste of the show
This week's show gives you a taste of the live 12 hour marathon that took place to celebrate the 200th Boagworld.
199. Time to generalise
This week on Boagworld: The changing role of web designers, Colin Firth on content and Becky Jones talks about the changes at Google.

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

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.

Paul elsewhere

Paul just can't shut up. He publishes regular audioboos, has a personal blog and is addicted to twitter. He also writes and speaks regularly. Check out the most recent below:

close
Follow Boagworld at SXSW on our Southby Blog. Also you can follow us on twitter @boagworldAtSXSW