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
}

Write a Comment

Comment