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

Sep 16 2011
Posted by highrockmedia
Category: 
Tags: 

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/

  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.  
  8. /* change the column count to the number of photos you want to appear going across. (Adjust thumbnail size as needed) */
  9. $columns = 2;
  10.   $rows = array_chunk($items, $columns);
  11. ?>
  12.  
  13. <table class="mini-gallery">
  14.   <tbody>
  15.     <?php foreach ($rows as $row_number => $columns): ?>
  16.       <?php
  17.         $row_class = 'row-' . ($row_number + 1);
  18.         if ($row_number == 0) {
  19.           $row_class .= ' row-first';
  20.         }
  21.         if (count($rows) == ($row_number + 1)) {
  22.           $row_class .= ' row-last';
  23.         }
  24.       ?>
  25.       <tr class="<?php print $row_class; ?>">
  26.         <?php foreach ($columns as $column_number => $item): ?>
  27.           <td class="<?php print 'col-'. ($column_number + 1); ?>">
  28.       <div class="photo-image"><?php print render($item); ?></div>
  29.       <div class="photo-title"><?php print($item['#item']['title']); ?>
  30.  
  31.       <div>
  32.           </td>
  33.         <?php endforeach; ?>
  34.       </tr>
  35.     <?php endforeach; ?>
  36.   </tbody>
  37. </table>


Submitted by Lance on Fri, 09/16/2011 - 22:15.

love this tutorial

I really loved this tutorial and the overall layout/appearance of the gallery, this is exactly what I have been looking for. The one thing I would really love to be able to add is the ability to have an 'add photo' button to each gallery so a user could simply upload a photo to it. Do you know if there is a simple way to go about that?

Thanks!
Lance

Submitted by Alan on Sat, 09/17/2011 - 01:40.

Just thanks

Nice tutorial.
Alan

Submitted by Anonymous on Sat, 09/17/2011 - 02:50.

Thanks for the screencast,

Thanks for the screencast, I'm sure a lot of people will find it interesting.

Here is a module that might interest you: http://drupal.org/project/galleryformatter

Submitted by highrockmedia on Sat, 09/17/2011 - 17:24.

Thanks, I'll take a look at

Thanks, I'll take a look at that module.

Submitted by Drupal Theme Garden on Mon, 09/19/2011 - 00:40.

Nice article, thanks.

Nice article, thanks.

Submitted by Attila Hooper on Sat, 10/08/2011 - 12:30.

Can't wait to delve into this

Jumping into the D7 water. Had been using Menalto Gallery2 on my D6 site. Thanks for posting this, I need to learn more about the template files.

Cheers

Submitted by Aleksander Jug on Mon, 10/10/2011 - 05:52.

Right what the doctor ordered

Thank you for sharing this with us.
It's an excellent tutorial and got me exactly what I needed.

Thanks again.

Submitted by Anonymous on Wed, 10/26/2011 - 05:17.

For some reason I can't

For some reason I can't choose for gallery in "manage display". Any ideas what I could do?

Submitted by highrockmedia on Thu, 12/29/2011 - 19:05.

Hi something is not right

Hi something is not right with your configuration, can you watch the screencast again and make sure you followed all the steps?

Submitted by Peter on Sun, 11/13/2011 - 18:00.

Great Tutorial, i love it.

Great Tutorial, i love it. The best way to build a photogallery in Drupal 7, because other module ends in result of a crash and made for Drupal 6 only.

Thanks so much

Submitted by cx on Tue, 11/15/2011 - 11:11.

Thank you from spain,

Thank you from spain,

Submitted by Matt Ryan on Thu, 11/17/2011 - 22:24.

Great Information

Thanks for this interesting article! I found it very interesting. You really make it seem so easy with your presentation.

Submitted by Itransition on Tue, 12/06/2011 - 13:42.

Thank you for the screencast!

Thank you for the screencast! I'm finding this post extremely useful for me as I'm just working now on creating a node photo gallery.

Submitted by Rui Corveira on Thu, 12/29/2011 - 18:54.

Excelent Work, but?

Excelent work, but what we can do if we have do upload 150 pictures? Do you have any ideia?

Thanks
RC

Submitted by highrockmedia on Thu, 12/29/2011 - 19:02.

Hi yes, that is possible. You

Hi yes, that is possible. You would need to use these modules:

http://drupal.org/project/plupload (plupload)

and

http://drupal.org/sandbox/vingborg/1138512 (Mupload)

It's a little tricky getting this all to work but once you do you can upload multiple files at once. I want to do a screencast on it but have not had time. :(

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Z
x
y
q
d
d
b
9
Enter the code without spaces.
To prevent automated spam submissions leave this field empty.