Skip to main content

Drupal photo gallery

 

Photo Gallery
Using lullabot tutorial:  http://www.lullabot.com/articles/photo-galleries-views-attach
And since lullabot made it into a module, the issue queue has ideas/questions on the approach: http://drupal.org/project/issues/views_gallery
And gravitklabs example (not thoroughly written up, by interesting, on using a similar approach) http://gallery.graviteklabs.com/
Tutorial
Write up from video at http://www.lullabot.com/articles/photo-galleries-views-attach

Create two content types, image and gallery.  Images will hold uploaded images (each image is its own node) and the gallery shows a group of images (specifically, images nodereferenced to that gallery).

Image has an imagefield cck field to upload images and a nodeference field to reference a gallery.  So, to start, set up the content types, create one or two galleries, then create images and nodereference them to the galleries.

Use imagecache to create smaller versions of the image that was uploaded.
Create a view of images to go in the gallery itself and use views_attach to insert the view into the gallery node.  Use nodereference as an argument, and select default argument as node id from url, so that only images nodereferenced to that gallery show in that gallery node.  In the tuorial, smaller images created with imagecache were arranged in a grid view.  This is really the heart of the tutorial - instead of using taxonomy terms to group images, or instead of allowing multiple images to be added to a single content type, this approach uses nodereference to associate images with a gallery and views_attach with noderef as default argument to insert the images into the gallery nodes.
The tutorial also add an easy way to add images to a gallery.  Instead of adding an image and then selecting the gallery from a select or type ahead list, this method places a "add photo" link on the gallery page itself.  This uses the nodereference_url module.  To get this to work, install the nodereference_url module, and when you configure the imagefield cck field select widget, select "reference from url" instead of the regular select list or autocomplete.  Then we use select list as fallback, referenceable node link is ticked and full view (so we get the "add photo" link on the full gallery, not teaser).  In this way, the gallery has a "add photo" link that goes to a node/add form for the image content type and the node reference field is automatically filled in.  Since select list is fallback, if you directly create an image, you'll still be able to choose a gallery.
The tutorial then adds a way to have an image from the gallery show in the list of galleries.  This uses views_attach again.  Simply make a view of images, choose 1 image to show, make the display node content, and then show in the teaser, not in full node view.  Then whenever you have a teaser view of galleries, there will be one image showing.  In the tutorial, this was the most recently added image.
Later this was offered as a feature and even later as a complete module.
Enhancements.   There are a number of possible enhancements:
Link image in gallery teaser to the gallery itself.
By default, the latest image that is showing in teaser mode has options to link to its own node, but not to the gallery it is a part of.  To get it to link to the gallery I used suggestions here: http://drupal.org/node/540600.  Steps I followed are below, this is modifying the "latest image" views display that uses views attach to insert the "latest image" from a gallery into the teaser:
1. Add a relationship.  Add a relationship to the gallery.  This should be Content: Gallery (field_assocgallery) where Gallery in the gallery content type and field_assocgallery is the cck node reference field name.  This can be marked required, but it doesn't really matter since we're also using an argument to restrict to images nodeferenced to that gallery.
2. Add to Fields, choose Node id: nid.    In the fields listing, place this field above/before the image that's being displayed.  When the view is completely working, mark this "exclude from display" so it doesn't show on actual display (although it's useful for testing to see the nid of the gallery there).
3. In Fields, content:photo, modify where the photo links to.  Under relationship, I chose "do not use a relationship", I clicked "output this field as a link" and chose node/[nid]  The output field as link add the link to the photo, so a destination isn't needed here.   Interestingly, on display, the link isn't going to node/nid, it's going to the alias for that gallery (assuming the gallery has an alias).  This is great because I have block visibility rules in place based on url path.
   
Add previous/next links to image
By default, when you're on a gallery, you see the grid view of images, and when you click on an image, you go to full node view for that image.  However, you need to click back to get the full gallery and see other pictures.  It would be better to have previous/next links - preferably really small thumbnails of the images themselves - to navigate through the gallery.
To get previous/next working, use custom_pages module.  I followed the instructions in a comment in the tutorial.   These are the steps:
1. First, create a view of images.  This view will be used by the custom pages.  So, create a new view of type node.  Filter by node type=image post and published.  Add a relationship to the gallery.  In arguments, as we did earlier with the main view to associate posts with a gallery, use the nodereference field as an argument, provide a default argument, and use node id from url.  Same as earlier.  Then, in field, use node:type and delete the label text. The author of the comment wasn't sure if anything was really needed in fields.  Anyway, I added that.  Note that this is a default view - you don't need to add a page or block display.
2. Create a custom pager.  Choose the node type to show it on - in my case image post - and choose the view as the "pager node list" choice.  In other words, we want to show this on image post nodes and do the prev/next ordering according to the view we just set up.  So select the view, and in the view arguments, add the  nodereference gallery cck field followed by "-nid" in brackets.  In my case, my cck field was field_assocgallery so the full text I entered was [field_assocgallery-nid].  And it works!
Manually choosing the primary image to show in teaser view
The tutorial had the image that shows in teaser view be the most recently added image.  I think this works fine, but you might want to manually specify which to use.
Chris Bryant of grativeklabs used computed field, but didn't include php code on what he used to compute it, so I'm not sure how to do this.
One option, which I haven't tried yet, is to add a imagefield to the gallery type itself.  Then, use filefield_sources module.  This modified the regular filefield behavior by allowing more methods in addition to upload.  For example, an image already on the system could be referenced.  So the idea would be to upload all the images to the gallery, then go to the gallery node itself and use filefield sources to choose an image from the gallery to show.  I'm assuming in display fields, you'd also need to choose to not show this image (since you don't want it to appear in full node view).  However, the filefield sources module is in early development (dec 2009) and I haven't tried this.
Separate upload of images to specific directories depending on gallery
By default, there's usually one path where images associated with filefield/image go.  You can use tokens to create different directories based on userid or date.  For this enhancement, create directories based on the gallery they're associated with.  I haven't done this and don't see much of a need, but ... it assumes that images are required to be associated with a gallery, and the associated needs to be done before file upload.  The suggestion in the comments to the tutorial would be to use  filefield paths to add more tokens.  I haven't tried this. 
Bulk upload of images
Suggestion is to use imagefupload.

another suggestion is to use drag and drop uploader, new module
http://www.monsworld.com/blogs/drupal-modules/views-gallery-drag-and-drop-uploader
Full list of modules used
needed
cck and imagefield - to create an image field in a content item
imagecache and related (image api, etc) - to create smaller, derivative versions of images
nodereference - to associate an image with a gallery
views - to create lists of images, etc
views_attach - to insert the view of images into the gallery node
optional
nodereference url - to prepopulate the nodereference field and add an "add photo" link to each gallery
custom pages - for previous/next links on images
other (haven't tried)
filefield sources - to choose which image to show in gallery teasers
imagefupload - bulk upload