Allow "Description" field to be used in Lightbox display

And same for image nodes. Could there be an option to use the body of the image node as the caption when displayed in the lightbox.

The body text for any node can not be the caption in the lightbox, as it could be any length. There is already a solution in place for that. On the automatic settings page (admin/settings/lightbox2/automatic), just choose the "HTML content" handler for "image nodes". If you need to theme this page, then use the page-node-lightbox2.tpl.php that comes with lightbox2 module. It's for the garland theme, but you can easily modify it for your theme - just copy it to your theme's directory and adjust as needed.

I still need to look into showing the imagefield file description in the lightbox. If the text field isn't too long, then I should be able to add it as an option to display.

Cheers,
Stella

Fixed in the latest dev release, available later today.

Cheers,
Stella

Well, almost fixed... :-) In lightbox2.formatter.inc, lines 143 and 144 are now:

  $image_title = (!empty($image_data['title']) ? $image_data['title'] : $image_data['alt']);
  $image_title = (!empty($title) ? $title : $image_data['description']); // If filefield, we need the description field text instead.

But that is probably not what you meant, as line 144 uses $title instead of $image_title. So presumably that line should be:

  $image_title = (!empty($image_title) ? $image_title : $image_data['description']); // If filefield, we need the description field text instead.

Even so, the "description" field will only be used here if both the "title" and "alt" tags are empty, which is probably not what capellic had in mind. I would suggest something like the following instead:

  $image_title = $image_data['description']; // If filefield, we need the description field text
  $image_title = (!empty($image_title) ? $image_title : $image_data['title']);
  $image_title = (!empty($image_title) ? $image_title : $image_data['alt']);

Anyway, I hope that helps.

jsheffler: thanks. I've gone with the first method (fixing the typos), 'title' and 'alt' are only set for imagefields, and 'description' is only set for filefields, so regardless of the order of description vs title/alt, it should be correctly set.

Cheers,
Stella

It's no big deal to me, but as a point of clarification for those who care, the "description" field is actually available for imagefields, too, since an imagefield is essentially a specialized filefield...

Has this also been fixed for 5.x-2.x-dev? Or if not, is it going to be? I've had a request from a client to include the image descriptions in the lightbox view, and I've stuck with Drupal 5 thus far for any site where image galleries are used because the Image module itself is still in alpha for v.6.

This was only an issue in 6.x-1.x The 5.x version is already using the image description in the lightbox.

spidersilk: note, this issue and fix is only about the 'description' attribute of CCK filefields. We're not referring to the body text of image nodes, etc. If you want to show the body text of image nodes in a lightbox, then please use the "html content" automatic display option, combined with the template file changes from the "Opening node content in a lightbox" section on http://drupal.org/node/252260

Currently, there is the following problem:
Imagefields consist of the following fields: 'title', 'alt' and 'description'. To output valid XHTML you have to enter something for 'alt'. However, the image's description only gets displayed in Lightbox if there was nothing entered for the 'alt'-field. So, currently there does not seem to be any way to output valid XHTML AND display the image's description in Lightbox.

I think, to prevent this problem, we should really change the code to method #2, which jsheffler presented in comment #4.

Fixed, will be included in the next dev release, available later today.

Cheers,
Stella

Released in Lightbox2 6.x-1.9 and 5.x-2.9.

Cheers,
Stella

Hey guys. Thanks for all your work...

I'm confused though. I have the latest version and I can't seem to get it to work. Where do I configure this?
I have a cck imagefile field. I have enabled custom titles and descriptions for the images. When I open a Lightbox with the image, the only thing that's being displayed is the description in bold. No title. How do I display the title in bold and the description normally underneath that?

Thanks

I'm often on such short deadlines I can't wait for things to be patched and often have to hack things myself so on the site I'm working on now I hacked in an image description, so I get title in bold with image description below, in the lightbox like this:

I made these changes to Lightbox.js in the js folder of the lightbox2 module:

1. In the initialize function:
I changed this line:
var caption = '<span id="caption"></span>';
to this:

var caption = '<span id="caption"></span>';
var desc = '<span id="desc"></span>';

Then I add my description to the image details by changing this line:
$('#imageDetails').append(caption + numberDisplay);
to this
$('#imageDetails').append(caption + desc + numberDisplay);

2. In the updateDetails function:
I duplicated this code:

var caption = Lightbox.imageArray[Lightbox.activeImage][1];
if (!caption) caption = ' ';
$('#caption').html(caption).css({'zIndex': '10500'}).show();

and changed every reference to caption to desc, and changed 1 to 2 to access the third (alt) element in the array, so I ended up with this:

var caption = Lightbox.imageArray[Lightbox.activeImage][1];
if (!caption) caption = ' ';
$('#caption').html(caption).css({'zIndex': '10500'}).show();

var desc = Lightbox.imageArray[Lightbox.activeImage][2];
if (!desc) desc = ' ';
$('#desc').html(desc).css({'zIndex': '10500'}).show();

3. In the start function:
I changed this:

// Set the title for image alternative text.
var alt = imageLink.title;
if (!alt) {
  var img = $(imageLink).find("img");
  if (img && $(img).attr("alt")) {
    alt = $(img).attr("alt");
  }
  else {
    alt = title;
  }
}

to this

