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 500×400. You can change this later, as you please.
- With the galleriffic_thumbnail style, I recommend a small image. You can start with a scale and crop rule of 75×75. Again, you can change this later.
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.
- Under GALLERY FIELD SETTINGS, change the Number of values from 1 to unlimited and save.
- 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>
- 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.
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.
- 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.
- Label the field as Title.
- 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.
- Repeat the above steps.
- Label the field Thumbnail.
- Again leave MULTIPLE FIELD SETTINGS checked.
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.
- Select Galleriffic Fields.
- 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”.
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!
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:
- 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:
Galleriffic homepage not available?
Hi You can still install it via the drupal module. Thanks for pointing that out.