| Drupal
Create a Drupal Photo Gallery with Views Galleriffic

An OSTraining member asked us how to use the Galleriffic JQuery plugin with Drupal.

The standalone version of Galleriffic allows you to create styling image galleries and slideshows.

The Drupal integration with Galleriffic allows you to use Views to create galleries. These galleries can be attached to nodes themselves or act as stand-alone galleries. 

Step #1. Installation and set up

You'll need three modules to make this tutorial work:

 We also need to create image styles. Galleriffic requires you to define at least 2 styles. 

  • Go to Configuration > Image Styles > Add style.
  • I recommend creating styles called galleriffic_slide and galleriffic_thumbnail.
  • With the galleriffic_slide style, I recommend a large image. You can start with a scale and crop rule of 500x400. You can change this later, as you please.
Slider configuration
  • With the galleriffic_thumbnail style, I recommend a small image. You can start with a scale and crop rule of 75x75. Again, you can change this later.
Thumbnail configuration

Step #2. Adding the Gallery Content

  • Go to Structure > Content type > Add content type.
  • Add a new field. For the label, enter gallery and select image for the field type.
Adding the Gallery Content
  • Under GALLERY FIELD SETTINGS, change the Number of values from 1 to unlimited and save.
Configuring the field type Image
  • Click the "Manage Display" tab.
  • This content type's primary purpose is to simply add the images and not to display anything. So, set the FORMAT for gallery to <Hidden>
Managing the Display
Now we're going to create a Gallery node with multiple images.
  • Go to Content > Gallery.
  • Upload the images you want to put into gallery here. For the purpose of this tutorial, I used the Devel module to create dummy content.
Create a Gallery node with multiple images

Step #3. Creating the view

Now that we have content, it's time to put it in a View so we can style it.

  • Go to Structure > Views > Add New View,
  • Uncheck Create a Page. Do not select block or page.
  • Click Continue and Edit.
Creating the view
  • Remove the Content: Title field.

Now we need to add at least 3 fields to the view because Galleriffic requires at the minimum 2 fields. We will be adding the same field but applying different options to them.

  • Click Add field. 
  • Choose your gallery field.
Create a Drupal Photo Gallery with Views Galleriffic
  • Label the field as Title.
Now in MULTIPLE FIELD SETTING, uncheck Display all values in the same row. Note that this is important.
  • Add the Content: gallery field again.
  • This time giving it the label Slide.
  • Changing the image style to galleriffic_slide 
  • Uncheck the field MULTIPLE FIELD SETTINGS.
Add images
  • Repeat the above steps.
  • Label the field Thumbnail.
  • Again leave MULTIPLE FIELD SETTINGS checked.
Adding Thumbnails

Now we have roughly the layout we want, but we still need to apply the galleriffic settings.

  • Select Unformatted list under FORMAT.
  • From the list of options, choose Galleriffic Gallery.
  • Now you will have alist of configuration options. Select Apply.
Updating the view FORMAT
  • Select Galleriffic Fields.
FORMAT Show Field settings
  • Add the fields as I have in the image below. It is import to provide fields for all these records or you may encounter this message "Warning: Creating default object from empty value in template_preprocess_views_galleriffic_view_gallerifficrows".
Applying Galleriffic Settings

Step #4. Finishing the slideshow

Now in the Preview section at the bottom of the view, you should see something like the image below. Make sure you save your view at this point!

Previewing the slidwshow

Now we have our slideshow ready, we need to add it to the site. For this tutorial, I am going to display it as a page.

  • From the Add menu, select Page:
Making the Galleriffic Page
  •  Under PAGE SETTINGS, add a Path. Be sure to update the preview and save the Path.
  • You should be able to navigate to your galleriffic slideshow! The image below shows the end result:

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.