Menu

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! 

<?php
/*
template - drupal.org/node/1224106#comment-4969404
Photo title - drupal.org/node/432846#comment-4125056
used at: www.highrockphoto.com
/*

/* 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">
  <tbody>
    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $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']); ?>

      <div>
          </td>
        <?php endforeach; ?>
      </tr>
    <?php endforeach; ?>

  </tbody>
</table>

Tags

Read other blog posts