Drupal Bootstrap: Image Gallery using Custom Field Formatter

I have an image field, using the the core image module, set to unlimited number of values. I want to create a custom field formatter so that these images are shown as thumbnails that when clicked pops up the Bootstrap image gallery. This gallery will be an extension to blueimp Gallery, a touch-enabled, responsive and customizable image and video gallery seen here: https://blueimp.github.io/Bootstrap-Image-Gallery/

In a module we need to use hook_field_formatter_info() to create our image formatter:

<?php
/**
 * Implements hook_field_formatter_info();
 */
function MODULENAME_field_formatter_info() {
  return array(
   
'MODULENAME_bootstrap_gallery' => array(
     
'label' => t('Bootstrap Gallery'),
     
'field types' => array('image'),
    ),
  );
}
?>

We then use hook_field_formatter_view() to build the output as a render array. This includes everything we need to display the Bootstrap image gallery:

<?php
/**
 * Implements hook_field_formatter_view();
 */
function MODULENAME_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {
 
$element = array(
   
'#prefix' => '
      <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
        <div class="modal fade">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
              </div>
              <div class="modal-body next"></div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left prev">
                  <i class="glyphicon glyphicon-chevron-left"></i>Previous
                </button>
                <button type="button" class="btn btn-primary next">Next
                  <i class="glyphicon glyphicon-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="container-fluid"><div class="row">'
,
   
'#suffix' => '</div></div>',
   
'#attached' => array(
     
'css' => array(
       
'//blueimp.github.io/Gallery/css/blueimp-gallery.min.css' => array(
         
'type' => 'external',
        ),
      ),
     
'js' => array(
       
'//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js' => array(
         
'type' => 'external',
        ),
      ),
    ),
  );
  foreach (
$items as $delta => $item) {
   
$thumb = array(
     
'#theme' => 'image_style',
     
'#style_name' => 'medium', // Insert your image style machine name here
     
'#path' => $item['uri'],
     
'#title' => $item['title'],
     
'#alt' => $item['title'],
    );
   
$main = array(
     
'#theme' => 'image',
     
'#path' => $item['uri'],
     
'#title' => $item['title'],
     
'#alt' => $item['title'],
    );
   
$element[$delta] = array(
     
'#markup' => '<a href="' . file_create_url($item['uri']) . '" title="' . $item['title'] . '" data-gallery>' . render($thumb) . '</a>',
    );
  }
  return
$element;
}
?>

The style_name name in the code above can be changed to whatever image style you choose. Next we need to override the field template so we can change the wrapper div around each field output. To do this we need to copy the field.tpl.php file located at modules/field/theme and place it in our themes template folder. Rename the template file so it overrides fields for that specific image field, more information about overriding fields here: http://api.drupal.org/api/function/theme_field/7. Note the grid classes I've used, this can be altered according to your design.


<?php foreach ($items as $delta => $item): ?>
<div class="col-sm-6 col-md-4 col-lg-3"><?php print render($item); ?></div>
<?php endforeach; ?>

As always, remember to clear your cache. Now head over to admin/structure/types/manage/ and click Manage Display on your content type, go to your image field and you should now be able to choose the Bootstrap Gallery format for the image type.


bootstrap gallery



Below is the Bootstrap image gallery in action. Click one of the thumbnail images