Brett Chang’s Blog

Making caption under images is a major pain in WordPress (I am running 2.1.2 currently).

I have devised a way to ease the pain. If you want to do the same, here are the 4 easy steps:



1. Find header.php file of your theme. Usually it’s here:

/myBlogDir/wp-content/themes/myTheme/header.php



2. Find where </head> is in header.php and add the following code right BEFORE it:

<script type="text/javascript">

/* addImgCaption() for WordPress */

/* written by: Brett Chang of evercloud.com */

var IMAGE_TRACKER = new Array();

function addImgCaption(myImgElem)

{

 var myParent = myImgElem.parentNode;

 var myParentParent = myImgElem.parentNode.parentNode;

 var myWrapperTable = null;

 var myNodeForAppend = myImgElem; function createTable(myImgElem, myNodeForAppend)

 {

  var eTable = document.createElement("table");

  var eTbody = document.createElement("tbody");

  var eTr = document.createElement("tr");

  var eTd = document.createElement("td");

  var eBr = document.createElement("br");

  var eCaption =  document.createTextNode (myImgElem.getAttribute('alt'));

//stylin'!

  eTd.style.textAlign="center";

  eTd.style.whiteSpace="nowrap";

  eTd.style.width=myImgElem.getAttribute("width")+"px";

  eTable.style.display="inline";

  eTable.style.padding="0px";

  eTable.style.borderCollapse="collapse";

//create the table structure

  eTd.appendChild(myNodeForAppend);

  eTd.appendChild(eBr);

  eTd.appendChild(eCaption);

  eTr.appendChild(eTd);

  eTbody.appendChild(eTr);

  eTable.appendChild(eTbody);

return eTable;

 }

 if(null == IMAGE_TRACKER[myImgElem.getAttribute('src')])

 {

if(myParent.nodeName == 'A'){

   myNodeForAppend = myParent;

   myWrapperTable = createTable(myImgElem, myNodeForAppend);

   myParentParent.appendChild(myWrapperTable);

  }

  else

  {

   myWrapperTable = createTable(myImgElem, myNodeForAppend);

   myParent.appendChild(myWrapperTable);

  }

  IMAGE_TRACKER[myImgElem.getAttribute('src')] = '1';

 }

}

</script>

3. Go compose your blog entry with the photos, in VISUAL or CODE mode.

If in Visual Mode: You MUST provide an image description.

If in Code Mode: You MUST provide a description within ALT attribute of the IMG tag.



4. When you are done, go into CODE mode of the editor and find your image. It usually willl look like this:

<img src=”http://www.evercloud.com/photos/….” title=”My Photography….”

alt=”Cool Photo” border=”1″ height=”133″ width=”200″ />

You are going to add an additional attribute to that img tag:

onload=”javascript:addImgCaption(this);”

The final version should look like this:

<img src=”http://www.evercloud.com/photos/….”
onload=”javascript:addImgCaption(this);” title=”My Photography….”
alt=”Cool Photo” border=”1″ height=”133″ width=”200″ />



VOILA!

You have to do the same for every single photo or image you have.



Check out an example.

Now, here’s the technical mumbo jumbo — so basically the gist behind this script is that I am creating a table surrounding the image at run time through DOM. The description and the image itself are separated by an <BR/> tag. And after the table is constructed, I would append it to the parent of the original IMG element. Now, the reason I chose TABLE over DIV is because, div is a major pain in the ass to deal with. You have to do more calculations as you need to clear the floats. TABLE, in this case, will not break easily and holds up quite well.

However, the caveat is that your images can’t have very long descriptions or else they might run out of the container. You can try taking out the whiteSpace:nowrap declaration within the script. By doing so, you will also run into problems where say you have two images next to each other, and one of them has extremely long wrapped description. In that case, the table containing the image with long description will be taller than the one next to it. Now, I am sure it’s possible to improve the script, but this is a good starting point.

*UPDATE. I had to bloat the script a bit so that it adds a global variable to see if you already create an table for the image. I will try to clean up the code later so it’s more object oriented.