Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

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

Parent Feed: 

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.

field--field_gallery_photo.tpl.php » /sites/all/themes/[your_theme]/templates/

  1. <?php

  2. /*

  3. template - drupal.org/node/1224106#comment-4969404

  4. Photo title - drupal.org/node/432846#comment-4125056

  5. used at: www.highrockphoto.com

  6. /*

  7. /* change the column count to the number of photos you want to appear going across. (Adjust thumbnail size as needed) */

  8. $columns = 2;

  9.   $rows = array_chunk($items, $columns);

  10. ?>

  11. <table class="mini-gallery">

  12.   <tbody>

  13.     <?php foreach ($rows as $row_number => $columns): ?>

  14.       <?php

  15.         $row_class = 'row-' . ($row_number + 1);

  16.         if ($row_number == 0) {

  17.           $row_class .= ' row-first';

  18.         }

  19.         if (count($rows) == ($row_number + 1)) {

  20.           $row_class .= ' row-last';

  21.         }

  22.       ?>

  23.       <tr class="<?php print $row_class; ?>">

  24.         <?php foreach ($columns as $column_number => $item): ?>

  25.           <td class="<?php print 'col-'. ($column_number + 1); ?>">

  26.       <div class="photo-image"><?php print render($item); ?></div>

  27.       <div class="photo-title"><?php print($item['#item']['title']); ?>

  28.       <div>

  29.           </td>

  30.         <?php endforeach; ?>

  31.       </tr>

  32.     <?php endforeach; ?>

  33.   </tbody>

  34. </table>

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web