.caption not allowing float?
awolfey - August 27, 2008 - 20:40
| Project: | Image Caption |
| Version: | 6.x-2.3 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | reviewed & tested by the community |
Jump to:
Description
I'm having a problem not being able to float images when I'm using the caption class:
This does not float:
<p><img class="caption" src="/files/u6/Andreu_roubaix.jpg" alt="Andreu at Roubaix" title="Andreu at Roubaix" width="330" height="500" style="margin: 10px; float: left;" /></p>This does:
<p><img src="/files/u6/Andreu_roubaix.jpg" alt="Andreu at Roubaix" title="Andreu at Roubaix" width="330" height="500" style="margin: 10px; float: left;" /></p>css is:
.caption {}
.image-caption
{
margin-top: 5px;
margin-right: 0pt;
margin-bottom: 10px;
margin-left: 5px;
background-color: #f9f9f9;
font-weight: bold;
font-size: 80%;
color: #4a4b4d;
}
.image-caption-container
{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 0pt;
margin-left: 10px;
}
So it doesn't look like it's the css.
Thanks
#1
Here's a perfect example:
http://www.velocitynation.com/node/2204
You can see everything is floating correctly, then js puts the caption in and the float is gone.
#2
I am also experiencing this. This is extremely annoying... why would I want to caption an image if it's just going to sit and be ugly in the middle of the page?
#3
Perhaps you could try floating the .image-caption-container rather than the image itself.
.image-caption-container{float:left;
}
I tested that with Firebug on the sample link provided and it works fine.
Otherwise, try using the input format version of image caption.
DT
#4
Yes, that would work on its own as either left or right float, but not with tinyMCE, which allows the users to apply left or right float on their own.
#5
I'm having the same problem -- there needs to be a way for the float to be translated from image itself to the image-caption-container
There's already a provision for this if the tag contains an align attribute
#6
Image_caption looks for the align attribute, but tinymce is aligning images with float, which it puts in an inline style. Image_caption removes all inline style settings except for the align attribute. Therefore, no float
Here's my solution.
I just switched style for align in the image_caption js:
/*$Id: image_caption.js,v 1.1 2008/02/23 06:24:07 davidwhthomas Exp $*/$(document).ready(function(){
$("img.caption").each(function(i) {
var imgwidth = $(this).width();
var imgheight = $(this).height();
var captiontext = $(this).attr('title');
var imgstyle = $(this).attr('style');
$(this).attr({align:""});
$(this).wrap("<div class=\"image-caption-container\" style=\"" + imgstyle + "\"></div>");
$(this).parent().width(imgwidth);
$(this).parent().append("<div class=\"image-caption\">" + captiontext + "</div>");
});
});
#7
I should add that my solution will probably break alignment using the align attribute because that needs to be applied to #image-caption-container div, and I took it out of that.
#8
Is this http://drupal.org/node/103211 related ?
#9
No, this is not related to missing css.
#10
awolfey - I had the exact same problem you experienced. To resolve the "alignment" conflict I slightly modified the JS you provided and so far it seems to work. Further testing is still needed.
The following replaces the image_caption.js found within the module.
$(document).ready(function(){$("img.caption").each(function(i) {
var imgwidth = $(this).width();
var imgheight = $(this).height();
var captiontext = $(this).attr('title');
var style = $(this).attr('style');
var alignment = $(this).attr('align');
//Clear image styles to prevent conflicts with parent div
$(this).attr('style','');
$(this).wrap("<div class=\"image-caption-container\" style=\"" + style + "; text-align: " + alignment + "\"></div>");
$(this).parent().width(imgwidth);
$(this).parent().append("<div class=\"image-caption\">" + captiontext + "</div>");
});
});
#11
I have applied the fix in #10 to my site and it seems to be working great. Could this get rolled into the next release?
#12
hahahahahah!
quit your whining, I don't see you on a list of 100 top donors, sistah.
as for the issue at hand, the above solution does not work for me.
#13
upon clearing my cache I'm happy to report that its working perfectly.
#14
Please let us know if there's any more work that needs to be done on this. Otherwise it sounds like it can be rolled into the next release.
(Does this project have/need an active maintainer?)
#15
This may be a duplicate of this issue, actually:
http://drupal.org/node/461798
#16
@gregarios - I think these issues may be similar, but they're not duplicates. That issue seems to be related to Image Caption stripping classes, this one is related to stripping inline styles.
#17
Is this going to get addressed by a maintainer at all? We seem to have a fully working patch, and I'd love to get this out of my issue queue at long last (we're going on 10 months here!)
#18
Works great, thanks for the patch. Would also like to see this get committed.