Support Responsive Image module in D8

Hey, Do we have any news regarding this feature request?
Of course, we can always adopt a custom and personal solution to achieve this. But, as long as responsive images are in core, I think that it would be nice to have a colorbox module built-in solution...
Thanks!

I had a go with it this weekend, but unfortunately could not finish it and I won’t be able to work on it the coming weeks. I post it here, maybe it is useful as a starting point, otherwise I will look into it later again. I made a separate Field Formatter, basically combining the Colorbox Formatter with the Responsive Image Formatter form core.

A few remarks:

• I added a FieldFormatter and template, I changed the colorbox theme function as well, but because rendering is not working yet, I’m unsure if there is more work here.
• For simplicity, I left out the first-image options.
• Something goes wrong with the cache tags, so rendering is not functioning as yet (but shouldn’t be too hard).

It would be great to see this finished off.

I would love if we could get this working. When I tried testing it by selecting the new formatter in the display settings, I got the following PHP error:

Error: Call to a member function label() on null in /modules/colorbox/src/Plugin/Field/FieldFormatter/ColorboxResponsiveFormatter.php on line 270

The loading spinner appeared next to the formatter selector but the settings didn't load and I got an AJAX error and it kept spinning.

Hi I was just wondering if there was any more progress on this?

Our company is looking for this. If funding is needed, send me a message.

Patch failed to apply

This patch should

– apply (both to the latest commit d2fa6de5 and version 8.x-1.6) and work and
– solve the issue in comment #8.
– Additionally, it's adapted to some changes in the module code since the first patches three years ago, like coding standards or naming conventions. For example, the names and structure of the Colorbox Responsive formatter are now closer to the Colorbox formatter and/or the Responsive Image formatter (in core's responsive_image module).

But...

