Views recipies: Configure View for multiple albums, contextual filters, etc.

Hi Ursula00,

So you have a bunch of nodes that represent galleries (using the field formatter, with multiple images per node) and you want to present an "index" of those galleries using a view? Furthermore, you want this index view to itself be a Juicebox gallery?

If so, you should be able to partially achieve this currently. What you probably have is a view that simply displays either the full version or the teaser version of your gallery nodes as-is, which leads to a display with a bunch of little Juicebox galleries all on one page. What you probably want instead is a view that displays fields and uses the Juicebox Gallery view formatter. With this setup you can create a Juicebox gallery that displays the first image from each of your node galleries within a single Juicebox gallery.

Basically you would need to just follow the "Using the Juicebox views style plugin" instructions from the documentation and just ignore the notes that say each node in the view should only hold one image (if they have more than one only the first will be shown by default).

The piece that won't work currently is having the images in this Juicebox "index" gallery link to the full node display that they come from. Though that concept is being explored a bit here:

#1975986: Add ability to allow linkUrl to be set via admin options

Let me know if that helps.

I hope my comments above helped. As it seems that the only "missing" piece is the ability to set a custom linkUrl parameter (link to the node the image comes from instead of the image itself), and as that's being addressed in #1975986: Add ability to allow linkUrl to be set via admin options, I'm going to go ahead and close this a dup. If I'm missing something else feel free to re-open.

Hummm, if experimenting with the setup I outlined in comment #1 just be sure that you are in fact using the views Juicebox Gallery formatter (in the "format" settings of your view page), and that you have configured its settings. If you don't do this, and your view is listing nodes that use the Juicebox field formatter, you may certainly continue to see multiple galleries on the same page.

However, if what you really want to achieve is something similar to the example in http://www.juicebox.net/demos/support/resizable_top_menu/gallery1/ you may not even need a view, and you certainly don't need the "pro" version of the Juicebox library. I think all you really need to do is setup a block that shows simple links to the individual node galleries that you already setup (you could even use a menu-based block to set this up) and then set that block to be visible on all your gallery pages. This block would act just like the table of contents in the linked example. Getting things exactly the way you want could require some custom theme work, but it should certainly be possible with this module and some core Drupal adjustments.

Hi Ryan:

I'm in the same predicament though I am "Using the Juicebox views style plugin" configuration. I have successfully created the content type and added images using this content type. Also, I created a view, with a page to display this view using the display format "Juicebox Gallery".
.
What is not clear is the step-by-step process to utilise the taxonomy reference field in a taxonomy-based contextual filter to group/setup images into distinct albums within this single view definition.
.
What I have now is one juicebox gallery, showing all the images (understandably so, because I have not setup a taxonomy-based contextual filter!) regardless of whether different images are tagged to different taxonomy tags. However, my view is already set to display fields and uses the Juicebox Gallery view formatter.
.
What I am working towards as an end result is a page having a Juicebox "index" gallery based on the taxonomy reference field, displaying the first image that was uploaded and tagged with this particular taxonomy reference field. That is, I have the following values of the taxonomy reference field: Nairobi, Johannesburg and Cairo. I have uploaded images and tagged each with one of those values. The "index" gallery will have three images representing each of the values of the taxonomy reference field; when a visitor clicks on Nairobi, it loads another Juicebox gallery of all images tagged with Nairobi only. The same applies for Johannesburg and Cairo. How do I achieve this?

Hi dee.gee

The steps for setting up the contextual filter are not specific/unique for Juicebox-based view, so I think your best reference there will be to check-out one of the good tutorials on contextual filters... maybe something like this one: http://www.metaltoad.com/blog/using-drupal-contextual-filters-views

In terms of building your index, this could also be presented as a Juicebox gallery, but that might not be the most user-friendly way to do it. I say this because the output that the Juicebox javascript can produce is not really friendly to the kind of index type browsing that most people would expect in a site navigation tool. Anyway, if you still wanted to do this you would probably be best served setting up your index view as a list of taxonomy terms, as opposed to image nodes. You could then add fields to these terms (and then expose them to Juicebox as titles/captions) to show whatever text info you wanted within the index. I'm not really sure how you could grab the first image from each term automatically, but you might be able to pull that off with a clever relationship setup in the view. Otherwise you could add a new image field to each taxonomy term and then manually upload a "highlight" image there for each term that you want to present in your index (and use that as the image value in the Juicebox format configuration).

If you have the Pro version of Juicebox may also want to check out the "imageClickMode" configuration option at http://juicebox.net/support/config_options ... with this you can tell Juicebox to link each image directly to it's linkURL value. This linkURL value can then be customized (linked to a field) in the "advanced" Juicebox format configuration, and could be set to point to the taxonomy term page where your main galleries are presented as views with contextual filters.

