| Drupal
logo juicebox

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.

Installing Juicebox

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:

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:
Create a Juicebox Image Gallery in Drupal
  • 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:

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.