Problem/Motivation

I use slick carousel (and in some projects splide but thanks to gausarts most of the settings are the same) with the Media switch option set to colorbox. In colorbox module settings I enabled the mobile detection option so colorbox doesn't load on mobiles. In fact it doesn't make sens to have open colorbox to show a bigger image on a mobile which screen has already a full width image.

My media field supports image, video, remote video and audio files. It is very common in my use case to have a mix of these media and this works nice on desktop: preview images are shown in slick carousel and medias opening in colorbox when the preview image is clicked.

And here comes the problem in mobile display. As colorbox is disabled, clicking on the preview image opens the remote url, not the local media embedding the remote source, as we can see in the html below. 

<a href="https://www.youtube.com/watch?v=ABCDeFg" class="blazy__colorbox litebox litebox--multimedia cboxElement is-b-cbox" data-colorbox-trigger="" data-oembed-url="/media/oembed?url=https%3A//www.youtube.com/watch%3Fv%3DABCDeFg&amp;max_width=0&amp;max_height=0&amp;hash=etc....>
 <picture>
                  <source etc

What I would like ? Instead of using the url attribute on click, i.e. https://www.youtube.com/watch?v=ABCDeFg which makes user leave the site, use the data-oembed-url, i.e. /media/oembed?url=https%3A//www.youtube.com/watch%3Fv%3DABCDeFg

A better solution would be to not even have to click (no <a href...></a> tag) and just display a mobile view mode that can be set for each media in "admin/structure/media/manage". As said in the intro it makes no sens to have to have a link to a bigger image on a mobile which screen has already a full width image. Currently, when Media switcher is set to "none" all types of media display nice in slides but we have no control on them. But the most important is to check if colorbox is loaded and if not have a fallback to Media switcher "none".

Perhaps this is doable with some parameter adjustments, but I haven't been able to locate them.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comments

erwangel created an issue. See original summary.

erwangel’s picture

erwangel commented
Issue summary: View changes
erwangel’s picture

erwangel commented
Issue summary: View changes
gausarts’s picture

gausarts commented
Project: Slick Carousel » Blazy
Status: Active » Postponed (maintainer needs more info)

Thank you.

I have usages different from yours, relevant to various Blazy options (mixed media like local video, audio, document, iframe, inline HTML like pinterest, etc.) and sub-modules' specific features. However I understand your scenarios.
Perhaps marrying both is less disruptive, a matter of option so to preserve BC.

The following may need proper checks, but a good start.

A permanent solution if you or anyone want to patch:

  1. Create a new option at Blazy UI to offer using internal URL hence [data-box-url] for video lightbox HREF url so that the next change doesn't affect or break initial design. This is the #url line to modify:
    https://git.drupalcode.org/project/blazy/-/blob/3.0.13/src/Theme/Lightbo...
  2. To not break the old logic flow, access and store [data-box-url] into a new $href_url variable:
    https://git.drupalcode.org/project/blazy/-/blob/3.0.13/src/Theme/Lightbo...
  3. Then change it into IF ELSE:
    If UI option is enabled and $href_url is not empty, then put it as #url, else use the original #url line, e.g.:
    if ($ui_enabled && $href_url = $attrs['data-box-url'] ?? NULL)

Urgent solution is similar to above, available via hook_preprocess_blazy:
Check if [data-box-url] exists and only if a lightbox, to not break other options like Link image to content, to original image, etc., override it:
$variables['url'] = [data-box-url] value;

blazy.api.php:
https://git.drupalcode.org/project/blazy/-/blob/3.0.13/blazy.api.php?ref...

Sub-modules to explore sample variables and possibilities:

Zooming is the closest to your need.
Moved to Blazy for the correct patch, if any.

Let me know?

erwangel’s picture

erwangel commented

Thank you for your reply. It is fantastic what we can do with blazy hooks. It could be so easy to change $settings['media_switch'] from 'colorbox' to 'none' or to 'anything else' on condition. The thing is that we have no way of knowing if colorbox is active or not (mobile detected or not) unless we dig into the javascript. I tried setting a breakpoint in Slick/Splide optionset at the same width as the Colorbox mobile detection setting, but again I don't think we can know which is the active breakpoint as it is handled on the browser side. I'm wondering if the solution could not be CSS-breakpoints in order to show/hide the colorbox div.

gausarts’s picture

gausarts commented

I hope you can make it one way or another.

It is my bad habit to skip issues/comments I don't immediately understand at first pass :)

> The thing is that we have no way of knowing if colorbox is active or not (mobile detected or not) unless we dig into the javascript.
I am not sure I understand it. By default, Blazy will disable Colorbox at mobile abiding by Colorbox settings:
https://git.drupalcode.org/project/blazy/-/blob/3.0.x/js/src/components/...

Should you need more elaborate works, you can override Blazy colorbox js file above using regular library-override directive:
https://www.google.com/search?q=drupal+library-override

> I'm wondering if the solution could not be CSS-breakpoints in order to show/hide the colorbox div.
I also don't understand this part. If you meant to disable clicks for Colorbox so clicking images will not trigger it below a particular breakpoint, CSS would do:

@media only screen and (max-width: 768px) {
  .blazy__colorbox {
    pointer-events: none;
  }
}

Add more specificity in case it has the same rule somewhere else.