I just updated this docs page regarding the state of lightbox-type modules and responsive images: https://www.drupal.org/node/266126

In short, there's a huge hole in contrib in terms of lightbox-type modules that support responsive images when viewing the "full size image".

The library that this module uses looks great and appears to cater for responsive images - I wonder if there might be scope for providing a views plugin that could integrate that feature of the library with D8's Responsive Image module: mapping the breakpoints defined within a responsive image style to the data-at-{width} attributes described in the library's docs: https://github.com/feimosi/baguetteBox.js#responsive-images

I suggest a views plugin because the current pattern of lightbox-type modules providing additional field formatters doesn't seem to work when responsive images are required; D8's own Responsive Image module also relies on a field formatter (leaving users to choose one or the other rather than integrating both). Obviously if there's a better way then I'm all ears!

Comments

danbohea created an issue. See original summary.

chi’s picture

chi commented

I wonder if this can be achieved by Responsive image module which is part of Drupal core.

dddbbb’s picture

dddbbb commented

@Chi Read the issue summary again.

I suggest a views plugin because the current pattern of lightbox-type modules providing additional field formatters doesn't seem to work when responsive images are required; D8's own Responsive Image module also relies on a field formatter (leaving users to choose one or the other rather than integrating both). Obviously if there's a better way then I'm all ears!

chi’s picture

chi commented

I suggest a views plugin because the current pattern of lightbox-type modules providing additional field formatters doesn't seem to work when responsive images are required;

That's still no clear to me. What exactly is wrong with field formatters?

  • Chi committed b85cab3 on 8.x-1.x 
    Issue #2809137 by danbohea: Add support for responsive images
dddbbb’s picture

dddbbb commented

D8's own Responsive Image module also relies on a field formatter (leaving users to choose one or the other rather than integrating both).

That's what's wrong with field formatters in this case (you can only pick one formatter for a field).

As it stands, baguetteBox is made available via a field formatter and Responsive Image is made available via a field formatter so your field is either going to be displayed via baguetteBox or it's going to be a responsive image via <picture> or srcset but not both.

What I'm interested in is a way whereby we can have both but as I see it right now, I'm not sure that can happen via field formatters alone. I'd love to be proven wrong and if you think there's a more elegant solution then I'm all ears (perhaps a formatter that extends the Responsive image formatter but adds options for baguetteBox?). My main concern is establishing a D8 lightbox solution that supports responsive images for the "zoomed in" image because currently there isn't one (I'm not sure there's even a D7 solution).

chi’s picture

chi commented

I am not sure how Views plugin could help this. The way BaguetteBox implements this is quite simple. I just added breakpoint settings to formatter which are converted to "data-at-width" attributes on the front end side. Feel free to review.

Note that for an image that is initially displayed (before box is shown) we still use regular image preset (not responsive).

dddbbb’s picture

dddbbb commented

OK, great I'll take a look.

Would be great to have the initial, pre-zoomed images use Responsive Image too.

chi’s picture

chi commented
Status: Active » Postponed

For making pre-zoomed images responsive we need another formatter based on core Responsive image module. I think it would cost to much efforts and make the module too complicated.

chi’s picture

chi commented
Status: Postponed » Closed (won't fix)