Most websites these days have some sort of image gallery functionality. With the rise of mobile and tablet devices, it’s important to make sure that image galleries are responsive. There’s nothing more painful than trying to press the tiny next button when viewing a non-responsive image gallery on a mobile device.
In this tutorial, we’ll create an image gallery from a field formatter and a gallery using the Views module.
If you prefer Drush, run the following command:
$ drush dl juicebox libraries views ctools
Download Juicebox Library
Go to the Juicebox download page and download the Lite version.
Extract the downloaded file somewhere onto your file-system and copy the
jbcore folder within the zip file into
sites/all/libraries and rename the
jbcore directory to
Once everything has been copied and renamed the path to
juicebox.js should be
Configure Formatter Gallery
In this section, we’ll create a gallery using just the Image field formatter on the Article content type. But before we begin we’ll need to make a single change to the field.
If you’re following along with this tutorial, just install Drupal using the standard installation profile.
1. Go to Structure -> “Content types” and click on the “manage field” link for the Article content type (admin/structure/types/manage/article/fields).
2. Click on the edit link for the Image field.
3. Check the “Enable Title field” checkbox and select “Unlimited” from the “Numbers of values” drop-down list.
4. Scroll down and click on “Save settings”.
It is important that you enable the Alt and Title field on the Image field because they’ll be used as the image title and caption within a gallery.
Now we’ll need to enable the “Juicebox gallery” formatter on the image field.
1. Go to Structure -> “Content types” and click on the “manage display”.
2. Select “Juicebox gallery” from the Format drop-down list and click on Save.
The default format settings are pretty good. However, you can adjust the width and height, and resize the main and thumbnail images by using a custom image style. For this tutorial, we’ll change the “Gallery Height” to
Now, go and create an article and upload some images.
Once an article has been created, you should see the images within a gallery.
Create Gallery View
In the last section, we configured the Image field formatter to be displayed as a gallery. Now, we’ll create a gallery using Views. The benefit of using Views is that you can display a bunch of article images as a single gallery.
1. Go to Structure -> Views (admin/structure/views) and click on the “Add new view” link.
2. Fill in the “Add new view” form with the values defined in Table 1.0.
Table 1-0. Create a new view
|Create a page||Checked|
|Display format||Juicebox Gallery|
|Items to display||0|
|Use a pager||Uncheck|
3. Add the Image field to the view.
4. While you’re still in the configure field section for the Image field, uncheck the “Display all values in the same row” checkbox within the “Multiple field settings” field-set.
If you do not uncheck this option, then only a single image for each article will appear.
5. Click on the Settings link for the “Juicebox Gallery” and change the “Gallery Height” to 60%.
6. Save the view and go to
You should see an image gallery full of images that have been uploaded into articles.
And finally, the same gallery but on a mobile device.
If you have any questions, please leave a comment.
Special thanks to Life in Croatia for suppling article photography.