Create an image gallery using CCK and Views

Since Drupal is headed toward doing as much as possible with CCK and Views, I wanted to try to create a photo gallery using CCK and Views, rather than Image Module (with the included Image Gallery). I also wanted to use Imagecache, which allows for automatically re-sizing (and cropping) of images previously uploaded (Image Module does not do that).

[For those who don’t know, Imagecache stores the original image file you upload, then creates and stores re-sized images based on your Imagecache presets. Down the road you can change those presets and regenerate all of your re-sized images, instead of having to re-upload all of them again. Very cool.]

This is what I used:

• Drupal 5.x
• CCK 5.x-1.3 (the module is called 'Content Construction Kit', not CCK)
• Imagefield 5.x-1.x-dev (2007-Feb-23)
• Imagecache 5.x-1.1
• Views 5.x-1.5
• Views Bonus Pack 5.x-1.0
• Custom Pagers 5.x-1.7
• Thickbox 5.x-1.x-dev (2007-May-05)

[Note: I did NOT have Image module installed. That may be important – not sure as I have not tried this with Image module installed.]

STEPS:

1. Install and enable all of the above modules.

2. Go into Imagecache administration (In Drupal 5: admin/settings/imagecache; In Drupal 6: admin/build/imagecache) and create your image presets. I created these two:

a. 'Square Thumbnail' – scale to 150 x 150 then crop to 75 x 75
b. 'Display' – scale to 650 x 650

On both of the above I chose 'Inside dimensions' for the 'Scale to fit' option in the scale section.

The 'Square Thumbnail' will be used in the gallery and the 'Display' will be used when viewing the full photos.

3. Go to administer content types (admin/content/types) and create a content type for images. I called mine 'Image' (not to be confused with the Image content type that Image module creates) and used the lowercase 'image' for 'Type' (the machine readable name).

[Note: I don’t think it matters what you call this content type. However, I have not tried using anything other than 'image' for the 'Type' (machine readable name). If other modules used here look for a content type called 'image' (I don't know if they do) then possibly this whole thing won't work if you don’t call it 'image'. Just guessing this could be a problem.]

4. Add an image field to your 'Image' content type. I called that field 'Image' also. [It definitely does not matter what you call this field.] When you create this field you can choose the Imagecache preset to use for teaser and body of nodes. Visit the 'Display fields' tab and change the label to be hidden, so as to not show the label 'Image:' on every picture.

5. Now create a View (admin/build/views). I called mine 'Image Gallery'. You just need a Page, not a Block. Choose 'gallery' for the Page URL (or whatever you want).

a. In the Page settings, choose the 'Bonus: Grid View' for the View Type. I used 24 nodes per page – shooting for a 6 wide by 4 tall grid (max size).

b. In the fields section add the fields 'Title' and 'Image' (your CCK image field created in 2 above).

c. On the image field, choose 'Do not group multiple values' for 'Handler' and chose the Imagecache preset size that you want to use for your gallery images in the 'Option' section. If you installed the Thickbox module, you should see an option called 'Thickbox: Square_Thumbnail' (where 'Square_Thumbnail' is the name of an Imagecache preset you created in 2 above). Choose that one.

d. In the Filters section choose

Node Published = Yes
Node Type 'is one of' Image (where 'Image' is what you called your CCK image content type).

e. The 'Bonus: Grid View' defaults to 4 columns wide. If you want to change that, find this code in the 'views_bonus' module:

Cut an paste that entire function into your theme's template.php file and rename it from 'theme_views_bonus_view_grid' to 'yourthemename_views_bonus_view_grid'. I was using the Zen theme so I called the function 'zen_views_bonus_view_grid'.

You will see this code in two places

Just change the 4 (in both places you see it) to whatever number of columns you want. I changed mine to 6 to make a 6 column wide grid (table).

So at this point, if you have created some CCK image nodes, you should see a gallery of them here [yourdomain] /?q=gallery (if you used 'gallery' for your gallery View page URL).

There should be a table that shows each image with title underneath. Clicking on the image fires up Thickbox (if JavaScript is enabled). Clicking the title gets you to the image node itself.

Having the title there with a link to the image node is optional (don’t add it in step 5b above if you don’t want it). I thought it would be good to include because if JavaScript is not enabled, Thickbox just sends you to the image itself, which is not so great for an image gallery (it would be cool if somehow Thickbox could send you to the image node instead of just to the image file – any ideas?).

Now, it would be nice to have a pager on the image node page so that you can page through each image in the gallery when looking at image nodes.

6. Go into administer 'Custom pagers' (admin/build/custom_pagers). Click 'Add a new custom pager'. Most of the settings will be obvious, but these are two key ones:

Node Type = Image (or again whatever you called you CCK image content type)

In the "Use a view" section, pick the name of your gallery view (created in 5 above).

Now go back to your gallery [yourdomain] /?q=gallery and click one of the title links on the gallery images to go to an image node and you should see pagers on top or bottom (or both) of your image, depending on the settings you chose in your custom pager.

One final thing: to create multiple galleries, you can use taxonomy (admin/content/taxonomy). I created a taxonomy vocabulary called 'Image Gallery' and added terms to that vocabulary (e.g. Gallery 1, Gallery 2, etc.). When creating each Image you can pick a gallery (term) to put it into. You have to create a view for each gallery, and when you do, add 'Taxonomy' to the 'Filters' section of the view, picking what term you want the gallery to use. OR you can create one gallery view and 'expose' the taxonomy filter so people can choose what gallery to look at.

OK that's it. Hope this is helpful.

Many, many thanks to the folks who worked on these modules. It just plain worked and I didn’t have to mess around at all. I was particularly amazed when I enabled Thickbox and the option to show the Thickbox version of my CCK image field just showed up in my gallery View options!

-------------

Addition May 21, 2007:
See Elliott Rothman's excellent screencast on this here:
http://blip.tv/file/971610
(per his comment below)

-------------

Adding Taxonomy

Someone asked about how to create multiple galleries with taxonomy.

Steps:

1. Go to Administer/Categories (admin/content/taxonomy)

2. Click the 'Add Vocabulary' tab

3. Call the vocabulary 'Image Gallery'

4. In the 'Types' section, check the checkbox next to the CCK content type you created for images (mine is called 'Image')

5. Once the vocabulary is created, add terms to it:

'Gallery 1'
'Gallery 2'
'Gallery 3'
etc… or whatever you want to name your galleries

Now when you go to create or edit an image content type, you will see a drop down list for 'Image Gallery' so you can choose what gallery to put each image into.

6. Now go back to the View you created before for your gallery (admin/build/views), and you have two choices:

a. If you want just one gallery page, with a drop down choice to pick what gallery to view, you will edit your View. Go to the 'Filters' section of the your View and add 'Taxonomy: Terms for Image Gallery'. Then make that filter 'exposed'. This will expose a drop down choice in the page of the View so people can choose a gallery.

b. If you want to create a separate page for each gallery, then do the same as above, but do not expose the 'Taxonomy: Terms for Image Gallery' filter and instead, choose one of the terms (galleries) to show in that View. Save that View, then clone the View and repeat for as many pages (galleries) as you have.

That's it.