Howto: Node-based galleries with CCK and Views

Most Drupal-based Gallery solutions use Taxonomy to build sets of images; the resulting galleries are Taxonomy pages that can be easily maintained and expanded, but are not available to the node system: They can't be referenced from other nodes through a CCK node reference field, they can't be tagged, they don't accept comments and so on. Thus in many cases a node based photo gallery would be preferrable - if it would exist.

As usual, Drupal can solve this problem with a set of core and contributed modules. This Howto is a transcript of the screencast Photo galleries with Views Attach by Jeff Eaton, where Jeff demonstrates how to to create node-based galleries with CCK and Views. In the end, this is one of the most advanced approach to publish images with Drupal, so there are tons of reasons to educate the Drupal community about this approach.

Notice: This approach is based on the Content Construction Kit (CCK) and won't work with the contributes Image module. Image module offers adifferent gallery solution that is based on Taxonomy and views.

Skills required: This Howto targets primarily advanced Drupal newcomers and Drupal site administrators with a basic understanding of Views and CCK. If you're eaning your money with hacking Drupal core everyday, you'll most probably want to code your own custom gallery module.

Modules

This tutorial uses a bunch of core and contributed modules:

• CCK - adds customizable fields to Drupal
• Filefield - stores files through an CCK field
• Imagefield - stores images in a CCK Filefiled
• ImageAPI - handles images
• Imagecache - generates image derivates on the fly
• Nodereference URL - widget for CCK node reference fields
• Views - all purpose "reports" generator for Drupal
• Views Attach - add-on for CCK-based content types that attaches a view to a node

Most of these modules are well known; the "essentials" of this specific approach are Views Attach and Nodereference URL.

Download an enable all of these modules at /admin/build/modules.

(fixme: required sub-modules)

Step 1: Create Content Types

Node-based image galleries require two content types that need to be created via ./admin/content/types/add:

• Gallery - a simple "container"-like content type for galleries
• Photo - imagefield-based content type for photos

These content types might be created with different names (e.g. 'image' instead of 'photo', or 'photoset' instead of 'gallery'), but the required views have to be adapted to those different names. Please note: To create new content types, you have to be logged in with proper permissions (e.g. user #1).

Step 2a: Creating the Gallery Content Type

Go to ./admin/content/types/add, create a new content type named "Gallery". Save it with default values, you don't need to change anything so far. However, feel free to adjust parameters like Submission form settings, Workflow settings, or Comment settings to your liking; this will not harm the following steps in any way.

Step 2b: Creating the Photo Content Type

Go to ./admin/content/types/add, create a new content type named "Photo" and save it. Add the following two fields:

1. Imagefield (Label: 'image'; Name: 'field_image'; Type: 'file') - This field stores the image file
2. Node reference (Label: 'Gallery'; Name: 'field_gallery'; Type: 'Node reference') - This field references the Gallery node where the stored image is supposed to be displayed.

Now we have to do some basic configuration of those fields. Edit the 'Gallery' node reference field as follows:

Configure the "Photo settings" as follows:

• Change the default widget type to 'Reference from URL';
• set the 'Fallback behaviour' to 'Use select list widget';
• check the 'For full node view' checkbox on 'Create link on referenceable content';
• set 'Link title' to something lilke 'Add photo';
• select 'Return path': 'The node being referenced';

Configure the "Global settings" as follows:

• check 'Required' and 'Gallery' on 'Global settings'.

Save the field configuration.

Step 2: Create Views

To display images in a Gallery node we're using a view that will be embedded into the node through the 'Views attach' module. This view will have thee displays.

Create a view named 'gallery_photos'.

Step 2a: Defaults display

Configure the "Defaults" display as follows:

• Basic settings:
• Style: 'Grid'; Number of columns: '4'; Horizontal
• Row style: 'Fields'
• Use AJAX: 'Yes'
• Use pager: 'Yes'

• Relationships
• • (none defined)

• Arguments:
• Content: 'Gallery (field_gallery_reference)'
• Action to take if argument is not present: 'Hide view / Page not found (404)'
• Validator options - Validator: 'Node'; Types: 'Gallery'; Check 'Validate user has access to the node'; Argument type: 'Node ID'; Action to take if argument does not validate: 'Hide view /Page not found (404)'

• Fields:
• Node: 'Title'
• Content: 'Image 150px image linked to node'
• Node: 'Post date'

• Sort criteria:
• Node: 'Title asc'
• Node: 'Post date desc'

• Filters:
• Node: 'Published or admin'

Step 2b: Full gallery display

Create a 'Node content' display and name it 'Full gallery'.

Leave the settings of the 'Default display', only override the following settings:

• Node content settings
• Node types: Embed this display in the following node types: 'gallery'
• Build modes: Embed this display in the following build modes: 'Full node'
• Arguments: 'Provide the current node id as a default argument' (= 'nid'); 'Use the ID of the node the view is attached to'
• Show title: 'No'

Step 2c: Latest image display

Create a 'Node content' display and name it 'Latest image'.

Again, leave the settings of the 'Default display', only Override the following settings:

• Basic settings
• Use pager: 'No'
• Items to display: '1'

• Fields
• (remove all fields except 'Content: Image short image')
• (Notice: Im not getting this 'Content: Image short image' setting)

• Node content settings
• Node types: Embed this display in the following node types: 'gallery'
• Build modes: 'Embed this display in the following build modes': 'Teaser'
• Arguments: 'Provide the current node id as a default argument' (= nid); 'Use the ID of the node the view is attached to'
• Show title: 'No'

Save the view.

Step 3: Test your setup

So far you should have two content types: 'image' and 'gallery'. Images referencing the a gallery should appear in this gallery.

(Fixme/missing pieces: No working 'Add photo button'; Teaser view doesn't work as shown in Jeff's screencast; still no working way to bulk upload images into a gallery without FTP/SCP access to the server; etc.)

Step 4: Add Theming

• Create a new page template, views-view--Gallery.tpl.php, via Theme: Information -> Display output
• add <a href="node/add/gallery">Add a gallery</a> within <?php if ($admin_links): ?>
• Rescan Template files

Possible extensions

So far this tutorial simply tried to transcribe Jeff Eatons screencast; however, there's a lot of room for improvements and extensions.

Getting lots of images into the galleries

Filling galleries with images might require bulk uploading of files onto a server. That is usually done by an administrator. But what if users are supposed to be empowered to build image galleries without a sysop or webmaster handling the files? That's where additional contributed modules might come in handy.

• image_fupload module - bulk upload images throught a pretty flash applet
• Drag and Drop Uploader - another batch uploader (work in progress, not yet published at drupal.org

Add 'Previous' and 'Next' links

(Custom Pagers)

Allow rating of images

(Voting API, Fivestar, Plus1)

Ressources

The following ressources might help to get node based galleries working:

• Raw exports of the views, css, and content types - import these exporte into views
• Views Gallery module by KarenS

- module based on Jeff's approach with hard-wired content types

Credits

This tutorial would not have been possible withouot Jeff Eatons screencast Photo galleries with Views Attach. Thank you, Jeff!