Gallery hierarchy, nesting: Gallery2, Acidfree -like galleries

I second this.

Nesting galleries (or albums) is a killer feature as it is just so user friendly and a great way to keep your galleries organized.

@kecinzer There are no stupid questions. I am not sure about the answers(yet).
(I have gallery2 on a website which uses nesting and it is very useful)
Anything is possible with views, but using taxonomy might be better.
Not sure if this is a feature request or lack of documentation. Might be a little of both.
Just haven't been down that road yet, but agree with everyone about nesting galleries.

I suppose a global gallery could be created by anonymous user and photos could be added by any user with permissions.

I tried to create nesting using taxonomy and views. Granted, I'm new at this, but it feels overly cumbersome. I think it will be very hard to explain it to my girlfriend if I ever figure it out myself. :P

A more userfriendly way would be a dropdown menu that allows you to pick a parent gallery when creating a gallery through 'create content'. I managed to create hierarchy through the menu structure, but as my girlfriend has LOTS of galleries I'm doubtful I could squeeze all of them into the menu... nor would I want to.

Being able to click thumbnails to navigate a gallery hierarchy (as in Gallery2) would be a great feature. :)

The module is somewhat new and may not every need, but there is always a way since it is "nodes"
Drupal is very powerful platform. It's like baking a cake, once you figure out the ingredients and the measure of each, it's 15 minutes and in the oven.
Sometimes, a wire frame sketch can help to sort things out.

If you use Gallery 2 or Gallery 3 and bridge it to Drupal. We will not look down on you for doing that.
I know I am not much help right now.. wait till January when the snow is here and I will be into this very task myself.

@RedTop, since your messing with this now, maybe this module might help.
A quick read of the project page, talks about path auto and token which are both really neat.
http://drupal.org/project/nodehierarchy

Thanks, I will read this asap and see if I can figure it out somehow. Once (if) I do I will post my findings here. :)

We most certainly need this in documentation when a recipe is formulated. Something people can follow, step by step with some options.
A taxonomy list for the gallery content type would be a good starting point. I am not sure how deep that can go.

Vocabulary=Photos
• term= vacation
• sub-term= Florida
• sub-term= California
• sub-term= Maine
• term= work
• term= friends
• term=family

or maybe a user created free tagging vocabulary

Node_hierarchy gets me a bit further, but the result is a view of all images in both parent and child galleries. I would like to create a view where images of the current gallery are mixed with covers of child galleries, without the "non-cover" images of child galleries. This presents a bit of a problem as this requires a mix of 'gallery-images-list.tpl.php' and 'gallery-cover-view.tpl.php'.

Boy, was I on the wrong track (to see what I'm referring to, see below deprecated text)! The solution is a lot simpler and can accessed through the Node Gallery settings.

1. Edit the gallery relation (I simply edited the default 'Node Gallery Default')
2. Keep content types for gallery and gallery image set to gallery and gallery image (ie change nothing)
3. Click next
4. Scroll down to 'Teaser Setting'
5. Set display type to 'Cover'
6. Set 'ImageSize for Display Type' to whatever you have configured for covers (I have 150x150 thumbnails)

This is what it looks like:
http://www.richardvankooten.nl/webspace/node_gallery_nesting03.jpg

(National Geographic gallery is a child of Nature gallery.)

I'm busy editing 'gallery-teaser.tpl.php' and css to make the cover image of the child gallery consistent with "ordinary" gallery covers, but it seems like I'm making real progress here! :)

This is now deprecated:

Figured out that 'gallery-teaser.tpl.php' will have to be customized to do what I'm trying to do. Unfortunately I'm not exactly a crack PHP coder... :P

Basically what needs to be done is for 'gallery-teaser.tpl.php' to behave more like 'gallery-cover-view.tpl.php' than 'gallery-images-list.tpl.php'. I tried copying the contents of 'gallery-cover-view.tpl.php' to 'gallery-teaser.tpl.php' just to see what would happen. That seemed to do to what I'm looking for (sort of), but didn't output a cover image, just a link (which does point to the correct gallery!).

