Support float: right|left; Compatibility with CKEditor, FCKEditor and Image Browser

I've modified it this way, so that the CSS 'float' property of the image is transfered to the div:

$(document).ready(function(){
  $("img.caption").each(function(i) {
    var imgwidth = $(this).width();
    var imgheight = $(this).height();
    var captiontext = $(this).attr('title');
    var alignment = $(this).attr('align');
    if (alignment == undefined || alignment == '') {
      alignment = $(this).css('float');
    }
    $(this).removeAttr('align');
    $(this).css('float','');
    $(this).wrap("<div class=\"image-caption-container\" style=\"float:" + alignment + "\"></div>");
    $(this).parent().width(imgwidth);
    $(this).parent().append("<div class=\"image-caption\">" + captiontext + "</div>");
  });
});

this one works with CKeditor module inserted images, otherwise captions are overlaying content, (as far as I can guess it has to do with height css property). Some css tweaks may be needed if style properties used in ckeditor.

Can you help me understand where you are making this change? And then is there a way to translate this to the input filter shipped with image_caption so there's a JS free way of doing this?

Definitely can't read since you clearly stated: I have modified image_caption.js

The second question if there's a way to do this sans JS/through the input filter still stands.

Thanks for your help.

Image Caption JS code for 2.5:

/*$Id: image_caption.js,v 1.2.2.3 2010/02/03 07:50:25 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).attr('align');
    if (alignment == undefined || alignment == '') {
      alignment = $(this).css('float');
    }
    $(this).css('float', '');

    var style = $(this).attr('style');
    //Clear image styles to prevent conflicts with parent div
    $(this).attr({align:""});
    $(this).attr({style:""});
    $(this).wrap("<span class=\"image-caption-container\" style=\"display:block;" + style + "; float: " + alignment + "\"></span>");
    $(this).parent().addClass('image-caption-container-' + alignment);
    if(imgwidth != 'undefined' && imgwidth != 0){
      $(this).parent().width(imgwidth);
    }
    $(this).parent().append("<span style=\"display:block;\" class=\"image-caption\">" + captiontext + "</span>");
  });
});

Patch:

diff --git a/sites/all/modules/content/custom/image_caption/image_caption.js b/sites/all/modules/content/custom/image_caption/image_caption.js
index 9dabc15..4c9a01d 100644
--- a/sites/all/modules/content/custom/image_caption/image_caption.js
+++ b/sites/all/modules/content/custom/image_caption/image_caption.js
@@ -4,8 +4,14 @@ $(document).ready(function(){
     var imgwidth = $(this).width();
     var imgheight = $(this).height();
     var captiontext = $(this).attr('title');
-    var style = $(this).attr('style');
+
     var alignment = $(this).attr('align');
+    if (alignment == undefined || alignment == '') {
+      alignment = $(this).css('float');
+    }
+    $(this).css('float', '');
+
+    var style = $(this).attr('style');
     //Clear image styles to prevent conflicts with parent div
     $(this).attr({align:""});
     $(this).attr({style:""});

Hi,

I think this can be safely commited and will enable Image Caption to work with more Editors, so I add a real patch and change status to "needs review".

Best Wishes,

Fabian (LionsAd)

Thanks, I will commit suitable patches that have been reviewed and tested by the community.
DT

Further to help support this should the container take its width from the style rather than form the image width= property.

This would allow for scenarios where the img tag does not use width property but rather uses style="width: 100px"

Line 66 would need changing to search for width: rather than width=

IE
//replaced preg_match ('/width=\"(.+?)\"/i', $imgText, $matches);
preg_match('/width: (.+?);/i', $imgText, $matches);

I guess the ideal scenario would be to assess both so that either was supported.

Sam

subscribing

I tested updated JS in #5 and it worked better for me.

I unset the style & align though rather than setting them to "" as seen in #1

    $(this).removeAttr('align');
    $(this).removeAttr('style');

Here is a short update code and patch:

Code:

/*$Id: image_caption.js,v 1.2.2.3 2010/02/03 07:50:25 davidwhthomas Exp $*/
$(document).ready(function(){
  $("img.caption").each(function(i) {
    var imgwidth = $(this).width();
    var imgheight = $(this).height();
    var captiontext = $(this).attr('title');
    if (captiontext == undefined || captiontext == '') {
      captiontext = $(this).attr('alt');
    }

    var alignment = $(this).attr('align');
    if (alignment == undefined || alignment == '') {
      alignment = $(this).css('float');
    }
    $(this).css('float', '');
    $(this).css('display', '');

    var style = $(this).attr('style');
    //Clear image styles to prevent conflicts with parent div
    $(this).removeAttr('align');
    $(this).removeAttr('style');
    $(this).wrap("<span class=\"image-caption-container\" style=\"" + style + "; float: " + alignment + "; display: inline;\"></span>");
    $(this).parent().addClass('image-caption-container-' + alignment);
    if(imgwidth != 'undefined' && imgwidth != 0){
      $(this).parent().width(imgwidth);
    }
    $(this).parent().append("<span style=\"display:block;\" class=\"image-caption\">" + captiontext + "</span>");
  });
});

