Create a Juicebox Image Gallery in Drupal
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:
- 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:
Good Job! Steve. Mine is working well, but am using a single photo in a node and adding a caption field. Then a view to display them. Wonder how you’d add a caption if you put multiple photos in the same node. Just thinking! I thing your user base will really appreciate this “modern” gallery/slideshow. Judy
Hi Judy. Thanks for the suggestion of Juicebox 🙂
Inside “Manage Display”, it looks as if you can set the caption to be pulled from the Alt or Title tags.
I’m actually building a module to allow you to leverage Juicebox in the middle of a text field that has text formats enabled on it. I hope to release it before the end of the month, but right now it’s a sandbox on [url=http://Drupal.org]Drupal.org[/url]. Just search for “Juicebox Inline”. Love to have you write a guide on how to use it when it comes out!
That’s great to hear, thanks Dan
Very helpful article.
I was wondering whether there is a way to bulk upload images?
Also, I don’t like seeing Juiceboxe’s frame. Is there any way for the images to occupy 100% of the gallery box so that the frame isn’t displayed?
Cheers
Bulk uploads: this part isn’t handled by Juicebox so you can use any bulk upload technique you use with Drupal.
Frame: yes, I agree. It would need some CSS work to remove that. Looks like there’s a div called .jcbx-glry-classic that’s setting the background color.
Just a heads up, the color set as the background on .jcbx-glry-classic will be overridden by the inline styles that come from the Background Color configuration settings. Those configuration settings are the correct place to set that.
Thanks for the heads up, Dan. I just installed Juicebox for the first time yesterday, so all advice is welcome 🙂
As far as I know there is no method of bulk uploading images for use in a Juicebox gallery. That would really be reliant on the field that held them.
The closest you could come would be using something like Bulk Media Upload ([url=https://www.drupal.org/project/bulk_media_upload)]https://www.drupal.org/proj…[/url] to get the images on the site, but then you would still have to get them in a gallery. Perhaps you could configure a View using method #2 described above to render image files, but you’d need to figure out how to filter out the images you did not want.
As for removing the frame, Juicebox has (particularly the professional version) has a TON of options in this regard. I’d start by setting the background color of the gallery to the same color as your site’s background, just to remove the ‘edge’ of the frame. There are configuration options mentioned above that will allow you to do that for either method.
You should probably try to set the width and height of the gallery. By default, Juicebox’s width and height are set to 100%, meaning they’ll fill whatever space you give them. Setting a width and height does make the gallery less flexible/responsive, but it gives you more control over the space available to images.
The next big thing is to make sure your images are large enough to fill the space you want. Small images will not be stretched in a Juicebox, and if the width and height of the settings of the Juicebox are not where you want them, you’ll get a large space between the edge of the Juicebox and the edge of the image.
Also, make sure your images are consistent in size and aspect ratio. Switching from portrait to landscape images is sure to leave a large amount of space along the edges of the image.
Finally, if you cannot get what you want with those settings, you can try working on the CSS of the gallery itself. It’s also possible to ‘theme’ the Juicebox galleries on the professional version. It should be noted, however, that much of the CSS you would be looking to change will probably be available as settings in Juicebox itself. You can see the full list of configuration options for Juicebox galleries [url=http://www.juicebox.net/support/config_options/]http://www.juicebox.net/sup…[/url] , but note that some of those are not yet available for direct setting through Drupal or not available at all to Lite users. If you are a Pro user, you would have to set them manually in the gallery configuration options.
I came across this via Drupal Planet, thanks Steve for the writeup.
I just wanted to note that the views instructions you’ve posted seem to contain an unnecessary step that you may want to edit out. Specifically, that last step “You can now choose the settings for your individual images” and screenshot could be dropped as the field-specific formatter settings don’t actually have any effect for this type of views usage. All of the formatter settings for the gallery are contained in the views “format” settings that you referred to in an earlier step. Those options (and warning) within the field-specific format settings only exists for special (edge) use cases that are probably beyond the scope of your tutorial.
I also wanted to point out that the views integration offers the ability to do some pretty advanced and powerful gallery setups. Gallery displays that leverage contextual filters, exposed filters, and even things like Search API facets are all possible thanks to the flexibility of views. Some more on that is available for your readers in this module docs – [url=https://www.drupal.org/node/2164865]https://www.drupal.org/node…[/url]
Disclaimer: I’m the author of the Drupal Juicebox integration module.
Many thanks for that, Ryan. For what it’s worth, the documentation is great, for the core and the extra features. Super easy to get up and running.
Hello, is there any option/setting to get a real fullscreen main image? I mean a none-distorted full-width and height. It might be cropped if necessary. The thumbs could sit on-top of the main image. I could not find an info or suitable demo on their homepage. (PS: I don’t like that dark, unsused space 😉 )
Thanks in advance.
Hi pepperstreet
Fullscreen main image? Sorry, I don’t think so, by default.
It seemed easy to remove the dark background with CSS and I suspect the same goes for the padding.
Thanks for your reply, Steve. My first quick investigations with browser dev tools showed a in-optimal structure and there were inline-style properties in PX in different locations. So, I just wondered if it was really “made” to serve a fullscreen display. Gonna have a second look on a later date.
(if someone is quicker than me, drop a comment 😉 )
Thank you very much for such useful post Steve.
I tried your 1st option but my page is showing very scattered gallery.
plz ck at the bottom: https://www.admecindia.co.in/rangoli-design-competition-2017
thanks
Thanks Steve followed your step by step article and my friend who I am helping with her website is ecstatic about the results.
Hi, I am Kirti Gupta & I am a professional graphic designer. Thanks for the article!