Using the Juicebox views style plugin

Users who want to create Juicebox galleries from multiple nodes/entities/files, and leverage the flexibility of views to organize everything, can use the Juicebox views style plugin.

The notes on this page assume you are using a 7.x-2.x or 8.x-2.x version of the Juicebox module. Not all options/features outlined here will be available in 7.x-1.x, though the same general concepts still apply.

Step-by-Step Setup Example

Drupal Views is an extremely flexible tool, and the Juicebox module integrates with it in a fine-grained way to accommodate a broad set of use cases. Most any views that lists files, or content containing image/file fields can become Juicebox galleries.

The steps below outline a basic case where a content type is setup with an image field and then multiple nodes of that type are gathered for display as a Juicebox gallery. This could be considered a starting point for more complex gallery setups that incorporate other views concepts (e.g., filters, relationships, etc.) or a reference if tweaking existing views to work with the Juicebox formetter.

1. Ensure the Juicebox module is properly installed along with the views module.
2. Create a content type to hold the images that will be part of a gallery. Add fields for the image itself (each node will typically only hold one image for this example), a text/html caption field, a title field, etc. You may also choose to add additional fields that views can use for "organizational" purposes (such as a taxonomy reference field to group your images in albums/galleries, etc.).
3. Add some images to your site, along with the relevant title/caption field data, etc., using the content type you just created.
4. Create a new view that lists nodes of the content type that you created. Add a standard page display to this view. Select "Juicebox Gallery" format.
5. Before configuring any Juicebox-specific settings you must first add fields to your view (from the content type fields that you created earlier) for all of the data that Juicebox will use. At a minimum you must add a view field for the actual image source that Juicebox will display. You can optionally add fields for the title text that will accompany each image, the caption text that will accompany each image, a separate thumbnail image source field (if it should be different from the main image source), etc.
6. Setup whatever content filters, sorting options, etc. that you like (e.g., using a taxonomy-based contextual filter to setup distinct albums within this single view definition).
7. Under "format" click "settings" to access the Juicebox-specific display options. Here you can:
   • Specify which of your view fields should be used for each of the Juicebox gallery data elements (image, thumbnail, title, caption). You should have already added a field for each of these to your view, so here you simply need to map each element to the appropriate view field.
   • Specify which image styles to use when displaying images and thumbnails. Note that you first may need to create a new style at /admin/config/media/image-styles if none of the available options are suitable. See the Managing Image Styles notes for more information about selecting image styles.
   • Customize a variety of Juicebox configuration options for this gallery.
8. Save your view. Note that the preview function in the view admin may not display anything, in which case you will need to navigate to the actual view path to see and test the results.

More Advanced Views Integration

The steps above cover the main integration concepts between the Juicebox module and views, but the possibilities are by no means limited to that example.

• File fields, file views and Media module. Views that list content containing file fields, or that list files directly, can also be used to make galleries. This is especially handy for people using the Media and File Entity modules as file and file field data (custom fields added directly to files) can be used to construct galleries.
• Views filters, relationships, etc. Core views concepts (contextual filters, exposed filters, relationships) can all be used as expected allowing multiple galleries and complex gallery information architecture to be built from just one or two views.
• Text formatting. All formatting settings configured on views fields that are used for captions and titles will be respected. So field rewrites and other views tricks can be used there.
• Multiple images per view row. If your gallery's image source is based on an image or file field that's multivalued, by default Juicebox will only display the first item from that field. However, this behavior can be altered based on these notes.
• Views recipes. Some additional notes on views usage can be referenced in the issue queues, such as these notes about building multiple galleries using a taxonomy-based contextual filter and a gallery index.

Usage with existing views (e.g., Node Gallery)

If you have already setup views that list image or file data in some way, or you use a module that implements "bundled" views to manage media, converting those views to use the Juicebox formatter should be fairly straightforward. You just need to ensure that your view display is structured to show "fields" (as opposed to fully-rendered content) and that it includes fields to directly represent each gallery data element (image, title, caption, etc.). After this, it should be possible to enable the Juicebox formatter and configure it as outlined above.

One popular case of adding Juicebox to an existing view is for compatibility with the Node Gallery module. Node Gallery provides a simplified "out-of-the-box" solution for managing galleries without the need to configure any content types and views from scratch. Because it internally leverages views to manage most of its gallery output, adding Juicebox is just a matter of overwriting (or retrofitting) the correct bundled view to use the Juicebox formatter. The quick steps needed to accomplish this are outlined here.