– I haven't tested the colorbox_inline integration yet, which is necessary for responsive images in the Colorbox popup, see comments #5 and #6, in particular the preparations for that in colorbox.theme.inc (look for the $colorbox_inline variable). By now, the "Colorbox Responsive" formatter only affects the "content image" (the preview in the content).
– The first-image options is still left out (as in #4).

Thanks for this, I'll get onto this now. :)

Edit:

Colorbox Inline functionality is not yet functional, a modal opens but collapses. I am on Drupal 8.8.6 and patched against 8.x-dev d2fa6de5, using the Colorbox Responsive Formatter on Media Image entities.

After uninstalling Colorbox Inline the modal works but is obviously the full image. Note that the Media Entity Manage Display form also shows the option to set the 'Colorbox responsive image style' when Colorbox Inline is not enabled. The availability of this should probably be dependent on Colorbox Inline being available or not.

Regardless, thanks! It's a big step forward. :)

I had started working on this as well so I will compare code and see if there is something useful left.

Tried this with media image from core and it works great for responsive content image style. For the colorbox responsive image style, it doesn't seem to work, I always get the original image being displayed in the colorbox.

Short review from patch from #12.

+  if (!empty($variables['responsive_image'])) {
+    $variables['responsive_image']['#attributes'] = $item_attributes;
+
+    // Do not output an empty 'title' attribute.
+    if (mb_strlen($item->title) != 0) {

I notice an issue with the fallback img tag. There are some attributes (e.g. alt tag value) missing.
The $variables['responsive_image']['#attributes'] are build in template_preprocess_responsive_image_formatter() in responsive_image.module with alt, title etc. In the patch they are taken from $variables['item_attributes'] or an empty array, which seems to be wrong.

Reroll of #12 with the fixed issue from #15.

Still needs work with the other issues.

Tests are green but putting back to needs work as of #13 and #14.

After thinking about #14 I found some more things, we should think about.

1. Why so many things are done in a preprocess function and why it's not done right in the viewElement() method of the field formatter?
2. Rename 'colorbox_responsive_node_style' to 'colorbox_responsive_preview_style'
3. Rename 'colorbox_responsive_image_style' to colorbox_responsive_modal_style'
4. Move the responsive image processing out of template_preprocess_colorbox_responsive_formatter() into its own method. Then it could used for the preview and the colorbox modal image.
5. Compare both preprocess functions in colorbox.theme.inc. If a preprocess function is needed for both, move duplicate code into its own method.

Patch #16 doesn´t apply to latest colorbox release 8.x-1.7 or latest dev.

It's just a re-roll.

Thanks - patch applies to 8.x-1.7.
Cleared the cache...
There is no "Colorbox Responsive" as an image formatter.

Tested the #20 patch. The Colorbox responsive option became available only after clearing the caches.
It works well!

I tested patch #20.

In the backend, the "Colorbox responsive" option works fine.

The output of "Responsive content image style" works correctly.

The output of "Colorbox responsive image style" does not work correctly, the original image is returned in any breakpoint.

As mentioned before by @jurgenhaas and @arturopanetta the Cololorbox responsive image style does not work at all.

There are some preparations done, but the code is commented out.

//   elseif ($responsive_style) {
  //     $variables['url'] = '/colorbox-responsive/' . $item->entity->id() . '/' . $settings['colorbox_responsive_image_style'];
  //   }

And so the code in else runs:

else {
    $variables['url'] = file_create_url($image_uri);
  }

Which gives us the original image.

This if fine for me, for now as I want to show the original image or at least a large one to the users. But it is not responsive. And so this issue needs work!

Always showing the original image in the colorbox popup may not be the best solution after all. Users having uploaded stock images of many MB's etc...

So I tried my luck copying and pasting some code and now found a (temporarily) solution that makes it possible to select the imagestyle that is used in the colorbox. It is not a responsive image, but just directly picking the imagestyle.
This is achieved by adding the colorbox_image_style to the settings form, and also to the output.
The chosen imagestyle is then also exported as a dependency when doing a config export.

The summary of the settingsform also reflects this setting:

Please review, I am not thinking this is the final solution. Just trying to get this issue moving and offering a workaround to make this functionality more usable.

Reupload, #25 patch dit not apply correctly. Should be ok now.

Patch at #27 work perfectly for the Responsive Image Style setting for the image in the page content.

But the setting for 'Responsive image style for Colorbox' doesn't seem to do anything. The image style used for the Colorbox image uses the setting 'Image style for Colorbox' setting. In my use case, I want the original image to open in the Colorbox, so by setting 'Image style for Colorbox' to 'None (original image)' works perfectly.

Thanks

F

Reroll for colorbox 1.8. Needs review because of SA-CONTRIB-2022-007.

The #29 patch applies to colorbox 1.8.0 and works the same way as #27.

Did someone get colorbox_inline to work?
Colorbox_responsive images work in general, but with colorbox_inline it´s still the same as for #13.

Thanks!

Unfortunately, patch from #29 doesn't apply to the latest release anymore as some of the changes have already been made to the official code base. Just couldn't figured out which ones.

Re-rolled the patch in a MR against 8.x-1.x . Also implemented the method FormatterInterface::isApplicable() in the new formatter plugin to prevent confusion/errors when selecting the formatter if the responsive_image module isn't enabled at all.

This is looking good again. Thanks a lot @s_leu

THe #34 works well. Thanks!

Wanting to get WebP images enabled for Colorbox.

Looking forward to seeing this patch committed :)

I patched the current version 8.x-1.10 but no Colorbox image appears when clicking on a picture.
When will this issue be working? I need it for three sites.

I am sorry. I made a mistake. Patch 29 works as expected. Like #38 I like to have the popup images also in WebP format.
Thanks for a great module and this patch.

I think, we need a reroll against the latest 2.0 branch.

Re-rolled the patch for the new 2.0.x branch, some code just seemed to overlap. so I just manually checked and implemented the old code.

Needs to be completely verified before use, as this is my first time making a patch like this.

Patch applies, and passes the tests, but it needs some refinement for coding standards, as some indentations has 4 spaces instead of 2.

As stated in #43 I had issues with the indentations, i have reformatted it and made a new patch.

The patch in #44 used tabs instead of spaces, which is also bad practice. reformatted it again.

I changed some more coding standards and also made reroll_diff so you can see the changes since the MR_13 in comment #34

Tested #46 and works on 9.3.22! Thanks a lot!

Re-roll patch for 8.x-1.10

#46

Tested colorbox-responsive-image-2808883-46.patch and does not work as espected with Colorbox 2.0.x / Drupal 10.0.0.

The Colorbox Responsive field configuartion looks like that:

Format settings: Colorbox Responsive
Responsive image style for content*: [ Lucas ][v]
Image style for Colorbox: [ Vital ][v]
Responsive image style for Colorbox*: [ Lucas ][v]
Gallery (image grouping): [ Per post gallery ][v]
Caption: [ Automatic ][v]

[ Update ] [ Cancel ]

Briefly:

1. Responsive image style for content (responsive thumbnail image) is working as espected
2. Image style for Colorbox is always used as Colorbox image
3. Responsive image style for Colorbox has no effect

Included thumbnail image code:

<a href="/sites/default/files/styles/vital/public/2022/12/test.jpg.webp?itok=sqtDR5YD" title="Flowers" data-colorbox-gallery="thumbnails-3bQepcbu8gw" class="colorbox cboxElement" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Flowers&quot;}" data-once="init-colorbox">  
  <img srcset="/sites/default/files/styles/lucas_11/public/2022/12/test.jpg.webp?itok=Tkr8a1Ph 199w, /sites/default/files/styles/lucas_12/public/2022/12/test.jpg.webp?itok=W5xnOzhl 322w, /sites/default/files/styles/lucas_13/public/2022/12/test.jpg.webp?itok=_QCMCiHb 521w" sizes="256px" src="/sites/default/files/styles/vital/public/2022/12/test.jpg.webp?itok=sqtDR5YD" alt="Flowers">
</a>

Included Colorbox image code:

<div id="cboxLoadedContent" style="width: 1835px; overflow: auto; height: 1032px;">
  <img alt="Flowers" class="cboxPhoto" src="/sites/default/files/styles/vital/public/2022/12/test.jpg.webp?itok=sqtDR5YD" style="width: 1835px; height: 1032px; float: none;" width="1835" height="1032">
</div>

I think Image style for Colorbox is obsolete here (only for non-responsive Colorbox) and Responsive image style for Colorbox should be used instead.

The line (#279 in my patch):
if (((strpos($colorbox_style, 'colorbox/example') !== FALSE) || $config->get('colorbox_caption_trim')) && (mb_strlen($caption) > $trim_length)) {
gives this message:
Deprecated function: strpos(): Passing null to parameter #1 ($haystack) of type string is deprecated in _colorbox_formatter_get_caption()

I concur with #50 and add that the image style formatter also does not work as expect for Colorbox 2.0.x / Drupal 9.5. See #50 for details.

Can we change this to Needs Work? To warn folks that it doesn't really work in the way you'd think.

Also it would be great to get this working, I read through this whole thread and I'm wondering if these same issues still exist. (A single URL is required for the color box image). I'm happy to help if anyone has ideas on how to approach. Would be nice to not have to serve a single large colorbox image to everyone.

Is anyone working on this? I can help with active testing as this feature is quite important on our website.

@KlemenDEV: I don't think anyone is actively working on it.

The MR is outdated and the patch from #46 is the last state from which it should be continued.

For the responsive image style for content (responsive thumbnail image) the lazy loading option is also missing.

@@ -139,6 +82,190 @@ function template_preprocess_colorbox_formatter(&$variables) {
     $variables['url'] = $file_url_generator->generateAbsoluteString($image_uri);
   }

+  if (!empty($variables['responsive_image'])) {
+    $attributes = [];
+    // Do not output an empty 'title' attribute.
+    if (mb_strlen($item->title) != 0) {
+      $variables['responsive_image']['#title'] = $item->title;
+      $data_cbox_img_attrs['title'] = '"title":"' . $item->title . '"';

$item->title could be NULL, so a deprecation will be triggert: "Deprecated function: mb_strlen(): Passing null to parameter #1 ($string) of type string is deprecated". Maybe change to if (mb_strlen($item->title ?? '') != 0) {

In summary, we should continue with patch #46 and respect the reviews from #50, #51 and #56.

I have updated MR to #46 and fixed #51 and #56.

But there are more issues e.g.:

• $colorbox_style = $config->get('colorbox_style') But there is no config 'colorbox_style'. Maybe it should 'custom.sytle'
• Same with $config->get('colorbox_caption_trim_length') -> Should be 'advanced.caption_trim_length'
• ... there are more ...

The points from #58 are not relevant here.

But I think we should split this topic into several issues because there are different functions.
The original request was that Colorbox should be compatible with a responsive image formatter. We should focus on that and merge that first.

Another feature that doesn't work (cleanly) is to display a responsive image inside Colorbox. We should address this in a separate followup issue.

Perhaps the maintainers can comment briefly on the strategy?

I cannot change the target branch at the MR to the 2.0 branch 😞

Attached the new patch file.

Re-rolled this once more against the new 2.0.x branch which the patch in #61 doesn't apply any more because the README.txt is now README.md. So this new patch just moves the README part into the .md file

Patch #63 works fine, but a deprecated notice is triggered under PHP 8.2:
Deprecated function: Creation of dynamic property Drupal\colorbox\Plugin\Field\FieldFormatter\ColorboxResponsiveFormatter::$attachment is deprecated in Drupal\colorbox\Plugin\Field\FieldFormatter\ColorboxResponsiveFormatter->__construct() (line 96 of /colorbox/src/Plugin/Field/FieldFormatter/ColorboxResponsiveFormatter.php)

This patch for 2.0.x fixes the issue.

No complete review!
The patch should use the service colorbox.gallery_id_generator introduced in #2935266: Make gallery id generation function independent., released in 8.x-1.7 on 5 March 2021

Sorry, service colorbox.gallery_id_generator is in use.

But use Drupal\Component\Utility\Crypt; is missing:

+++ b/colorbox.module
index 6b216e2..23c9a87 100644
--- a/colorbox.theme.inc

--- a/colorbox.theme.inc
+++ b/colorbox.theme.inc

+++ b/colorbox.theme.inc
+++ b/colorbox.theme.inc
@@ -8,6 +8,7 @@

@@ -8,6 +8,7 @@
 use Drupal\file\Entity\File;
 use Drupal\image\Entity\ImageStyle;
 use Drupal\Component\Utility\Xss;
+use Drupal\responsive_image\Entity\ResponsiveImageStyle;
 

@@ -139,6 +82,190 @@ function template_preprocess_colorbox_formatter(&$variables) {
+    $image_id = $entity_id . '-' . Crypt::randomBytesBase64(8);

Thanks @interdruper, patch in #64 works.
I hope soon it will be part of the great Colorbox module.

Continued the patch in #64:

• Fixed CS of the new formatter
• Addressed #66
• Added schema for the new formatter.

Re-rolled for the latest 2.0.x changes.

#69 applied cleanly in Drupal 10.2.5 and latest dev-Version of colorbox.
And it works well.
Thanks!

Updating issue credits.

Thanks to everyone who has contributed to this patch and gotten it to where it is so far. I just see a couple small problems:

1. With DOMPurify enabled, HTML in captions still get converted to text.
2. colorbox-responsive-formatter.html.twig should use the same aria attributes that colorbox-formatter.html.twig has.

Edit: actually, on deeper inspection, colorbox-formatter.html.twig uses aria attributes incorrectly, so disregard item 2 above.

I fixed the problem with DOMPurify - I updated ColorboxResponsiveFormatter to load DOMPurify if it exists. Thanks to everyone for your work on this patch. It is committed!