Revamped Captions with jQuery, CKEditor and IMCE

October 24
blog author

Appno Blogger

Appnovation Coop

(Consider this a re-vamping of Scott's original post, located here.) One of my recent projects was for a client who wanted to place inline images - and potentially captions - into the body text of a node, without any HTML knowledge. I decided to use Scott's solution, reworked to suit my client's needs. One thing I felt was missing in the original script was the ability to set margins based on which way the image was floating: I only want to set margins on the right side if the image is floating left, and on the left side if it is floating to the right, otherwise my image will not be flush with the margins of the article itself. I also wanted to add imagecaching ability so that the image could be clicked on and enlarged, since it would most likely be scaled down to fit in the article. So, if you are going to follow my lead, be sure to create an imagecache preset, unless you want the image to open to its original (and potentially too large) size.

.caption { 
	margin-top: 0;
	color: #935423;
	font: italic 14px Cambria, Georgia, serif;

Styling the captions that would be appearing underneath the image. Setting 0 as a top margin enables the caption to stay flush to the bottom of the image. Make sure to do this, otherwise you might get margin rules from somewhere else that cause the caption to get pushed down. Upload the image, make sure to type out the caption in the "alt" attribute textbox, and float your image either right or left using the "alignment" dropdown (FCKEditor and CKEditor provide this option, I'm not sure about other WYSIWYG modules) . On to the fun part - adding the caption, float and imagecache with js.

Drupal.behaviors.ArticleCaptions = function(context) {  
  //Find all images in the body and run a function on each of them
  $('.article img').each(function(i) {
    //Grab the alt attribute from the current image.
    var caption = $(this).attr('alt');

    //Grab the src attribute from the current image.
    var imgSrc = $(this).attr('src');

   //Grab the width of the image.
 		var imgWidth = $(this).width();

		//Find out which way the image is floating so that you can set proper margins
   	var img_float = $(this).css("float");

		//Setting the path for imagecache
    var fileDirectoryPath = $('#file_directory_path').val();
    var presetPath = imgSrc.replace(fileDirectoryPath, fileDirectoryPath + '/imagecache/article-inline-image');
		//Apply the float, margins and width
		//Pop a div tag with class caption after the current img tag. Make sure to provide an if, in case the image doesn't have a caption.
    if(caption) {

		//Wrap the image in a lightbox or other modal for the enlargement.

Include this js file in your theme's .info file or on the page(s) where you want it to fire.

drupal_add_js(drupal_get_path('theme', 'yourtheme') . '/js/caption.js');

Now you should have an image with a caption, proper padding, and clickable to open a larger version. Modules used were: CKEditor, IMCE.