So I suppose that what you are trying to do is possible, but certainly does get into some more advanced views configurations.

Ryan:

Your explanation is a bit complex for a drupal newbie like myself. So, far I would not like to deviate from the "Using the Juicebox views style plugin" configuration that I have in place.
.
Maybe, it would be easier for you to explain step-by-step how you came up with: http://www.ryan-jacobs.net/photos?jb-demo=1
.
I say this because this is what I am planning to execute for a website that I am building. Thanks.

Hi dee.gee,

The setup for the example gallery at http://www.ryan-jacobs.net/photos uses two views, one that lists a custom "image" content type (and uses a taxonomy-based contextual filter to create multiple albums), and another that lists taxonomy terms (from the same vocabulary that is used in the contextual filter on the first view) to create an album index. Note that this setup does not use Juicebox in any way for the index, it only uses the Juicebox display formatter for the albums themselves.

I think that most of the configuration details that get tricky with this are views-specific (and not actually related to this module), so some of the support that you need might be beyond the scope of this module-specific issue queue, but I can try to help out as best I can. I'd suggest you start by getting everything working without Juicebox. This would mean getting your galleries to display as an indexed set of unformulated images (to sort out all the views stuff) and then adding the Juicebox formatting last.

First, to focus on your view that will power the gallery itself, it sounds like you already have this setup, and you just need to add the contextual filter part. I assume that you already have a taxonomy vocabulary setup for your images, and have begun tagging the image nodes with these terms (via a term reference field)? If so, all you would need to do is add a contextual filter to your view of the type "Content: Has taxonomy term ID" (under the advanced options). This will allow the view to filter itself based on a term ID that is dynamically included in the URL. The settings that come up for the filter can be a bit detailed, but I think you'll just want to adjust is the option "override title" (check this and enter %1 in the box to show the taxonomy name as the page title) and the option "specify validation criteria" (check this and choose "taxonomy term" as the validator from the pick-list).

Once this is done, you should be able to view your taxonomy-powered galleries by simply adding a taxonomy term id to the view path. So if your view path is "images" and you have a taxonomy term of "apples" that uses an ID of 10, you can see just the images tagged as "apples" by going to www.yourdomain.com/images/10

If you get stuck there are a few good tutorials out there that get into more details on setting-up views-based contextual filters. Anyway, let's leave it at that for now and see how things go with this first step before getting into the specifics of the the second view (the index).

Hi Ryan:

Thanks very much for your response.
.
The first step has been successfully executed; I can now see the various albums using ID of the taxonomy term in the URL. That is, www.mydomain.com/images/39 only shows an album with images tagged with a taxonomy term whose ID is 39.
.
Please proceed with the second view (the index). Thanks

Ok, glad that you were able to work out the contextual filters.

When setting-up an index I should stress that there are many many different ways to do things with views (from both a structural and visual perspective). Hopefully these notes can serve as one example to get anyone interested in this concept started.

So the basic idea here is to create an index display of taxonomy terms, each of which clicks-through to a views/taxonomy based gallery that's been automatically filtered by a contextual filter. I suggest the following:

1. Add a new image field to the taxonomy terms that you are using to classify your groups/albums (via the "manage fields" tab when editing the vocabulary). This can serve as a place to manually upload a "highlight" image for each gallery, which can then be displayed on the index itself.
2. Edit your vocabulary's taxonomy terms and upload a new "highlight" image for each (into the field you just created). You will probably just be reusing an image that's already uploaded within your gallery data (so it may seem redundant), but this allows you very custom control over what images are displayed for each gallery within the index.
3. Add a new index view that lists taxonomy terms of the type specified by your gallery vocabulary. You can start by making your display format a grid of fields.
4. Continue editing the view and add a field for the taxonomy title (this will be the gallery title) and for the "highlight" image that you created a field for in the first step. For the highlight image you'll probably want to set the "Image Style" to be something small, like thumbnail, and also set the image to link to its taxonomy term page (so clicking on the image opens the gallery).
5. Further play with and tweak the display details for your grid, highlight images, etc.. until your have a nice looking index. Save the view.

So now you have an index view that should show one value for each taxonomy term that you use to define a gallery (along with a nice highlight image for each). However, you'll notice that when you click on each option you go to a Drupal path that is something like /taxonomy/term/10 .... but instead you want it to go to your gallery view (the one with the Juicebox formatter and the contextual filter)... like /images/10. So the last step is to "override" the default Drupal taxonomy term display with your gallery view. I personally accomplish this with a helper module called Taxonomy Display, and I can post some additional notes about that shortly.

