1. Drupal Recipe: Before and After Gallery Lisa Forgan and Chris Neglia, using notes from Drupal Camp Colorado Copyright 2009, Page 1 Solutions LLC

2. Login as root user You will need to be logged in as root user Alternatively, the root user will have to have given your account’s role permission to add new content types as well as having given access to adding modules and views.

3. Install Modules CCK – enable all components except ‘filefield meta’. Most important are ‘content’, ‘content permissions’, ‘filefield’, ‘imagefield’, ‘filefield tokens’, ‘nodereference’, ‘link’ Views – enable all : ‘views’, ‘views UI’ ImageCache – enable all except for ‘Imagemagick’ Thickbox (or Lightbox2)

4. Create new content type Admin/content/types/add Create a content type called ‘before_after_pair’ Add a field for file, widget type ‘image’, call it field_before_photo Add a field for file, widget type ‘image’, call it field_after_photo Set options as needed, click ‘add content type’

5. Create new before-after content Create content for this newly created type Add a before / after photo. Save. Repeat above x2 You now have 3 photo pairs. But no one can view them yet without permissions.

6. Imagecache preset for thumbs Go to imagecache, add a new preset. Call the preset ‘before_after_preset’ Add scale and crop (or just scale, or resize) – make it something like 120x120 Click save.

7. Permissions Go to permissions, give anonymous and authenticated user ‘view’ access to the before-and-after content type AND ‘view’ access to each field (field_before_photo, field_after_photo) content fields. Give authenticated user (or whichever role) the ability to ‘create’ and ‘edit own’ and ‘delete own’ permission to the before-after content type/fields Give anonymous and authenticated user the ability to ‘view imagecache before_after_preset’ Give anonymous and authenticated user the ability to ‘access all views’ Give an admin user the ability to edit/delete any of this new content type. Be careful with this permission.

8. Gallery in Views (1) Add new view, call it before_after_gallery. Choose type ‘Node’ Add display ‘Page’ Change title to ‘Before and After’ Change style to ‘grid’, edit the settings of grid by clicking on the gear and choose 1 column (or 2, 3, your pref) Use pager: mini Items: 10

9. Gallery in Views (2) Click + on filters, add Node : Type (is one of ‘before and after photos’ or whatever you named your new content type) Click + on fields, filter by ‘content’. Add Content: Before (field_before_photo) and Content : After (field_after_photo). Don’t add ‘_data’ fields. Select ‘Label : none’ Under ‘Format’, choose ‘Thickbox: before_after_preset image’ or a similar format for lightbox2 that references the imagecache preset.

10. Gallery in Views (3) Click + on sort criteria, add Node : Post Date, Descending Click + on arguments, add Node : User posted or commented, allow username and userID. If no argument is present, give 404. Under ‘Page Settings’ : ‘Path’ update the path to be ‘before-and- after/%’ or something similar Scroll down. Under ‘Live Preview’, choose ‘Page’ and type your username or uid into the box and hit preview. If all was done well, you should see thumbnails of your images. Clicking on them should bring up a lightbox. Your view is now available at ‘http://domain.com/before-and- after/USERNAME’. Note: you will still have to style this view to make the thumbnail images inline instead of stacked.

11. Congrats You now have a working gallery view. You need to make a navigation for it in your profile. This can be done with PHP to get the username or uid and plug it into the link in the profile. You can also use tokens to put in a navigational element (menu item) and insert the item into a block. A custom block with this menu item that has visibility only for authenticated users (or a special role) is a snazzy idea also. The choice is yours!