There was a setting in thickbox to set which image derivative to display in the thickbox. The attached patch creates this same functionality. This is a multiple file patch so apply it from the modules directory.
Changed:

  1. colorbox.admin.inc - added setting to admin form
  2. colorbox.module - added "image_derivative" setting to js settings in _colorbox_doheader (hook_init)
  3. js/colorbox_image_module.js - integrates image_derivative setting into auto linking ... my attempt at making it more general instead of just linking "thumbnail" images
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

frjo’s picture

Thank you very much for contributing all these Image module integration improvements!

I don't use the Image module myself so I depend on people like you.

How well tested is this?

recrit’s picture

i have had it working on a development site with no issues. ColorBox uses the correct derivative setting when linking the image-attach-body. I believe thickbox linked the gallery thumbnails too, so that's a possible addition to the javascript.

recrit’s picture

here's a re-roll with added support for image galleries - ul.images a, added to js/colorbox_image_module.js

frjo’s picture

Title: Image module - image derivative setting, gallery and image attach support » Image module - image derivative setting
FileSize
5.71 KB

I have now tested your patch and it seems to work well. I have made some adjustment that I hope you have time to look at and test.

* Some minor naming changes.
* Replace $("a[rel='image-gallery']", context).colorbox(); with simply adding a colorbox class with $(this).addClass('colorbox');
* Make colorbox_image_module.js load before colorbox.js, so the above work
* Some performance improvements in colorbox_image_module.js, mainly .image-attach-body -> div.image-attach-body selector, and adding initColorboxImageModule-processed check.
* Adding the image title to the image link so it shows up in Colorbox

If it works well for you I will commit it and make it part of the beta 3 release.

frjo’s picture

Title: Image module - image derivative setting » Image module - image derivative setting, gallery and image attach support
recrit’s picture

Title: Image module - image derivative setting » Image module - image derivative setting, gallery and image attach support

I've tested and everything works, thanks!

I'm still tossing around the lines below from my original js code.

    // Determine if we need to link
    if (derivative == '_original' || derivative == settings.image_derivative) {
      return true;
    }

This makes sense since when dealing with a gallery or image attach because all the images are the same derivative. But if the images on the page are mixed derivatives - example: thumbnails, original, preview -- then the original and preview's won't get colorboxed and won't show up in the colorbox gallery slides. Removing these lines can eliminate any of this confusion.

recrit’s picture

Changes to patch:

  1. js/colorbox_image_module.js - removed the following:
        // Determine if we need to link
        if (derivative == '_original' || derivative == settings.image_derivative) {
          return true;
        }
    
  2. colorbox.module - added an access check for 'view original images'. If image derivative is '_original' and user does not have 'view original images' access then js is not added. This eliminates exposing the original image.
frjo’s picture

I added some comments, replaced "_original" with IMAGE_ORIGINAL like in the Image module and added/removed a couple of spaces.

Give an OK to it and I will commit it.

recrit’s picture

I believe its OK to commit in this state. This is obviously a weak link with the image module which results in these crazy auto js files...

Some things to note about colorbox_image_module.js :

  • if the found derivative is '_original', it will result in no replacement since it attempts to replace '._original' with the settings.image_derivative. To accomplish this, you would have to replace the file extension (.jpg) with settings.image_derivative + '.' + extension... I don't believe this extra work is needed since the original image is most likely the largest.
  • '_original' is used in the js code... if ambitious, could push IMAGE_ORIGINAL into a settings.colorbox.IMAGE_ORIGINAL
  • this will still run into the issue #125610: Incorrect behaviour with image.module, but having this setting is more flexible if a solution is found for the missing files. If users have problems, they can just change the setting to original and accomplish the same result that is described in #125610
frjo’s picture

Status: Needs review » Fixed

Committed to 6-dev. Thanks again for this excellent contribution to ColorBox!

You are right that the whole colorbox_image_module.js is a bit of a hack. It would be a lot nicer if the Image module could add some Colorbox/Lightbox2 etc. integration.

recrit’s picture

not sure on the etiquette but you could override the image modules theme function all together.... for maintaining you would have to keep up with releases of image module.
I have tested with the code below and it will link the colorbox anywhere image calls theme('image_display'), ie this even works for custom views or anywhere for that matter.

This would go into the colorbox.module:

/**
 * Theme an img tag for displaying the image.
 */
function phptemplate_image_display($node, $label, $url, $attributes) {
  $title = isset($attributes['title']) ? $attributes['title'] : $node->title;
  $alt = isset($attributes['alt']) ? $attributes['alt'] : $node->title;
  $image = theme('image', $url, $alt, $title, $attributes, FALSE);

  if (variable_get('colorbox_auto_image_nodes', 0)) {
    $image_derivative = variable_get('colorbox_image_derivative', IMAGE_PREVIEW);
    if ($node->images[$image_derivative]) {
      return l($image, $node->images[$image_derivative], array('html' => TRUE, 'attributes' => array('title' => $title, 'class' => 'colorbox', 'rel' => 'image-gallery')));
    }
  }

  return $image;
}

kiwi_steve’s picture

Just a thought: Isn't the image module one of Sun's babies? Wouldn't it be better to talk to him (& include him?) and work something out rather than create a cludge that will probably break at some point through the simple fact that he doesn't realise you're working around certain aspects of his module.

Having this work with the Image module is one of the single most-important features for this module IMHO... so I would like to see it developed in the right direction with the right support from the right people - so far so good.

And I'd like to thank everyone who's working on this module - its made a huge difference to the presentation of a couple of sites I'm working on, and I'm learning a bit about how stuff works behind the scenes by reading these posts and trying to follow the code.

2 thumbs up :)

Steve

recrit’s picture

theme override in #11 causes problems with img_assist and would need to have some conditions before applying the link, ie check if arg(0) == 'img_assist'... this could turn out more troublesome than the js method...
thoughts?

I'm all for a cleaner way of doing this, but from past issues it looks like thickbox was forced to do it this with js.

frjo’s picture

I don't think it’s a good idea to include a theme override in another module. An option is to have instructions in the README so users can do it in their own themes.

There are a setting "Deactivate Colorbox on specific pages" and by default it includes "img_assist*".

The absolutely best would of course be native support built in to the Image module.

I suggest that you who are using the image module and Colorbox module contact joachim and sun and talk about this. Start by making a feature request in the issue queue for the Image module.

http://drupal.org/project/issues/image

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.