Now, onto that last point... linking the taxonomy-powered index to the contextually-filtered gallery. As with all things in Drupal, there are multiple ways to do this (just skip to the last paragraph in this comment if you just want my recommendation on the easiest way to do things):

• You could setup your contextually-filtered gallery path to match the core taxonomy lists path (simply set it to be taxonomy/term). This will make your gallery view appear instead of the core taxonomy list behavior, and so your gallery will display each time you follow a link to a taxonomy term (including the links used in your index view).
• You could setup your index links to point to a custom URL pattern that matches the path setting on your gallery view (e.g. images/tid). This can be done with views field rewrites... but I don't want to get into that here.
• You could use a helper module.

The first option has a big disadvantage in that it means you are setting a custom gallery view to take over all of your taxonomy term pages (even the ones from vocabularies that have nothing to do with organizing images). This is often bad. The second option gets around this, but it means that taxonomy links that are auto-generated by Drupal within your content will not point to the correct place (they will still point to /taxonomy/term/tid, and only your index links will point to /image/tid). This is certainly not ideal.

So, for anyone following-along I suggest just installing taxonomy display. It's designed to get around all these shortcomings and give you the power to specify exactly how you want to format your taxonomy term pages on a vocabulary-by-vocabulary basis. My hope would be that the documentation for taxonomy display would be enough to get people setup with this very last part of the process, but if not, let me know.

Anyone mind if I mark this as fixed? I'm hoping that my explanations can provide some conceptual guidance for people interested in setting-up views-based galleries with Juicebox. The concept of a taxonomy-based gallery (using a taxonomy to define "albums" and views to display them via a contextual filter) is just one way to go. The same general building-blocks can be re-applied in numerous other ways too.

Of course, the field formatter is also an option for simple stand-alone galleries where robust image organization is not needed.

Since this Juicebox module is just a display formatter, it really depends on each user to decide exactly how to architect their image organization solution. However, I know that some people out there may be interested in using the module, in conjunction with views, in a more "plug and play" manner. Perhaps they don't know views very well, or they don't have a set organizational strategy for image management within their site. For these cases I'm thinking it might be best to explore ways that Juicebox can work with other projects that are more holistic information architecture gallery solutions... such as node gallery. Looking at support between these two modules has come up before (#1985630: Making Juicebox work with the Field Collection module and the Node Gallery module), but I've not had time to look into it in any detail. If that does get rolling, I'll open-up a separate issue to capture progress.

Hi I just followed your notes above and I got everything up to the linking the two views together. Can you expand on that?

I did install the taxonomy display as well.

Hi Rye,

Which part specifically are you having trouble with? The taxonomy display instructions are probably the best additional reference - https://www.drupal.org/node/1254878. From there you just need to adjust the "Associated content display" value for the taxonomy term page to use a view (the view that you setup to be the actual Juicebox gallery, with a contextual filter). If the view and contextual filter were setup correctly, that should do the trick.

Do those taxonomy display instruction help clear things up?

That helped, I got it to work now! Thank you. Can I ask you two more questions? How do you get the opaque hoover effect when you hoover over the hightlight image (from your site)? And how do you get the name of the album as a layer over the picture at the bottom. This is great thank you again so much!

Sorry one other thing. I noticed on your site when you click on the highlight image it open's it as a lightbox. Mine goes to the content page. How do I get mine to open as a lightbox instead?

Re #18, the hover effect is just some CSS (set opacity <1 on hover). The title overlay is also just some CSS (I think just position: absolute with a semi-transparent background for the separate div that has the title). I don't remember all of the theme specifics off-hand, but feel free to inspect the CSS with something like Firebug, as I think that would reveal most details. All of that is just theme-layer tweaks, and is not Juicebox-specific.

Re #19, you'll want to check-out #2326779: Opening node galleries in a modal (via thumbnails on a view index). In the example that I think you are referencing the lightbox is being used in a case where the Juicebox field-formatter is used for the gallery (not views).

The url that is pointed by the Document link in the #1 does not provide enough information. But I am aware of that my issue is for JuiceBox 2.0, but the same one as this thread.

To display first picture for nodes with a file holding multiple images on my View page, I set Juicebox formatter according to the note, Using the Juicebox views style plugin, at https://www.drupal.org/node/2164865. The node is fine to multiple images in the format of Juicebox like, but when I set the Juicebox Formatter as the Juicebox views style plugin suggested , my Views displays nothing but a warning:

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.

At this stage, I do not need to deploy taxonomies for my images. So only one View page is enough. Any suggestion or tips on how to display only one picture by using Juicebox Formatter in one View page, would be highly appreciated.

@atpaust, It looks like the issue you are having is unrelated to the kind of configuration that's being discussed in this thread. I think your question is currently being addressed over in #2343133: Thumbnails not working and other issues with view configurations.