'gallery-teaser.tpl.php' like 'gallery-images-list.tpl.php' (default):
http://www.richardvankooten.nl/webspace/node_gallery_nesting01.jpg

'gallery-teaser.tpl.php' like 'gallery-cover-view.tpl.php':
http://www.richardvankooten.nl/webspace/node_gallery_nesting02.jpg

'gallery-cover-view.tpl.php' code:
<code>
<?php $gallery_path = 'node/'.$gallery->nid; ?>
<div class="gallery-cover-view">
 <div class="cover-image">
  <?php print l($cover_image, $gallery_path, array('html' => true)) ;?>
 </div>
 <h4 class="title"><?php print l($gallery->title, $gallery_path)?></h4>
</div>

Eureka!
http://www.richardvankooten.nl/webspace/node_gallery_nesting04.jpg

Will add proper documentation soon (tomorrow probably), but in short: needed node_hierarchy, adjusted node_gallery teaser settings to display type 'cover', added title to 'gallery-teaser.tpl.php', changed node_gallery css, changed 'node.tpl.php' to remove title, installed imagecache_actions module and added ImageCache preset for covers to distinguish albums.

Thx for the node_hierarchy hint dbeall!

Well, it took a bit longer as I still had a lot of tinkering to do, but I finally got it to work.

Here is how to create a Gallery2 like gallery. Galleries are structured in a hierarchical tree with childgallery covers appearing in parent galleries' imagelists. Lightbox is used and the default image preview page is not used anymore. Same goes for the 'user's Galleries' pages.

Screenshot

-------
INSTALL
-------

Install the following modules:
- node_gallery
- node_hierarchy
- Imagecache
- Imagecache actions
- ImageAPI
- views
- custom breadcrumbs

-------------
CONFIGURATION
-------------

node_hierarchy configuration:
1) site configuration - node_hierarchy - gallery can be both parent and child.
2) site configuration - node_hierarchy - default children view: nodehierarchy_children_view.

imagecache configuration:
This configuration creates square thumbnails. Album covers are recognizable by the text 'album'.

1) site building - imagecache - create album preset - action aspect switcher
2) site building - imagecache - create album_landscape preset - actions scale:height 150 crop:150x150 centered add text:36px, angle 90, opacity 60, #000000, ALBUM
3) site building - imagecache - create album_portrait preset - actions scale:width 150 crop:150x150 centered add text:36px, angle 90, opacity 60, #000000, ALBUM
4) site building - imagecache - create thumb preset - action aspect switcher
5) site building - imagecache - create thumb_landscape preset - actions scale:height 150 crop:150x150 centered
6) site building - imagecache - create thumb_portrait preset - actions scale:width 150 crop:150x150 centered
7) site building - imagecache - create no_actions preset - actions none

node_gallery configuration:
1) site configuration - node_gallery - edit default gallery - set image size presets: cover: album, thumbnail: thumb, preview: no_action.
2) site configuration - node_gallery - original display image - lightbox2 popup: no_action preset
3) site configuration - node_gallery - teaser setting - display type: cover (important!), preset: album
4) site configuration - node_gallery - gallery landing page setting - gallery display type: thumbnails that open a lightbox2 gallery, preset: no_action

custom breadcrumbs configuration:
1) site building - custom breadcrumbs - add custom breadcrum node_gallery_gallery
1) site building - custom breadcrumbs - titles: [hierarchyparenttitle], path: <pathauto>|[hierarchypath].

-------
THEMING
-------

In order for Node Gallery to behave and look the same as a Gallery2 page quite a bit of customizing is needed. The default view would be image thumbs, followed by the Gallery description (body text), followed by the covers of the child galleries. We are going to change this into images, covers of child galleries (without a linebreak so they blend into the thumbnail grid) and then Gallery description.

