FREE Drupal 8 Site Building Course (over 4 hours of video)

How to Create Responsive Image Galleries using Juicebox in Drupal 8

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 an HTML5 responsive image gallery and it integrates with Drupal using the Juicebox module.

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.

If you’re looking for an alternative solution look at Slick, which is open source, and it integrates with Drupal via the Slick module. I will cover this module in a future tutorial.

In this tutorial, you’ll learn how to display an image gallery from an image field and how to display a gallery using Views.

Getting Started

First, go download and install Juicebox and Libraries API module.

Using Drush:

$ drush dl juicebox libraries
$ 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 juicebox.

Once everything has been copied and renamed, the path to juicebox.js should be /libraries/juicebox/juicebox.js.

At the time of this writing, you’ll need to download the dev release of Libraries API (8.x-3.x-dev).

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

Option Value
View name Article gallery
Machine 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.

Summary

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.

FAQ

Q: I get the following error message: “The Juicebox Javascript library does not appear to be installed. Please download and install the most recent version of the Juicebox library.”

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.

Q: I can’t see a Drupal 8 release of Libraries API?

Until they release an alpha or beta, you’ll need to download the dev release (8.x-3.x-dev).

About the Author

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Leave a Reply 17 comments

Lakshan - February 23, 2017 Reply

Thanks Ivan. Very helpful. I have two questions. Hope you can sort them out for me. Thanks in advance

1. I created a content type for images and made it accept multiple values. When I created a view of the content type I see only the first image on the juice box gallery. How can I get all the images to appear in the gallery?

2. How can I get the image to be linked to the original node when clicked?

    Ivan Zugec - February 23, 2017 Reply

    Hi Lakshan,

    1. I created a content type for images and made it accept multiple values. When I created a view of the content type I see only the first image on the juice box gallery. How can I get all the images to appear in the gallery?

    I’m aware it’ll only show the first image. Not sure how to display them all.

    2. How can I get the image to be linked to the original node when clicked?

    I don’t think you can do this out-of-the-box. You could do it by overriding a template and writing a bit of code.

    Cheers,
    Ivan

Susanne Tamir - February 23, 2017 Reply

Like always really good explained and actually i never used juicebox because i thought its for buying only didn t know there is a free version and i will give it a try. I buy things too but only after i know i really need them. Thanks for this great useful tutorial. Susanne

    Ivan Zugec - February 23, 2017 Reply

    Hi Susanne,

    Thanks.

    Give the free version a go and see if you like it.

    Cheers,
    Ivan

Roman Tirler - February 24, 2017 Reply

Greetings,

I tried to follow your instructions to install Juicebox in drupal 8.2.6.
As suggested I installed ‘Libraries’ first and then ‘Juicebox’.
The Libraries API 8.x-3.x-dev installs, creates a folder under/sites/default/files/library-definitions, where /juicebox/juicebox.js should go. See your hint: ‘Once everything has been copied and renamed, the path to juicebox.js should be /libraries/juicebox/juicebox.js.’ However, did all this, and get ‘ The Juicebox library could not be found.. Only later I learned reading the doc for the Library API: This module is currently being ported to Drupal 8, but is not usable yet. Help us by following this issue.
Do you have a solution for drupal 8?
Thanks, Roman

    Ivan Zugec - February 24, 2017 Reply

    Hi Roman,

    UPDATE: April 30th 2017

    Libraries API is required to use the Juicebox module. Sorry about the confusion.

    Tutorial has been updated.

    You do not need Libraries API to set this up. Drupal 8 has it’s own libraries system.

    If you’re using Juicebox in Drupal 7 then you’ll need Libraries API but not for Drupal 8.

    Cheers,
    Ivan

Roman Tirler - February 24, 2017 Reply

Further to my previous mail: the article in ‘drupal newsletter’ : How to create Responsive Image Galleries Using drupal 8′ is misleading. I lost a lot of time, before discovering the reason.
If I a wrong, I like to be corrected.

    Ivan Zugec - February 24, 2017 Reply

    Hi Roman,

    How to create Responsive Image Galleries Using drupal 8′ is misleading. I lost a lot of time, before discovering the reason.

    What do you mean by this? What’s the reason? Are you having a problem?

    Cheers,
    Ivan

sirajudheen - February 27, 2017 Reply

Hi, i have problem with thumnail in views, only first image shows as thumbnail and all images in multifiled treated with same thumbnail image

Hamza Zia - March 16, 2017 Reply

Great write-up Ivan.

There’s one question that I would like your views on. Which one of these do you think is more useful. Colourbox or Juicebox??

    Ivan Zugec - March 16, 2017 Reply

    Hi Hamza,

    Never really used Colorbox on a Drupal site. So I can’t help you there.

    Cheers,
    Ivan

Nancy Gill - April 5, 2017 Reply

In your instructions, you say to create an Image Field in the Article type for the Juicebox images. Why can’t you use the Image field that is already there (Drupal 7) which also means you will not be able to name a new field Image.

    Ivan Zugec - April 5, 2017 Reply

    Hi Nancy,

    I use the Image field for uploading a feature image.

    But there’s no hard or fast rule.

    Cheers,
    Ivan

Bluewater - April 29, 2017 Reply

Hi Ivan,
Having trouble getting this installed .. as per Roman’s comments I came to this through all the threads saying that juicebox required the API which was not yet ported to Drup8 so I was surprised to find this tutorial. Downloaded the module and juicebox, manually created the libraries directory as indicated and renamed so I have /libraries/juicebox/juicebox.js
Drupal will not install the module : Version: 8.x-2.0-beta3
Requires: File, Field, Image, Libraries (missing)

Running 8.3.1 cleared caches, etc. /libraries is off of the root .. am I missing something?

    Ivan Zugec - April 30, 2017 Reply

    Hi Bluewater,

    Having trouble getting this installed .. as per Roman’s comments I came to this through all the threads saying that juicebox required the API which was not yet ported to Drup8 so I was surprised to find this tutorial.

    When you say “the API”, I assume you’re referring to Libraries API?

    Yes, Libraries API is required. I got this wrong (sorry) in the comment you mentioned. I’ve updated the tutorial.

    which was not yet ported to Drup8 so I was surprised to find this tutorial.

    It has been ported across. (https://www.drupal.org/node/2605194) There’s just no alpha or beta release. You’ll need to use the 8.x-3.x-dev release.

Leave a Reply: