Alt text does not appear for the images in the lightbox. An alt attribute is present on the thumbnail images, and there are some data attributes on the link referring to it, but the values don't get passed to the lightbox image. There is an empty alt tag there.
In addition, the aria-label for the link is set to the entire contents of data-gbox-img-attrs. That doesn't seem correct.
Use the glightbox responsive formatter on a field.
Click on thumbnail image to open the lightbox.
Inspect the image and look for its alt attribute.
Something seems off in template_preprocess_glightbox_responsive_formatter. The data-gbox-img-attrs attribute is added to the variables and template markup, but I don't see how this is used. Seems like we need to set the data-alt attribute or add the alt to the list of values for data-glightbox attribute.
Refactor template_preprocess_glightbox_responsive_formatter to add all the img attributes/data options correctly so that glightbox can use them.
none
none
none
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | image 3.png | 63.9 KB | levmyshkin |
| #3 | image 2.png | 221.98 KB | levmyshkin |
| #3 | image 1.png | 72.87 KB | levmyshkin |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
heatherwoz commentedComment #3
levmyshkinHi heatherwoz, I checked Responsive image with Content Type > Media (multiple values) > Image field and description is working:
But you are right, I cloned Colorbox module and moved 'data-gbox-img-attributes' instead of 'data-cbox-img-attributes' from Colorbox. GLightbox uses data-glightbox attribute with 'title' and 'description' values:
https://github.com/biati-digital/glightbox?tab=readme-ov-file#examples
Also you can check that you use common tags for description, because it's filtering for XSS:
I need to know your struction of content type, images can be in different nested entity types, for example:
Content type > Paragraph field > Media > Image
Content type > Paragraph field (gallery) > Pagraph field (gallery item) > Media > Image
Content type > Paragraph field > Image
Content type > Paragraph field (gallery) > Pagraph field (gallery item) > Image
It's impossible to predict all possible structures and nested levels for images, so I fetched few most common structures for captions.
https://www.drupal.org/project/glightbox/issues/3487478
https://www.drupal.org/project/glightbox/issues/3511270
https://www.drupal.org/project/glightbox/issues/3492657
If you describe your structure, I will add your case as well.
Comment #4
levmyshkinComment #5
heatherwoz commentedThanks for your reply.
The caption and description are working. It is the `alt` attribute on the `img` tag that is missing. I expect it to be there for accessibility. Someone could create a light box that does not include captions or descriptions, and assistive technology would need alt text to describe the image.
Our particular case is Custom Block > Media > Image.
Comment #6
albertho425I am also experiencing the issue where ALT text is not displaying for an image that has ALT text. In my use case, I am using it in Drupal 10 Gutenberg editor for core and custom Gutenberg blocks.
I tried adding glightbox via contrib module and installing glightbox manually via my custom Gutenberg blocks library. In both cases, no ALT text for images that have ALT text.
Comment #8
levmyshkinHi heatherwoz, albertho425, I added data-alt attribute in
<a class="glightbox">links with text from Caption. I'm not sure if you need additional separate field for alt attribute. Usually it should be enough to have something meaningful inalt=""attribute. And I removed aria-label from<a>tag, it's not button or<span>, so "title" attribute is enough for that. You can try dev version of the module or I will add a new module version later on this week.Comment #9
levmyshkinComment #11
heatherwoz commentedThanks @levmyshkin
That solution doesn't work for us, because captions are optional, and sometimes users don't enter them. They are also highly configurable by this module.
I think a better approach is to use the alt text from the image itself. Drupal includes an alt text field on its image fields, so we can reasonably expect this to be filled out. I have opened an MR to show what I am thinking. I also removed all the references to $data-gbox-img-attributes since that is not used with GLightbox the same way it was with Colorbox.
Comment #13
albertho425Thanks @levmyshkin and @heatherwoz. I agree with Heather of using the ALT text from the image itself. In my case, images in Gutenberg are required for saving.
Comment #14
levmyshkinHi heatherwoz, albertho425, thank you for your MR! I merged it and released Glightbox 1.0.18:
https://www.drupal.org/project/glightbox/releases/1.0.18
It looks fine for me:
https://drupalbook.org/ept/demo/video-and-image-gallery
https://drupalbook.org/ept/demo/image-gallery
Comment #15
levmyshkinComment #16
levmyshkinComment #17
heatherwoz commentedThanks for the prompt response! I will try out the new release and open a new issue if we encounter any problems.
Comment #18
albertho425Thank you both. We'll try it on Sunday and submit a new ticket if we encounter any issues. Thanks.