I’ve been building websites for the last 10 years. Design fads come and go but image galleries have stood the test of time and every client I’ve had has asked for one.
There are a lot of image gallery libraries out there, but today I want to show you how to use Juicebox.
Juicebox is not open source, instead it offers a free version which is fully useable but you are limited to 50 images per gallery. The pro version allows for unlimited images and more features.
In this tutorial, you’ll learn how to display an image gallery from an image field and how to display a gallery using Views.
First, go download and install the Juicebox module.
$ drush dl juicebox $ drush en juicebox
Download Juicebox Library
Go to the Juicebox download page and download the free version.
Extract the downloaded file and copy the
jbcore folder within the zip file into
/libraries and rename the
jbcore directory to
Once everything has been copied and renamed, the path to
juicebox.js should be
Create a Gallery Using Fields
We’ll first look at how to create a gallery using just an image field. To do this, we’ll create an image field called “Image gallery” and this field will be used to store the images.
1. Go to Structure, “Content types” and click on “Manage fields” on the Article row.
2. Click on “Add field” and select Image from “Add a new field”.
3. Enter “Image gallery” into Label and click on “Save and continue”.
4. Change “Allowed number of values” to Unlimited and click on “Save field settings”.
You’ll need to do this if you want to store multiple images.
5. On the Edit page leave it as is and click on “Save settings”.
Configure Juicebox Gallery Formatter
Now that we’ve created the image fields, let’s configure the actual Juicebox gallery through the field formatter.
1. Click “Manage display”, and select “Juicebox Gallery” from the Format drop-down on the “Image gallery” field.
2. Click on the cogwheel to configure the gallery. Now there a lot of options but the only change we’ll make is to set the image alt text as the caption.
3. Click on the “Lite config” field-set and change the height to 500px.
4. Reorder the field so it’s below Body.
5. Click on Save at the bottom of the page.
Now if you go and create a test article and add images into the gallery you should see them below the Body field.
Create a Gallery Using Views
You’ve seen how to create a gallery using just the Juicebox gallery formatter, let’s now look at using Views to create a gallery.
We’ll create a single gallery that’ll use the first image of every gallery on the Article content type.
Update: There’s currently an issue with Views and Juicebox where it’ll only show the first image from a multi-value field. For more details go to this issue on drupal.org.
1. Go to Structure, Views and click on “Add view”.
2. Fill in the “Add new view” form with the values defined in Table 1-0.
Table 1-0. Create a new view
|View name||Article gallery|
|Show||Content type of Article sorted by Newest first|
|Create a page||Unchecked|
|Create a block||Unchecked|
3. Click on Add in the Fields section.
4. Search for the “Image gallery” field and add it to the view.
5. Change the Format from “Unformatted list” to “Juicebox Gallery” and click on Apply.
6. On the “Page: Style options” select the image field in “Image Source” and “Thumbnail Source”. The one you added to the View earlier.
You can configure the look and feel by expanding the “Lite config” field-set. You can change the width and height, text color and more.
7. Click on Apply.
8.Click on Add next to Master and select Page from the drop-down.
9. Make sure you set a path in the “Page settings” section. Add something like /gallery.
10. Do not forget to save the View by clicking on Save.
11. Make sure you have some test articles and go to /gallery. You should see a gallery made up of the first image from each gallery.
The reason I like Juicebox in Drupal is because it’s easy to set up. With little effort you can get a nice responsive image gallery from a field or a view. The only downside I can see is that it’s not open source.
This means Drupal can’t detect the Juicebox library in the /libraries directory. Refer to the “Getting started” section.
Q: I created a gallery using Views but it’s only displaying the first image. I want it to display all the images from a multi-value field.
This is a known issue with Views and Juicebox.