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

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:

• Picture (too bad given that there is no much interest around this module)
• Client-side adaptive image
• Responsive images

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:

• Adaptive image
• Adaptive image styles (AIS)
• Responsive images and styles

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.

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.

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.

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.

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

It's worth noting that the Juicebox javascript library (>=1.4.1 PRO) now has some basic native support for some adaptive/fluid image delivery concepts. Any integration with this new feature will be explored in #2246851: Integrate PRO multi-size support with Drupal image derivatives.

@candelas, yes the Picture module (and related html element) are certainly the way forward for most responsive/fluid images in Drupal. However, please see comment #1 for more information as to why it doesn't really apply to Juicebox. In short the concepts used by the picture module only really apply for image sources that are defined in a HTML page. In the case of Juicebox however the image sources are defined in a separate XML request that's independent of the HTML page the gallery appears on. This means that picture module/element concepts can't really be extended to the Juicebox case.

Thankfully however, the Juicebox javascript library now comes with its own support for responsive/fluid images, and the Juicebox module for D7 and D8 integrates with it (see comment #10). The feature is not quite as fine-grained as the Picture Module + Breakpoint Module, but it accomplishes the same general goal of responsive/fluid image source delivery (and with much less configuration effort).