Creating a grid of images for an album in Drupal 6

Posted on Thu, 2009-06-25 10:53

Following on from the tutorial of creating an album based gallery in Drupal 6. This tutorial will teach you how to create a basic grid of the images in the node.

Update: I have written an updated tutorial with code to allow you to have pagination on your grid of images.

In your content type, go to Display fields and set the Full node to <Hidden>. This will take the images out of the $content variable.

Then in your theme, copy the existing node.tpl.php and create a new identical file called node-album.tpl.php (the album part with be the content type name that you used from the tutorial.)

Below the content section, add the following PHP code:

<?php
$images = $node->field_images;
if (count($images) > 0):
  $rows = array();
  $images_per_row = 3;
  $i = 0;
  $row = 0;
  foreach ($images as $image) {
    $rows[$row][$i] = '<a class="gallery-thumbs" title="'. htmlspecialchars($image['data']['description']) .'" rel="lightbox[photo_gallery-'. $node->nid .']" href="'. imagecache_create_url('lightbox', $image['filepath']) .'">'. theme('imagecache', 'thumbnail', $image['filepath'], $image['data']['title'], $image['data']['title']) .(trim($image['data']['description']) != '' ? '<br /><small>'. $image['data']['description'] .'</small></a>' : '');
    $i++;
    if ($i == $images_per_row) {
      $row++;
      $i = 0;
    }
  }
?>
<table class="views-view-grid">
  <tbody>
    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $row_class = 'row-' . ($row_number + 1);
        if ($row_number == 0) {
          $row_class .= ' row-first';
        }
        elseif (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); ?>">
            <?php print $item; ?>
          </td>
        <?php endforeach; ?>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>
<?php else: ?>
  <p>No images in album</p>
<?php endif; ?>

The table code is a direct copy from views-view-grid.tpl.php so the code should look identical to the Album view.

Replace the following with your own settings:

<?php imagecache_create_url('lightbox', $image['filepath']); ?>

Change lightbox for the name of the imagecache preset that should open up within the lightbox.

<?php theme('imagecache', 'thumbnail', $image['filepath'], $image['title'], $image['title']); ?>

Change thumbnail to the name of the imagecache preset that should be displayed.

To add more columns to your grid, change the $images_per_row variable.

Update: I have written an updated tutorial with code to allow you to have pagination on your grid of images.

Comments

James

Sun, 2010-11-14 18:12

This site is running Wordpress. I would of recommended tagadelic, what is the problem with tagadelic?

Navnish

Sun, 2010-12-12 16:24

Hi James,

I am back with the same problem.

I created a sub-domain site as http://sample.localhost:8082/ and created the picture album with this tutorial. Every thing turned out to be great except and the download link on the slideshow. The path to the file is like this:

http://sample.localhost:8082/node/sites/sample.localhost/files/albums/IM...

If you notice, if we remove /node/ entry from the path, the download link code you provided eariler below works as expected:

title="'. htmlspecialchars($image['data']['description']) .''. htmlspecialchars('Download Original') .'"

However, I have no idea how to control this path.

Can you help?

Navnish

James

Sun, 2010-12-12 21:34

Try changing:

href="'. imagecache_create_url('lightbox', $image['filepath']) .'"

To:

href="'. base_path() . imagecache_create_url('lightbox', $image['filepath']) .'"

Anonymous

Fri, 2011-09-02 09:28

I didn't understand exactly what you mean in this part:
"Then in your theme, copy the existing node.tpl.php and create a new identical file called node-album.tpl.php (the album part with be the content type name that you used from the tutorial.)"

1) Do i need to backup my node.tpl.php create the node-album.tpl.php as you suggest and then rename it as node.tpl.php?
Or 2) maybe do i need to have the two files node.tpl.php and node-album.tpl.php?

In my site if i use "solution" 1) it doesn't work. If i use n° 2) it's ok, but i don't know if can get some issues in future.
Thanks in advance

Andrea

james

Fri, 2011-09-02 19:05

You should have a node.tpl.php and node-album.tpl.php in your theme directory. If you only have node-album.tpl.php, Drupal won't recognise it, you must have a node.tpl.php file as well.

hortclub

Wed, 2012-04-11 01:19

Hello,
Before I had the problem with only one column of pictures. I know nothing about php, but I copied your code in anyways and it added a section of the same pictures except in 3 columns just below the one column of pictures. How do I keep the 3 columns but get rid of the one column?

james

Wed, 2012-04-11 09:03

In your gallery content type, go to Display fields and set your images field to .

hortclub

Thu, 2012-04-12 21:13

So, I had set the display to hidden, but I had checked the exclude box next to full node. now it is working, thanks

Pages