in Web & Tech

Render desired image presets as colobox links from within Drupal templates

Updated: 2014/04/16

A little helper function I almost forgot about and dug out today again. For future me:

<?php
/**
 * Get Colorbox Link
 * Takes an image object and two styles and creates an image tag with the first style
 * that opens the the second style inside a colorbox
 * @param array $image Image object that will be displayed
 * @param string $style_name Image style to display the image
 * @param string $style_name_colorbox Image style to be displayed inside the colobox overlay
 */
  function _colorbox_link($image, $style_name = 'medium', $style_name_link = 'large') {
    if(isset($image)) :
    $image_style = theme('image_style', array(
      'style_name' => $style_name,
      'path'       => $image['uri'],
      'alt'        => $image['alt'],
      'title'      => $image['title']
    ));

    $url = image_style_url($style_name_link, $image['uri']);

    $link = l($image_style, $url, array(
      'html' => TRUE,
      'attributes' => array(
        'rel' => array('colorbox-gallery'),
        'class' => array('colorbox colobox-template')
    )
    ));

    return $link;
    endif; //if isset
  }

// Little variation of _colorbox_link(): Takes an image object and displays it with the desired preset
  function _get_image_style($image, $style_name) {
    $image_link = theme('image_style', array(
      'style_name' => $style_name,
      'path'       => $image['uri'],
      'alt'        => $image['alt'],
      'title'      => $image['title'],
      'attributes' => array('class' => 'no-colorbox')

    ));
    return $image_link;
  }

Just put this into your theme’s template.php and use it from whichever template file you like.

Update

I just added a fourth parameter $show_caption that, if set to TRUE, allows to print the image’s title attribute as a caption below the image

<?php
/**
 * Get Colorbox Link
 * Takes an image object and two styles and creates an image tag with the first style
 * that opens the the second style inside a colorbox
 * @param array $image Image object that will be displayed
 * @param string $style_name Image style to display the image
 * @param string $style_name_colorbox Image style to be displayed inside the colobox overlay
 * @param bool $show_caption Set to TRUE to show the title attribute as a caption below the image, defaults to FALSE
 */
function _colorbox_link($image, $style_name = 'medium', $style_name_link = 'large', $show_caption = FALSE) {
  if(isset($image)) :
    $image_style = theme('image_style', array(
      'style_name' => $style_name,
      'path'       => $image['uri'],
      'alt'        => $image['alt'],
      'title'      => $image['title']
    ));

    $url = image_style_url($style_name_link, $image['uri']);

    $link = l($image_style, $url, array(
      'html' => TRUE,
      'attributes' => array(
        'rel' => array('colorbox-gallery'),
        'class' => array('colorbox colobox-template')
    )
    ));
    if($show_caption) {
      $link .= '<p class="image-caption">'.$image['title'].'</p>';
    }

    return $link;
  endif; //if isset
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)