For this we need to override the defaults by placing the following template files in our theme 'templates' directory (I use a Zen subtheme):

gallery-cover-view.tpl.php

<?php
/* 
* These are gallery covers shown on galleries list
*
* Removed metadata from galleries list and remove link beneath gallery cover and image thumbnail
*/
?>

<?php $gallery_path = 'node/'. $gallery->nid; ?>

<div class="gallery-cover-view">

  <div class="cover-image">
    <?php print l($cover_image, $gallery_path, array('html' => true)); ?>
  </div>

  <div class="image-title"><?php print $gallery->title; ?></div>

</div>

gallery-images-list.tpl.php

<?php
/* 
* This is the list of thumbnails of images contained in a gallery
*
* Removed $empty_message; to make empty galleries possible for structuring purposes (like directories without files but with subdirectories)
*/
 
?>
<div class="gallery-images-list">

  <?php print theme('item_list', $images_list);?>
  
</div>

gallery-teaser.tpl.php

<?php
/* 
* This is the teaser of a child gallery contained in a gallery
*
* Added Gallery title to cover image
*/
?>

<div class="gallery-teaser">

  <?php 
  if (is_array($gallery_teaser)) {
    print theme('item_list', $gallery_teaser);
  }
  else {
    print $gallery_teaser;
  }
  ?>

  <div class="image-title"><?php print $gallery->title; ?></div>
  
</div>

node-node_gallery_gallery.tpl.php

<?php
/**
 * $content array broken up into variables in able to position images, description and childgalleries' covers in the correct order.
 */
?>

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix">
  <?php print $user_picture; ?>

  <?php if (!$page): ?>
    <h2 class="title"><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
  <?php endif; ?>

  <?php if ($unpublished): ?>
    <div class="unpublished"><?php print t('Unpublished'); ?></div>
  <?php endif; ?>

  <?php if ($display_submitted || $terms): ?>
    <div class="meta">
      <?php if ($display_submitted): ?>
        <span class="submitted">
          <?php
            print t('Submitted by !username on !datetime',
              array('!username' => $name, '!datetime' => $date));
          ?>
        </span>
      <?php endif; ?>

      <?php if ($terms): ?>
        <div class="terms terms-inline"><?php print $terms; ?></div>
      <?php endif; ?>
    </div>
  <?php endif; ?>

  <div class="content">
  	<?php print $node->content['gallery']['#value'] ?>
  	<?php print $node->content['nodehierarchy_children']['#value'] ?>

   <?php //div added to prevent body from floating. used a clear: both statement in css ?>
   <div class="gallery-description">
  	<?php print $node->content['body']['#value'] ?>
   </div>
  	<?php print $node->content['pager']['#value'] ?>
  </div>

  <?php print $links; ?>
</div> <!-- /.node -->

node-view-nodehierarchy_children_teasers.tpl.php

<?php
/**
 * Removed everyting to make sure the galleries cover is the only thing that's being shown when in teaser mode.
 */
?>

<?php print $node->content['gallery']['#value'] ?>

views-view--nodehierarchy-children-teasers.tpl.php

<?php
/**
 * Removed quite a lot... I think.
 */
?>
<div class="gallery-teaser-view">
  
  <?php if ($rows): ?>
    <?php print $rows; ?>
  <?php endif; ?>

  <?php if ($pager): ?>
    <?php print $pager; ?>
  <?php endif; ?>

</div> <?php /* class view */ ?>

views-view-unformatted--nodehierarchy-children-teasers.tpl.php

<?php
/**
 * Again.. removed quite a lot (been a while).
 */
?>

<?php foreach ($rows as $id => $row): ?>

    <?php print $row; ?>

<?php endforeach; ?>

---
CSS
---

I use the grid-layout as documented elsewhere as it reflects Gallery2's layout.

/* gallery list sandbox */
.gallery-list{
}

