Last week, two different OSTraining members asked me about using the Juicebox image gallery with Drupal.
To be honest, I had never heard of Juicebox, but the members said that it looked great and worked well. After testing Juicebox, I agree. It’s a good option for people who want a basic image gallery in Drupal.
First, we need to install the extra Juicebox files:
- Go to the Juicebox website and download the Juicebox-Lite free version.
- Go to your Drupal site files and browse to /sites/all/libraries/.
- Create a folder called /juicebox/ so that it’s located in /sites/all/libraries/juicebox/
- Look inside the Juicebox files you downloaded. Upload the content of the /jbcore/ core directory into /sites/all/libraries/juicebox/
- Check to make sure that you have this file and this location: /sites/all/libraries/juicebox/juicebox.js.
Now we can complete the installation:
- Install the Juicebox module and all module dependencies.
Option #1. Galleries attached to nodes, using fields
There are two ways you can use Juicebox.
Option #1 is to add an image gallery to any node.
- Go to Structure > Content types.
- Make sure you have an image field that allows you upload multiple files:
- Click “Manage Display” and set the “Format” for your image field to “Juicebox Gallery”.
- Click “Add Content” and add content to your site, using your image field.
- When you publish your content, the Juicebox gallery will look like this:
The initial Juicebox design was spread all over the page, so I had to make a settings change.
- Go to Structure > Content types > Manage Display.
- Click the small cog next to your image field.
- Click “Show Juicebox Library – Lite Config”.
- Change the “Gallery Height” setting from 100% to something smaller.
Option #2. Juicebox with Views
Option #2 for Juicebox is to combine images that are attached to many different content items.
- Go to Structure > Views.
- Create a new view using the “Juicebox Gallery” format.
- Add the image field that contains the images you want to use with Juicebox.
- Click “Settings” next to “Juicebox Gallery”.
- Under “Image Source”, choose the field that contains the images you want to use.
- As with Option #1, I’d recommend making the gallery shorter. Click “Show Juicebox Library – Lite Config” and change the “Gallery Height” setting from 100% to something smaller.
- Go to “Fields” and click on the image field that you have added.
- You can now choose the settings for your individual images:
There were and couple of complications with Views. First, the preview didn’t work. Second, I did see an error message:
“WARNING: You appear to be using the Juicebox field formatter with a field instance that is not directly attached to an entity. This configuration is not officially supported and will likely not work as expected.”
However, the gallery worked perfectly for me. I saved the View and this was the result: