Styled images with caption
Published on: 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 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.
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
Post by Adam on July 29, 2006 2:01 PM
Post by Chris on July 29, 2006 10:29 PM
Post by Sugar on July 30, 2006 10:26 AM
Post by Daniel on July 31, 2006 3:13 AM
Post by Jason Head on July 31, 2006 6:29 PM
Post by Gary Hides on August 1, 2006 4:28 PM
Post by Gary Hides on August 1, 2006 5:11 PM
Post by Paul Boag on August 1, 2006 6:23 PM
Post by Billy on August 1, 2006 8:51 PM
Post by Gary Hides on August 1, 2006 9:57 PM
Post by Daniel Chesterton on August 19, 2006 7:29 PM
Post by Russell on September 1, 2006 3:11 AM
Post by graham on March 18, 2007 11:27 AM
Post by Alma Fernandez on March 19, 2007 12:41 AM
Post by Sergio on March 19, 2007 8:30 PM
Post by Marcin Nowakowski on August 3, 2007 11:09 AM
Post by Marcin Nowakowski on August 3, 2007 11:13 AM
Post by web tasarim on October 30, 2007 7:28 PM
Post by geciktirici on December 25, 2007 12:27 PM
Post by film izle on December 26, 2007 12:21 AM
Post by seo yarışması on December 26, 2007 12:31 AM
Post by seo on December 26, 2007 12:35 AM
Post by Oyun, indir on December 26, 2007 9:34 AM
Post by www.r10.net küresel ısınmaya hayır seo yarışması on December 26, 2007 9:35 AM
Post by resimler on December 26, 2007 9:37 AM
Post by Divx,indir,movie on December 26, 2007 9:40 AM
Post by www.r10.net küresel ısınmaya hayır seo yarışması on December 26, 2007 10:05 AM
Post by www.r10.net küresel ısınmaya hayır seo yarışması on December 26, 2007 10:07 AM
Post by www.r10.net küresel ısınmaya hayır seo yarışması on December 27, 2007 6:40 PM
Post by hikaye on December 28, 2007 12:06 PM
Post by oyun on December 30, 2007 5:13 PM
Post by çocuk oyunları on December 30, 2007 5:15 PM
Post by forum on December 31, 2007 9:24 AM
Post by msn nickleri on December 31, 2007 10:14 AM
Post by www.r10.net küresel ısınmaya hayır seo yarışması on December 31, 2007 6:19 PM
Post by kozmetik on January 4, 2008 7:10 PM
Post by Web Site Çeviri on January 14, 2008 12:04 PM
Post by varmısın yokmusun on February 4, 2008 2:38 AM
Post by Kolay Gelsin on February 6, 2008 6:23 PM
Post by yarisma on February 7, 2008 3:27 PM
Post by çocuk oyunları on February 8, 2008 10:47 AM
Post by Aşk şiirleri on February 15, 2008 3:54 PM
Post by iyinet webmaster forumu 2008 seo yarışması on February 22, 2008 10:57 PM
Post by birthday gifts on March 16, 2008 7:09 PM
Post by ttnet on March 17, 2008 4:21 PM
Post by Prefabrik Kabin Konteyner on March 21, 2008 4:06 PM
Post by travesti on March 26, 2008 2:43 AM
Post by 註冊營養師 on April 9, 2008 8:33 AM