Download & Extend

Captions with Hyperlinks and Image Alignment

Project:Image Caption
Version:6.x-2.3
Component:Code
Category:task
Priority:normal
Assigned:Unassigned
Status:needs review

Issue Summary

The following change to code in image_caption.js allows images to have captions, including hyperlinks and left or right alignment.

<?php
/*$Id: image_caption.js,v 1.2 2008/03/07 05:46:23 davidwhthomas Exp $*/
$(document).ready(function(){
  $(
"img.caption").each(function(i) {
    var
imgwidth = $(this).width();
    var
imgheight = $(this).height();
    var
captiontext = $(this).attr('title');

     var
alignment = $(this).css('float');
   
/*$(this).attr({align:""});*/
   
$(this).wrap("<div class=\"image-" + alignment + " \"></div>");

    $(
this).parent().width(imgwidth);
    $(
this).parent().append("<div class=\"image-caption\">" + captiontext + "</div>");
  });
});
?>

I'm using the TinyMce Image Dialog under IMCE Wysiswg API Bridge.

I added styles for .image-caption .image-right and .image-left

Comments

#1

I think from the point of view of Image Caption, which has to support other editors besides TinyMCE, it's better to use the float as a fall-back, rather than rely on it exclusively. The problem appears to be that TinyMCE positions images using float, rather than align, but Image Caption currently relies upon align. The attached patch seems to capture the best of both worlds.

AttachmentSize
image_caption.js_.patch 624 bytes

#2

Thanks for this patch, works better with CKEditor now!

One thing though... it's bad form to have 's inside of anchors so I switched them to 's (and set them to display: block with css). No biggie, just mentioning one change I made.

#3

I tried both patches and neither work with right aligned images. I'm running 6.x with WYSIWYG API and FCK 2.6.

nobody click here