var alt = $(imageLink).attr("alt") ? $(imageLink).attr("alt") : imageLink.title;

and because on the site I'm setting up now I'm working with grouped images I also changed this:

// Loop through anchors and add them to imageArray.
for (i = 0; i < anchors.length; i++) {
  anchor = anchors[i];
  if (anchor.href && $(anchor).attr('rel')) {
    var rel_data = Lightbox.parseRel(anchor);
    var anchor_title = (rel_data["title"] ? rel_data["title"] : anchor.title);
    if (rel_data["rel"] == rel) {
      if (rel_data["group"] == rel_group) {
        if (Lightbox.isLightframe || Lightbox.isModal) {
          rel_style = rel_data["style"];
        }
        Lightbox.imageArray.push([anchor.href, anchor_title, alt, rel_style]);
      }
    }
  }
}

to this:

// Loop through anchors and add them to imageArray.
for (i = 0; i < anchors.length; i++) {
  anchor = anchors[i];
  if (anchor.href && $(anchor).attr('rel')) {
    var rel_data = Lightbox.parseRel(anchor);
    var anchor_title = (rel_data["title"] ? rel_data["title"] : anchor.title);
    var anchor_alt = $(anchor).attr("alt") ? $(anchor).attr("alt") : anchor.title; // Added this line
    if (rel_data["rel"] == rel) {
      if (rel_data["group"] == rel_group) {
        if (Lightbox.isLightframe || Lightbox.isModal) {
          rel_style = rel_data["style"];
        }
        Lightbox.imageArray.push([anchor.href, anchor_title, anchor_alt, rel_style]); // Changed alt to my new anchor_alt variable
      }
    }
  }
}

I realize this depends on me either writing my imagefield descriptions in the alt field or using the imagefield description as the alt for my images. And Lightbox will now use the image description instead of the image title as alt for the images, but that doesn't bother me. As far as I care it works for this site. :)

I'm guessing it's the lack of extra attributes that makes this hard to fix, but I noticed you can have something like this in the rel attribute "lightbox[group][caption]". Why can't this be "lightbox[group][description]"? We already have the title attribute for our titles. Just a suggestion. :)

Thanks for posting that code, TwiiK, I'll give it a try.

This would be great to have implemented in the lightbox2 module so that both title and description fields could be displayed together for an image. Seems from looking through the issues that many other people would like to see this as well.

It looks like this one opens and closes at will, but I did finally find a way to get node descriptions to come up in the lightbox without having to resort to a full page load using the "HTML Content" approach. My biggest motivation was the fact that the D6 site I'm working on is using a migrated old-school theme, so .tpl files aren't even an option - and I'm not about to re-theme the entire site just for this feature.

If anyone is interested, this is all I did to get the image body field to load up:

1. Add the "Node: Body" to the fields selected by the image_gallery view.
2. Added the following snippet to my main CSS file:

/**
 * Rules for Lightbox2 to use image body field - flavor to taste.  First one hides the generated body field, so is kind of necessary
 */
.image-gallery-nodes .images .views-row .views-field-body {
  display: none;
}
div#lightbox p.views-field-body {
  font-weight: normal;
  text-align: justify;
}
span#numberDisplay {
  font-weight: bold;
}

3. Then I modified js/lightbox.js per the attached patch against 6.x-1.9.

Pretty similar to TwiiK's solution for using the existing alt element. It ain't pretty, but it does work pretty well. I was trying to avoid rewriting too much of the existing code or messing with the hard-coded array indices... Figured between Views and jQuery I could get the data into the page and in the lightbox display without too much suffering... ;)

arpieb - Your solution is great. Thank you!
This solution is perfect if you are using a wysiwyg editor on your site. If you are not, do everything as mentioned in this post but change the following two line of code in patch before applying. They are:

var image_body = $('.field-content p', $(imageLink).parent().parent().siblings('.views-field-body')).html();

and

var anchor_image_body = $('.field-content p', $(anchor).parent().parent().siblings('.views-field-body')).html();

Should be this:

var image_body = $('.field-content', $(imageLink).parent().parent().siblings('.views-field-body')).html();

and

var anchor_image_body = $('.field-content', $(anchor).parent().parent().siblings('.views-field-body')).html();

respectively.

This patch no longer works with the latest stable version of lightbox2. I have also tried to apply it manually (and followed the patch instructions) without success. Also, there is no view named image_gallery. Does this work any more? Its possible I am just messing things up, but I think there have been code changes that broke the patch.

@archer007 - as noted in my patch comment, it was against the 6.x-1.9 release of the code. It's now at 6.x-1.11, so I'm sure some changes have been made in that area as it appears to be the core of the Lightbox2 JS code. Some adaptation might be required at this point... Unfortunately I'm busy trying to roll out the next release of another module right now, so I can't dig into it myself, and my client hasn't screamed yet for the latest release of Lightbox2 so I haven't had to look into it... ;)

The image_gallery view is defined if you have the Image module installed and have the included Image Gallery module enabled.

So ...... Is the description field now printing in Lightbox2 when the image pops up? I have the description field when uploading images to a node, and I enter info into it, but nothing prints in the light box. I have not found a setting that seems to enable description fields to print either .... Do we have to hack?

Thanks!

fixed in 7.x-2.0
if you want this fix then please upgrade to 7.x-2.0