One of the key features of this module is that it produces a display that is fully responsive. However this module does not natively re-size the raw source image files that are sent to the browser so that they themselves are responsive/adaptive to different device sizes. If we have a method available to adaptively re-size the source images for different devices we can save bandwidth when smaller screen sizes are used.

There are a lot of Drupal modules out there that already focus on this task of dynamically resizing source images (AIS, Picture, Responsive images and styles, etc.) so this task is all about identifying which of these modules will work best with Juicebox as opposed to building any new functionality for Juicebox.

It's possible that other users have already done this analysis and implemented Juicebox with source image resizing, and if so I'd love to hear from them. Either way I'd like to use this thread as a place to make some notes on the topic with the goal of adding some details the documentation and/or project page about this.

Comments

Title:Identify best Drupal tool(s) to use for adaptive/fluid image source generation with JuiceboxIdentify best Drupal tool(s) to use for adaptive/responsize image source generation with Juicebox
Status:Closed (fixed)» Active

Ok, so here's what I know so far about this so far....

Given that the final gallery output for this module is managed by the Juicebox javascript library (and not Drupal) we can rule out modules that depend on custom markup modifications to pick differently scaled source images. Also, because Juicebox is a display formatter, we can't use other modules that must implement their own formatters to do source image re-sizing. So it's a no-go for:

What remains, and what needs more investigation, are the few other modules that implement source re-sizing purely via generic image styles (totally independent of how those styles are applied/themed/formatted). The Juicebox formatter will apply image styles while generating the config XML, so all of this has to work while responding to requests for XML (as opposed to normal HTML). Some candidates include:

These were indications from one user during the resolution of #1889812: No images showing in node gallery (using AIS) that AIS will work with Juicebox, but I've not confirmed this personally.

It would be interesting to know if anyone has tested any of these with Juicebox, or if there are other options that I'm missing.

Added note. I noted above that Juicebox cannot integrate with other display formatters because it is itself a display formatter. This probably requires some additional calcification given that there are plenty of other modules out there that mix-and-match formatters (e.g. Flexslider is a formatter that works with Picture, which is also a formatter). What's unique about the Juicebox module is that it is building XML representations of each gallery which are later rendered through the Juicebox javascript library. So it's not producing HTML (or render arrays) directly. Because it is not doing the final gallery rendering, and because it can only work with specific XML inputs that the Juicebox javascript library accepts, it cannot really take/pass any markup to/from other formatters.

I would also note that Flexsider will not work either.

Thanks kclarkson. You are correct that flexslider is not compatible with Juicebox due to the fact that it is also a display formatter. The reason I did not list it here is that it's not a tool for adaptively scaling raw source images for different devices.

Not to get too off-topic, but I'm curious why you would want to use flexslider with Juicebox given that both offer a form of responsive slider functionality.

I have used flexslider as an image formatter just for the "responsiveness".

Good to know !

Title:Identify best Drupal tool(s) to use for adaptive/responsize image source generation with JuiceboxIdentify best Drupal tool(s) to use for adaptive/fluid image source generation with Juicebox

So I had a look at the "Adaptive Image" and the "Responsive images and styles" modules, and I think they are a no-go as well.

Adaptive Image looked promising as it's pretty plug-and-play and works directly on image styles (and not any context-specific formatters). However, upon further investigation it seems that it will only do its source re-size magic for images that are passed through theme('image') function (see #1477966: Possible to use image_style_url?). This is a problem as the Juicebox module does not use theme('image'). Instead it processes source images directly while generating XML and then depends on the Juicebox javascript to "theme" the output. Adaptive image also will not kick-in correctly for anonymous users when core Drupal caching is enabled, which is a pretty big shortcoming.

In terms of "Responsive images and styles", it's pretty clear that it too cannot influence the scaling of images that are generated as part of XML. This is because it seems to depend on javascript and media queries to trigger the dynamic selection of source images for download. As javascript and media queries don't apply within XML, this option won't work for us.

So "Adaptive image styles (AIS)" is looking like the best candidate. I'll have to give it some hands-on testing with Juicebox.

Alright, it looks like Adaptive image styles (ais) works quite well with Juicebox, so I'm happy there is at least one compatible solution out there for adaptive/fluid image source generation. As AIS sets a cookie and then uses server-side checks to deliver device-specific source images it works fine when generating XML and when core caching is enabled. All I needed to do was enable the AIS module as per the instructions (unfortunately this requires a tweak to the Apache rewrites, but it's an easy .htaccess adjustment) and then set the main image style for my gallery to "adaptive". That's it.

The scaling thresholds that come pre-configured with AIS seem pretty reasonable so I don't see much need to muck around with changing those. So all-in-all it's a pretty good "drop in" solution for anyone comfortable with maintaining a small, and well documented, edit to their .htaccess file.

I think I'll update the Juicebox documentation to encourage the use of AIS for anyone interested in making the raw source images that are sent to Juicebox adaptive.

Status:Active» Fixed

Ok, I've updated the project page and docs to point people to AIS if they want to add adaptive/fluid source image re-sizing. Maybe other alternatives will come up for this need in the future, but for now it seems like AIS is a fine solution.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Issue summary:View changes
Status:Active» Closed (fixed)

Something about the d.o. D7 upgrade caused this (fixed) issue to be flagged as "active". Resetting status.