Front-end engineer with a passion for learning something new every day

Screencast: Creating and Theming a Node Photo Gallery with Drupal 7 and Colorbox

Recently, I designed, themed and developed a new site for my photography, High Rock Photo. The obvious choice for this new site was to use Drupal 7. I wanted the ability to easily create node galleries and this screencast shows you how to create and theme a node photo gallery using Drupal 7. I will also point out what modules are needed and make reference to those that would have been used in Drupal 6 and are now integrated into core in Drupal 7. You will also find some custom template code published that I mention in the video for your theming.

Template Code (Drupal 7)

field--field_gallery_photo.tpl.php » /sites/all/themes/[your_theme]/templates/ -- note the name of this file is dependent on the specific name of your field!

template -
Photo title -
used at:

/* change the column count to the number of photos you want to appear going across. (Adjust thumbnail size as needed) */
$columns = 2;
  $rows = array_chunk($items, $columns);

<table class="mini-gallery">
    <?php foreach ($rows as $row_number => $columns): ?>
        $row_class = 'row-' . ($row_number + 1);
        if ($row_number == 0) {
          $row_class .= ' row-first';
        if (count($rows) == ($row_number + 1)) {
          $row_class .= ' row-last';
      <tr class="<?php print $row_class; ?>">
        <?php foreach ($columns as $column_number => $item): ?>
          <td class="<?php print 'col-'. ($column_number + 1); ?>">
      <div class="photo-image"><?php print render($item); ?></div>
      <div class="photo-title"><?php print($item['#item']['title']); ?>

        <?php endforeach; ?>
    <?php endforeach; ?>



Read other blog posts