Create an album based image gallery in Drupal 7 using fields and views

This is a follow up tutorial on the popular Create an album based image gallery in Drupal 6 using CCK and views but for Drupal 7. The tutorial will assume that you have Drupal 7 already installed and ready for use. The following contrib modules are required:

• Views
• Ctools
• Colorbox

I personally prefer Colorbox to some of the other lightbox modules, but feel free to use whichever one you want, they should all work in the same way. An alternative can be found in Shadowbox. Lightbox2 doesn't have a D7 release at the time of writing and Thickbox has been discontinued, with the maintainer now working on Colorbox.

The following list is the absolute minimum required to get the gallery functionality, if you don't have one of these modules installed you won't be able to complete the tutorial.

• Views
• Ctools
• Colorbox
• Fields
• Fields UI
• Field SQL storage
• File
• Image

Once you have confirmed all these modules are installed you can continue.

Setting up the content type

The result of this tutorial will be a host of gallery nodes which can include either a predefined number or no limit of images. So we will need to create a content type for these galleries.

Go to Structure then Content types and click the Add content type link.

For the Name, enter Gallery.

Enter a description and set any of the additional settings. I am going to leave them all at default other than Promoted to front page, which I am going to uncheck (I will show you why later on).

Click Save and add fields. The first thing I am going to do is remove the Body as I won't be using it.

Under Add new field, enter Images in the label box and images in the name box. Under Field, select Image and under Widget select Image. Press Save.

On the next screen just press Save field settings.

Tick the Required field checkbox and enter any restrictions you want to place on image resolution/size. Change Number of values to the maximum number of images you want to appear in each individual gallery, I am going to set this to unlimited. Click Save settings.

Select the Manage display tab. For Label select <Hidden> and for Format select Colorbox. On the right hand side, click on the cog to bring up the settings for the image field. For Node image style select thumbnail or medium. Leave Colorbox image style set to None (original image). Click Save.

We now have our gallery content type set up. At this point you can set up any permissions you want to give to users so they can create galleries or any workflows that you need to set up or configure.

If possible, create a few test galleries with a few images in each. Doing so will help see what each change in the Views module makes.

Creating the galleries page

Go to Structure then Views and click Add new view.

The Views interface has changed slightly (for the better in my opinion) from D6 which does a fair amount of the work for us. Enter in a name for the View and a description if you wish.

In the first section, select Content of type Gallery sorted by Newest first.

In the next section enter the information like below. You can change most of it, but keep the Display format set to Grid of Fields.

Click Continue and edit.

Under Format, where it says Grid, click the link that says Settings. Change the Number of columns to 3. Click Apply.

In the Fields section, click the Add button. Click the checkbox next to Content: Images then click Add and configure fields.

Uncheck the Create a label box and make sure the Formatter is set to Image and Image style is set to thumbnail. For Link image to, set to Content.

Under Multiple field settings make sure the box to Display all values in the same row is checked and the Display type is set to Simple separator, then delete the text in the Separator field. Finally set the Display value(s) to 1.

Click Apply.

At the bottom of the window the preview should now be showing you what your gallery page will look like.

Click Save at the top right to save the View. Then go the gallery page.

Clicking on one of the images or the gallery title will take you through to the node with the full gallery of images which will open in Colorbox modal window.

Additional changes

Changing the HTML of the galleries page

The basic semantics that come out of Views aren't always the best but you have control to change some of this within Views itself. For Drupal 6, I found the Semantic Views module invaluable, hopefully a full D7 release will come out soon.

In the View edit screen, under Fields click Content: Title.

Under Style settings, check the box for Wrap field in HTML and set the HTML element to something which fits in with the flow of your page.

Click Apply and save the View.

Have featured galleries appear at the top of the page

You may have some galleries which are to always appear at the top, there are two ways you can do this within Views.

1) Sticky/Promoted content

You can set the ordering of the view so that Sticky/Promoted content appears first. This is fine if you want the display of these galleries to be the same.

2) Views Attachments

If you want to give more focus to the featured galleries, we can create a Views attachment which we can make appear before the rest of the View which will highlight the selected galleries.

In the edit screen of your view, at the very top under the text Displays click Add then select Attachment.

Under Title, click the link and change the settings so it looks like the following:

Remember to change the For to This attachment (override) so that we don't override the basic page's settings. Click Apply.

Now under Fields click Content: Images. Again change For to This attachment (override). Change the Image style from thumbnail to medium.

Click Apply.

Next to Filter criteria click the Add button. Select Content: Promoted to front page and press Add and configure filter criteria.

Once again change For to This attachment (override) and set Promoted to front page to Yes. Click Apply. You may need to go back in and set this to Yes again, I think there is a bug in Views when creating a new filter with override selected.

Under Attachment settings, Attach to click Not defined. Tick Page and press Apply.

Under Displays, click Page. That little bug I briefed upon means that the filter has also appeared on our main page (it shouldn't of). Select it and either remove it if you don't mind the featured galleries appearing twice on the page, otherwise set to No and press Apply.

Save the View and go to the galleries page.

Go in to one of the galleries, click Edit and tick the box next to Promote to front page.

Now go back to your galleries page and you should have two lots of galleries with your promoted gallery appearing at the top with the other galleries underneath with smaller thumbnails. The image below shows what you should have had before promoting the gallery (above the red line) then what it should look like afterwards (below the red line).

All cosmetic changes can be made through the CSS in your theme.

Downloadable Feature

You can download a feature of this from here.

Node view

Some people have mentioned that the node view once you have done this just displays a single column of images and wish to make it a grid like the gallery page. I have written a new tutorial about using Panels and Views to override the node template.