It has been a year or so since I upgraded my portfolio web site to Drupal 7 and while I have kept an eye out for gallery modules and solutions that are compatible with version 7, none are as easy to configure and implement as the Gallery Formatter module. Here is a rundown on the steps needed to install it and get it running. First head over to the module page on Drupal.org and make sure your site meets all the requirements for the module installation.
Features:
- Two imagecache presets which will work out of the box beautifully.
- The thumbnails run under an infinite carousel.
- Degrades gracefully without JS enabled, the gallery still works.
- Integrated out of the box with thickbox, colorbox (recommended as the thickbox upgrade path), shadowbox and lightbox2 for the view full links.
- Works with the swfupload, image_fupload, and imagefield_crop widgets.
- A hook for modules to provide styles for the galleries.
- Two options for styles, no style and a green arrows style. No style should be used for developing your own styles.
- Source svgs for the green arrows style, so you can use it as an example to expand on, using inkscape for example.
- Fully themeable through tpl file, overriding the template_preprocess, or just CSS. You should know what you are doing if you do so.
To use it:
- Edit the field settings for your image field, select which slide imagecache preset and thumbnail imagecache preset you would like to use.
- Select the jQuery Gallery formatter in the display section for your imagefield.
Note that this only makes sense on multiple value fields obviously.
On Drupal 7:
Drupal 7 allows for formatters to have their own settings, and this module makes full use of that. No longer do you configure the settings in the widget, and you can also set different settings per display mode, etc. To use it simply select jQuery Gallery for your image field, and choose your settings there.
Additional Installation steps
- Create a new content type or add a field to an existing one of Image type and Image widget type. This should be set as an Unlimmited field, as you want to be able to add more than one image to the slideshow.
- Move on to the Manage Display settings for the image field you have just added and ensure the Format column is set to JQuery Gallery click on the widget settings button to the far right of the field row, the one that looks like a wheel (see image on step #4 below) and match the settings as shown on step #5 below.
- Set the slide style to galleryformatter_slide and the thumbnail style to galleryformatter_thumb; both of these styles should be available in your Image styles configuration area after enabling the module. The style for the gallery defaults to Greenarrows.
- Image field settings
- Widget display settings
That should be all you need to do to get the images to show up as a gallery. See sample gallery at the top of this post.
CSS Overrides
I went a step further and inspected the slideshow CSS classes being used in Firebug in order to override and match the column width of my content area. The classes that I edited are listed below. You may wanto edit some additional classes if needed to match your site design.
/* Gallery Formatter JQuery Gallery Styles */
- .galleryformatter h3 {
color: #FFF;
text-transform: none;
font-size: 14px;
font-weight: normal;
}
- .galleryformatter-greenarrows .gallery-thumbs {
padding: 0 0;
}
- .galleryformatter-greenarrows .gallery-thumbs .arrow {
bottom: 20px;
display: block;
height: 46px;
position: absolute;
text-indent: -9999px;
width: 46px;
}
- .galleryformatter-greenarrows .gallery-slides .panel-overlay {
bottom: 0;
}
Putting Your Gallery Formatter Gallery in a Block with Views
This is actually quite simple.
- Create your view and add the block display set up to show fields, unformatted list.
- Ensure your field settings are as follows Formatter set to JQuery Gallery, slide style to galleryformatter_slide, thumbnail style to galleryformatter_thumb and style to Greenarrows
- The setting that does the trick is the Style Settings for the field must have the Use field template checked.