Things new:

* use removeAttr instead of setting to "".
* allow usage of alt tag as caption.
* use inline for the container instead of block to fix IE issue.

New patch attached. Please test.

Best Wishes,

Fabian (LionsAd)

This needs to get comitted

Accidentally posted in the wrong thread, please disregard / delete this.

Doesn't seem to work for me. Only works for image that is not floated left or right and that is width of container --i.e. for image of 200px in content that is 600px, caption is 600px wide.

@#14: Okay, need to test this ...

Very technical for me (designer) Im using Image Caption + CKEditor the left/right float is not transfered to the style of the caption container (image-caption-container-XXX) Im reading all your solutions, but I dont know where to start.

ydga, checkout #1353198: Improvements to Image Caption's JS

I did this fusion of original code and Anrikun suggestion from #1, because text near the image was going through the caption text, with original code.
But the Anrikun solution was not completely good for me, because i use colorbox (lightbox plugin). When i was back from colorbox popup, the code was appending another caption text.

This was originally prevented by adding .caption-processed.

So i did quick fusion of two codes working for me. Someone maybe could find it useful:

(function($) {
  
Drupal.behaviors.image_caption = {
  attach: function (context, settings) {
    $("img.caption:not(.caption-processed)").each(function(i) {
      var imgwidth = $(this).width() ? $(this).width() : false;
      var imgheight = $(this).height() ? $(this).height() : false;
      
      // Get caption from title attribute
      var captiontext = $(this).attr('title');
      
      // Get image alignment and style to apply to container
      if($(this).attr('align')){
        var alignment = $(this).attr('align');
        $(this).css({'float':alignment}); // add to css float
        $(this).removeAttr('align');
      }else if($(this).css('float')){
        var alignment = $(this).css('float');
      }else{
        var alignment = 'normal';
      }
      var style = $(this).attr('style') ? $(this).attr('style') : '';

      // Reset img styles as are added to container instead      
      $(this).removeAttr('width');
      $(this).removeAttr('height');
      $(this).css('width', '');
      $(this).css('height', '');     
      $(this).removeAttr('align');
      $(this).removeAttr('style');
      
      //Display inline block so it doesn't break any text aligns on the parent contatiner
      $(this).wrap("<span class=\"image-caption-container\" style=\"display:inline-block;" + style + "\"></span>");
      $(this).parent().addClass('image-caption-container-' + alignment);
      
      // Add dimensions, if available
      if(imgwidth){
        $(this).width(imgwidth);
        $(this).parent().width(imgwidth);
      }
      if(imgheight){
        $(this).height(imgheight);
      }
      // Append caption
      $(this).parent().append("<span style=\"display:block;\" class=\"image-caption\">" + captiontext + "</span>");
      
      // Add class to prevent duplicate caption adding
      $(this).addClass('caption-processed');
    });
  }
};

})(jQuery);

I am closing this issue, which is for a not-supported Drupal version.