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

by Danny Englander | 16 / Sep / 2011
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: 
  • CMS
  • Drupal
  • PHP
  • Tutorial
  • Video
  • Drupal Planet

Comments

Dan Murano (not verified)

Mon, 07/30/2012 - 00:07

Thanks, Dan. This is a huge help in getting me started. It was hard enough just figuring out which module to use. Your excellent explaination of how it works probably saved me days of searching.

Dan

Mike (not verified)

Thu, 09/06/2012 - 22:10

Do you think using a node and theming it is better than using views to create a gallery?

Danny Englander

Tue, 09/11/2012 - 18:20

Hi Mike, it depends on what you are after. I've given a simple way to do a node gallery which in some cases would be useful. For example, if you have users creating content on your site, this would be a simple way for any user to quickly create their own gallery. There could be other use cases too.

By contrast, Views would be good if you want hierarchies of galleries or you are perhaps basing galleries on taxonomies. Fir example, on my site High Rock Photo, all the top level pages are galleries based on Views as I am drawing upon taxonomy. You can imagine those pages being colorbox galleries instead as that's available to views. 

René (not verified)

Fri, 09/07/2012 - 09:20

Thanks, Danny. As Dan said, this is a great tutorial for getting started with galleries in Drupal 7.

But there's one thing I am interested in: which way did you choose to make a gallery of galleries? So to have (e.g.) the first image of a gallery displayed on a separate page with the gallery title below...and all the other galleries around?

René

Danny Englander

Tue, 09/11/2012 - 18:30

Hi René -- sure you could do this with Views. The key would be to set your image in the view where it says "Multiple field settings" to just show one image from each node. You would want to set that for the image to "Display 1 value(s) starting from 0". That way you can get a grid of images where it just shows one image from each node even though you have multiple images in a node. Then add what ever other fields you want such as a link, title or whatever. That should work but if it does not let me know. 

René (not verified)

Mon, 10/08/2012 - 13:58

Thanks, I will try that.

francesca (not verified)

Mon, 01/07/2013 - 20:53

Thank you, great step-by-step tutorial. Extremely useful!

ibrahim (not verified)

Tue, 02/05/2013 - 07:04

Thanks, Dan. it is usefull tutorial. i am interested in popup youtube or vimeo video with drupal 7. i do that like . but i want only put an url for video and video popup. i don't want give image url but i want an thumb image for teaser. i coıld not make it with embeded_video module. how can we do it like your sample.

Nyi (not verified)

Fri, 02/08/2013 - 19:16

Dear Danny

please let me get helps for making .tpl.php file .. because i followed the ur codes and didn't get columns view at page of gallery.

I used the Content type name is Songs' Notes and machine name is songs_notes and I add this machine name again in field , Label is Notes and that's field name is field_songs_notes and all was done only not showing column views .. I copied the ur codes and saved as field--field_songs_notes.tpl.php ... in template folder of my theme.

Len Lamberg (not verified)

Sun, 04/07/2013 - 15:18

This is excellent, and a very excellent integration of Colorbox and Drupal Templates. If you are ever in Wisconsin, I will buy you a beer.

ibrahim (not verified)

Mon, 04/08/2013 - 07:05

is there anyone who can give answer?

Dawn (not verified)

Mon, 04/08/2013 - 09:20

First, thank you so much for this tutorial. It was extremely helpful. I struggled terribly trying to figure out how to get my colorbox thumbnails into a grid and display the captions under the thumbnails. Also, many forums provide snippets of php code, but no one seems to provide the information of where the code goes. (yes I am a real newbie)

What I wondering about next, is how I might edit the code so that the alt tag is displayed under the thumbnail and the title tag displays with the large gallery thumbnails. My captions are going to be quite long, and I'd prefer to number my thumbnails with a reference to the full titles in the body field above. In the colorbox large image display, I do want the full captions. Thank you so much in advance for your help.

stu ducklow (not verified)

Wed, 04/10/2013 - 02:16

I appreciate your effort but I can't believe doing such a simple job is so complicated. Why does anyone use Drupal anyway?

Danny Englander

Wed, 04/10/2013 - 10:48

I use Drupal because it helps me to create really cool stuff. I make a full time living as a Drupal freelancer so what can I say? Everything has a learning curve and Drupal is no exception.

No one is forcing you to use Drupal, you are free to go an code some html pages in Front Page as you see fit and then FTP them to the server. :)

Add new comment