/* Image-list sandbox */
.gallery-images-list {
  overflow: visible;
  list-style-type: none;
}

.gallery-images-list li {
  float: left;
  width: 184px; /* you can adjust this to your theme */
  min-height: 250px; /* if you use long titles which will be displayed under pictures some pictures may 'stuck' and not go to left, try lower value and you will see what I mean */
}

.gallery-images-list .image-thumbnail a {
  display: block;
  text-align: center;
}

.gallery-images-list .image-thumbnail img {
  margin: 5px;
  border: 1px solid #000000;
}

.image-title{
  text-align: center;
}


/* This is the style used for the album thumbnails */
.gallery-cover-list {
  overflow: hidden; /* clear floats */
  list-style-type: none;
}

.gallery-cover-list li {
  float: left;
  width: 184px; /* you can adjust this to your theme */
  min-height: 250px; /* if you use long titles which will be displayed under pictures some pictures may 'stuck' and not go to left, try lower value and you will see what I mean */
}

.gallery-cover-list .image-thumbnail a {
  display: block;
  text-align: center;
}

.gallery-cover-list .image-thumbnail img {
  margin: 5px;
  border: 1px solid #000000;
}

/* container for gallery cover, title and margin. */
.gallery-cover-view {
}

/* Image-list sandbox */
.gallery-teaser {
  float: left;
  width: 184px;
  min-height: 250px; /* if you use long titles which will be displayed under pictures some pictures may 'stuck' and not go to left, try lower value and you will see what I mean */
  display: block;
  text-align: center;
}

.gallery-teaser img{
  margin: 5px;
  border: 1px solid #000000;
  }
 
.gallery-description {
  clear: both;
}

/*div containing the query output of nodehierarchy_children_teasers view */
.gallery-teaser-view {
  float: left;
  display: block;
}

Like I said... some heavy customizing needed. :P

Now it's a matter of creating a top-level gallery (ie 'photos') and linking to that gallery. When creating a new gallery be sure to specify its parent gallery and the new gallery's cover image will show up in the parent gallery's imagelist. :)

If anyone knows how to do things a better way, please let me know! Hope this helps people who want Gallery2-like galleries but want to do so natively in Drupal.

I know you have a lot of time and testing different things to put this all together.
When i get back home next week, I will follow your lead and see what i end up with, compare notes and stuff...
It looks pretty neat from what you wrote up and the screen shot...

Thx. :)

I just migrated and haven't found a job yet (though that will probably change soon). It does give a lot of time to get to know Drupal though. ;)

Please let me know if I missed documenting a couple of steps somewhere.

Well, I started filling my galleries with images and sure enough... an issue arose.

consider parent gallery A with one child gallery B. Child gallery B has lots of pictures.

Drupal attempts to create a pager for child gallery B as it should. However, this pager is placed in the parent gallery A instead of the child gallery B even though parent gallery A itself has no images and just one child gallery. Oddly enough, child gallery B has no pager at all!

I have been able to confirm that Drupal counts the images in child gallery B because the pager disappears from parent gallery A as soon as I remove enough pictures from child gallery B.

Does anyone have some pointers on how I could solve this?

subscribe..

@RedTop, care to create a feature for this ?
Combination of imagecache, nodegallery, nodehierarchy, so that people can easily replicate this "heavy" customization.
Then, maybe people can help with your pager problem :)

Do you mean a site recipe in the Drupal documentation? Sure, can do... I'll just copy my post. :)

However, I'm not sure whether it is smart to add a site recipe when I know there are problems with it.

nope, not a site recipe..
But features, take a look at the features module, if you haven't heard about it, it's a bit complicated, i'm afraid..

Ah, never heard of the Features module, but it looks similar to automated roll-out / unattended install thingies.

I still want to learn how to do this using a custom module, so I'd rather spend my time doing that instead of creating a feature... Feel free to use my write-up to create one yourself though. :)

We urge everyone to use NG3. There won't happen much with NG2 in the future.