Simple Drupal 7 Galleries

Viewing the gallery

Viewing the gallery

An issue I faced quite early on with Drupal 7 was how to add a gallery to pages. Many of the modules are lagging behind with their support for the latest version or are overkill. The Gallery plugin, for example, doesn’t currently support Drupal 7 and is probably too much for those wanting the odd gallery on their website.

The good news is that Drupal 7 includes the Content Construction Kit (CCK), ImageField and ImageCache as part of its core, so making a gallery turns out to be relatively simple. The only additional module I made use of was ColorBox, so be sure to install and enable that before following the steps below. It’s currently in beta for 7.x but working well.

Before starting though, it’s important to know the limitations of this approach. Firstly you can only use one upload location per content type so you could end up with a very big unorganised folder if one content type has a lot of images associated with it. I tried to negate this as much as possible through the use of custom content types depending on the information the page was displaying. This is good practice anyway, but it goes without saying not to force this and have a lot of meaningless or very similar types just to get a different upload location. Certainly don’t create a content type for a particular instance of an entity. You will also only be able to upload one image at a time, so you may find this too tedious if you have a lot of images.

The first step is to create a content type with an ImageField. To do this, go to ‘structure’ in the menu and then ‘content types’. Click ‘add a content type’ and after naming and applying any other desired settings (such as default parent in the menu), choose to save and add fields.

Add a field with type ‘Image’, using the ‘Image widget’. Give it a sensible label and name then click ‘save’. You’ll probably want to specify ‘public’ as the upload location now, but you may choose to use a private location to control access to the images.  Although you may control access to the gallery page, remember that using a public location will mean that anyone could navigate directly to the images.

Editing the gallery

Editing the gallery

Continue and specify a file directory. This directory will be created inside your public or private files directory, depending on the location you specified previously. If desired, you can also specify maximum and minimum allowed resolutions. If you want to add captions to your image, choose ‘Enable title field’. For the preview type, you’ll probably want to use thumbnail, it’s just the type of image you’ll see while editing, not what visitors will see. The number of values option is the most important; it will allow you to specify multiple images per single node. Generally you’ll want ‘unlimited’. Once you’ve saved the field you’ll be back at the field listing where you can add more fields if desired. Click the ‘manage display’ tab and for your image field, change the format to ColorBox. Then click the ‘cog’ (edit) icon at the end of  the row and set the image style to ‘thumbnail’ and the link as ‘to file’. Click ‘update’ and then ‘save’.

When you go to create an instance of your new content type you’ll be able to upload multiple images which will then be displayed one after the other on the page. Adding some simple CSS to your theme can make the display of this more appealing. The CSS class to use will depend on what you called the field. For example, for a field named ‘gallery’ the following CSS will place images horizontally with a border which changes on hover:

.field-name-field-gallery img {
    border: 2px solid #CCC;
    float: left;
    margin-bottom: 5px;
    margin-right: 5px;
}
.field-name-field-gallery img:hover {
    border: 2px solid #000;
}

By specifying a title, ColorBox will use this in its caption area. Once you have saved and view the page, you should note that clicking the image shows a ColorBox overlay which lets you view the image at full size and also easily navigate between images.

Finally, you can customise the way ColorBox works at Configuration, Media, ColorBox. In particular I chose ‘Per field gallery’, this depends somewhat on preference and only comes into play if you decide to add multiple ‘galleries’ to a page. You can change how your thumbnails look at Configuration, Media, Image Styles. The clever thing about this is that you can change the thumbnail style even after you’ve uploaded images; the existing thumbnails will automatically update to fit the new style.

That completes the components of simple ImageField based gallery; no doubt there’ll be more options once modules start to catch up with Drupal 7.

This entry was posted in Drupal and tagged . Bookmark the permalink.

4 Responses to Simple Drupal 7 Galleries

  1. I tried this and all my thumbnails are on one column on the right side of the page. I’m out of ideas. I don’t know what happened between d7.0 and now but this is a show stopper.

    • By default they should appear in a column on the left. I probably glossed over the CSS element too quickly, but to make the thumbnails display horizontally it will take some CSS. I have now added an example to the post.

  2. very nice info…works perfect..

  3. ibrahim says:

    thank you very much. some times ago i solved this problem with

    .field-type-image img,
    .user-picture img {
    margin: 0 5px 1em;
    float: left;
    }

    but this this changed all images setting, which i dont want. i saw your post and than i think it is answer of problem which i cant solve.

    can i ask you a question?
    i have a content type galley which have a two field, images and text (about gallery)
    when i upload images they insert in text which is a bad view. i want seperate uploaded images and text (it can be upper or below to images) with a “hr”. how can do this with css.

Leave a Reply to Garry Freemyer Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>