| Project: | Image Caption |
| Version: | 6.x-2.3 |
| Component: | Code |
| Category: | bug report |
| Priority: | critical |
| Assigned: | Tim.PopZap |
| Status: | active |
Issue Summary
I've set up image caption and for all intents and purposes it works, but there is one bug that hampers it's functionality for the average user.
When browsing my test page (http://drupal.pop-zap.com) in Firefox, occasionally an image will not show its caption and will instead have the article text overlayed on the image, as though the image is not there at all. This problem can occur in both teaser and full views. We are going live tomorrow and I really want to be able to use Image Caption, so I am hoping that someone can give me some insight.
Here is what I have tried so far, and how I have (somewhat) isolated the problem:
- Issue only apparent in Firefox. Non-issue in IE. Haven't tried other browsers
- Tried older versions of Firefox as the newest one has some known Javascript issues. This seemed to alleviate the problem temporarily, but it is now back. May need a cleaner sweep of Firefox uninstall, however the average user will not tolerate this... (see my post about what seemed like the fix here: http://drupal.pop-zap.com/news/important-if-you-are-a-firefox-user-pleas...)
- The issue occurs whether or not the caption and caption container are themed (i.e. even when I remove those options from the CSS and only leave .caption: {}, it still happens)
- Refreshing the page fixes it on first try
- It seems more likely to happen upon a clean load (no cached pages or cookies)
- It does not happen upon every clean load
- I have tried both FCKEditor and TinyMCE as WYSIWYGs and the problem persists across both
- It doesn't happen to all images on the page, which is most peculiar as I would assume if it is a rendering problem it would either render all or none
- Sometimes the image gets "pushed" under a block on the right, instead of being overlapped. I've only seen this with right-aligned images
-This issue is persistent over multiple computers and versions of Firefox (have tested 3 PCs with v2.0.0.14, 2 with v2.0.0.12 and 1 with v2.0.0.13)
If you can't get your browser to display the bug, here is a screenshot: http://drupal.pop-zap.com/images/image_caption_screenshot.jpg. I will post one of the "image hidden under right block" as soon as it does it again.
If David or anyone else could please help me with this, I would be extremely grateful!
-Tim
| Attachment | Size |
|---|---|
| image_caption_screenshot.jpg | 551.46 KB |
Comments
#1
Attached is an example of an image being covered by a block on the right. That weird black vertical rectangle with a red tip at the bottom is supposed to be a 200px width, right-aligned image in the article.
#2
weird,
I can't actually replicate this bug in Firefox, I've tried a few times but it's looking fine on the dev site to me.
Are there any javascript errors shown in firebug or the javascript console?
It could be related to some interaction with other js stuff on your site preventing the script to fully load or run properly.
You might be able to fix it by tweaking the module weight of the image_caption module in the system db table (e.g -2).
regards,
DT
#3
I can now consistently replicate the bug demonstrated in the second screenshot. The easiest way to do this is by clearing your private data (including browsing history, cache, etc.), close Firefox, reopen it, head to the dev site (drupal.pop-zap.com), then click on the third article down (the teaser) titled: Stage Presence: Vampire Weekend, YACHT - April 3, 2008 @ The Triple Rock Social Club in Minneapolis. Once you get there, if you scroll down to the second image, it should look the same as it did in my second screenshot.
I tried changing the weight of the module in my system db table but unfortunately that didn't help.
I've used Firebug only sparingly so I'm not sure what I'm looking for there, but there are plenty of warnings in my error console which I am not knowledgeable enough to understand. I believe there is some type of conflict. Could it be with Panels perhaps? I can now confirm that Panels was NOT conflicting. I removed it entirely and still have the same bug.
#4
Well I found a solution, although it doesn't involve the Image Caption module. I implemented this tool: http://lab.arc90.com/2006/07/image_caption_1.php as referenced here: http://drupal.org/node/124616 and managed to end up with my desired result.
David, thank you for your help, and thank you for a fine module. I suspect my case was rare and most people will be more than happy with it.
#5
#6
Hi,
i have to reopen this issue, because i have still the same problem like in the first post. Sometimes text overlays the image (see attachement).
A look in the HTML-Code shows me:
Have anyone else the same problem respectively a solution?
Thanks in advance.
#7
I think this is caused by the image not being ready in the DOM. If I specify the width and height in the source (like from tinymce), it always works. If I don't specify the width and height in the source, it happens intermittently. I think a good solution would be to wait on the images to be ready if the calculated width is zero.
Here's a drop in replacement for image_caption.js that seems to fix the issue (and a few others - notes below)
/*$Id: image_caption.js,v 1.1 2008/02/23 06:24:07 davidwhthomas Exp $*/
$(document).ready(function(){
$("img.caption").each(function(i) {
if ($(this).width()) {
// This image has a width and is ready to go
process_image(this);
} else {
// This image has a width of zero and may not be completely loaded,
// so we'll wait for the load event
$(this).load(function(){
process_image(this);
});
}
});
});
function process_image(img) {
var imgwidth = $(img).width();
var imgheight = $(img).height();
var captiontext = $(img).attr('title');
var alignment = $(img).attr('align');
// Do not display a caption if the title attribute is blank
if (captiontext) {
$(img).attr({align:""});
// Add an alignment class to the container so we can style margins and padding
if (alignment == 'left' || alignment == 'right') {
$(img).wrap("<div class=\"image-caption-container\" style=\"float:" + alignment + "\"></div>");
$(img).parent().addClass('float_' + alignment);
} else {
$(img).wrap("<div class=\"image-caption-container\"></div>");
}
$(img).parent().width(imgwidth);
$(img).parent().append("<div class=\"image-caption\">" + captiontext + "</div>");
}
}
I'm attaching the whole file since I'm not great with cvs and it's a fairly large change on a fairly tiny file.
This does a few things...
Waits for the load event to fire before adding a caption if the calculated image width is zero.
Doesn't add a caption if the title is not set. This way you can globally set the caption style if you want (think cck image fields).
Adds a class to the container for left or right alignment so you can add alignment-specific margins and padding.
#8
Thanks for the patch, I'll look into it further.
regards,
DT
#9
Sorry, but I'm not sure the set timeout code solved the problem. But the other two tweaks enabled me to use image caption for my current project . I ended up specifying my image width and heights pro grammatically - which may not always be possible.
#10
I've had the same problem, with multiple images overlapping each other or text on top of an image.
In my css I have div.image-caption-container set to float: left
looking at the affected page with firebug reveals this:
<div class="image-caption-container" style="width: 0px;">if I reload the page the correct image width appears and the images snap into place...
#11
This problem still exists even in the Drupal 6 version. I have only been testing out this module today and the script ignores the widths of the images and adjusts the caption incorrectly. This produces the overlap.
#12
This is a modification of the javascript (image_caption.js) and takes into account external width due to the margin and padding attributes.
$(document).ready(function(){
$("img.caption").each(function(i) {
var imgwidth = $(this).width();
imgwidth += parseInt($(this).css("padding-left"), 10) + parseInt($(this).css("padding-right"), 10);
imgwidth += parseInt($(this).css("margin-left"), 10) + parseInt($(this).css("margin-right"), 10);
imgwidth += parseInt($(this).css("borderLeftWidth"), 10) + parseInt($(this).css("borderRightWidth"), 10);
var imgheight = $(this).height();
var captiontext = $(this).attr('title');
var alignment = $(this).attr('align');
$(this).attr({align:""});
$(this).wrap("<div class=\"image-caption-container\" style=\"float:" + alignment + "\"></div>");
$(this).parent().width(imgwidth);
$(this).parent().append("<div class=\"image-caption\">" + captiontext + "</div>");
});
});
Thanks to Roberto from http://speedtech.it/ and sponsored by http://www.leftrightminds.com