🇷🇸Serbia @levmyshkin

I found the problem:

   *   - clear: A boolean flag indicating that tokens should be removed from the
   *     final text if no replacement value can be generated.

It was set as FALSE, I changed it to TRUE and pushed changes in a new release:
https://www.drupal.org/project/glightbox/releases/1.0.15 →

Hello n-i, it must be media:* entity is not accessible in tokens. This field media:field_description is in media entity or in parent paragraph?
I updated logic for getting values from parent entities:
https://www.drupal.org/project/glightbox/issues/3511270 🐛 Allow caption tokens paragraph access if there is a parent paragraph Active

You don't need to update levmyshkin/glightbox library manually if you already have composer. Just run:
composer drupal/glightbox -W
or
composer drupal/glightbox --with-all-dependencies

It will update library from github automatically. As I see glightbox.min.css file was updated in 3.2.1 version:
https://github.com/levmyshkin/glightbox/releases/tag/3.2.1
https://github.com/levmyshkin/glightbox/blob/master/dist/css/glightbox.m...

Hi jennypanighetti, thank you for your report! I think it was made on purpose, because GLightbox is popup slider. But I agree, it's redundant functionality for one image popup. I added opacity: 0 for disabled arrows and released 3.2.1 version for GLightbox fork:
https://github.com/levmyshkin/glightbox/releases/tag/3.2.1

Hi marianrk, thank you for your patch! I updated slick.js file on levmyshkin/slick repository and created a new release for Slick Slider library:
https://github.com/levmyshkin/slick/releases/tag/v1.8.3

To update Slick Slider use command:
composer update drupal/ebt_slick_slider --with-all-dependencies

You need to change this template:
modules/contrib/ept_tiles/templates/paragraph--ept-tiles-item--default.html.twig

{#
/**
 * @file
 * Default theme implementation to display a paragraph.
 *
 * Available variables:
 * - paragraph: Full paragraph entity.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
 *   - paragraph.id(): The paragraph ID.
 *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
 *   - paragraph.getOwnerId(): The user ID of the paragraph author.
 *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
 *   and methods for the paragraph object.
 * - content: All paragraph items. Use {{ content }} to print them all,
 *   or print a subset such as {{ content.field_example }}. Use
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 * - attributes: HTML attributes for the containing element.
 *   The attributes.class element may contain one or more of the following
 *   classes:
 *   - paragraphs: The current template type (also known as a "theming hook").
 *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
 *     "Image" it would result in "paragraphs--type--image". Note that the machine
 *     name will often be in a short form of the human readable label.
 *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
 *     preview would result in: "paragraphs--view-mode--preview", and
 *     default: "paragraphs--view-mode--default".
 * - view_mode: View mode; for example, "preview" or "full".
 * - logged_in: Flag for authenticated user status. Will be true when the
 *   current user is a logged-in member.
 * - is_admin: Flag for admin user status. Will be true when the current user
 *   is an administrator.
 *
 * @see template_preprocess_paragraph()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
  'block',
  'ept-paragraph',
  'ept-paragraph-tiles-item',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  'ept-paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  not paragraph.isPublished() ? 'paragraph--unpublished',
  'paragraph-id-' ~ paragraph.id(),
]
%}
{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% if paragraph.field_ept_clickable_tile.value and content.field_ept_tiles_link|render %}
    <a href="{{ content.field_ept_tiles_link.0['#url'] }}" class="ept-tile"
    {% if link_in_a_new_tab %}
      target="_blank"
    {% endif %}>
      {% endif %}
      <div class="inner">
        {% block content %}
          {% if paragraph.field_ept_clickable_tile.value %}
            {{ content|without('field_ept_tiles_link', 'field_ept_clickable_tile', 'field_ept_settings') }}
          {% else %}
            {{ content|without('field_ept_clickable_tile', 'field_ept_settings') }}
          {% endif %}
        {% endblock %}
      </div>
      {% if paragraph.field_ept_clickable_tile.value and content.field_ept_tiles_link|render %}
    </a>
    {% endif %}
  </div>
{% endblock paragraph %}
{{ styles|raw }}

There are some updates to hide EPT Settings fields:
{{ content|without('field_ept_clickable_tile', 'field_ept_settings') }}

And display generated styles from Design Options:
{{ styles|raw }}

If you installed module with composer, it's possible to patch this module, but it will be easier to override twig template in your custom theme:
paragraph--ept-tiles-item--default--custom.html.twig

Hi pcambra, I moved calculation for caption in separate service:

$formatter_service = \Drupal::service('glightbox.formatter');
$caption = $formatter_service->getCaption($variables);

I thought about alter hooks first, but caption will be rewritten anyway if alter will be before calculation. And for alter hook after calculation, it will get already replaced tokens. Maybe two alter hooks before and after calculation could help, but I don't know about all the cases for captions. I found that devs still use Image field without Media and maybe different another problems will buble up later.

Hi Renato, thank you for your MR! Looks good for me.

Hi Renato, thank you for your MR! Looks good for me.

Hi Renato, thank you for your MR, I missed it for a long time. Looks good for me!

Hi zub00, you can add field EPT Settings for EPT Tiles Item:
/admin/structure/paragraphs_type/ept_tiles_item/fields

Then you will need to update template for ept_tiles_item paragraph type.
Update classes for EPT Tiles Item:

{%
  set classes = [
  'block',
  'ept-paragraph',
  'ept-paragraph-tile',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  'ept-paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  not paragraph.isPublished() ? 'paragraph--unpublished',
  'paragraph-id-' ~ paragraph.id(),
  'ept-tile-' ~ content.field_ept_settings['#object'].field_ept_settings.ept_settings.styles,
]
%}

and add styles variable at the end of the template:
{{ styles|raw }}

Any Drupal paragraph type with name ept_* can be extended with EPT Settings field and generate background and other design options.

Hi pcambra, I updated tokens for GLightbox paragraphs, please, use [paragraph_container:field_name] token for your Image/Media field:
https://www.drupal.org/project/glightbox/issues/3511270#comment-16018183 🐛 Allow caption tokens paragraph access if there is a parent paragraph Active

Hi zany, thank you for your patch! The problem is more complex in general, because some sites use Paragraph Container for galleries, some sites don't use them. Some sites use Media fields, another sites use simple Image fields. Also Media/Image fields can be attached in Taxonomy terms, Comments, Users entities, because they technically content, fieldable entities in Drupal.

So I rewrote Custom (with tokens) option, and introduced paragraph_container token for nested paragraphs. And added data for parent Node content, because for some cases people will use Node title as Gallery description or name. Also I added validation for Media extra nested level.
Here are examples of tokens which you can use:

1. For paragraph with Media/Image field
[paragraph:field_name]

2. For parent paragraph with paragraph inside
[paragaph_container:field_name]
https://www.drupal.org/files/issues/2025-03-06/0d7d2694ccb90c315434974c8... →

3. For Node page with paragraph gallery:
[node:title]
[node:body]
[node:field_name]
https://www.drupal.org/files/issues/2025-03-06/a5dc4234f8d7b41ba493f14aa... →

It will not cover cases for:
Taxonomy term -> Paragraph -> Paragraph -> Media/Image
User -> Paragraph -> Paragraph -> Media/Image
Paragraph (additional wrapper for columns, for example) -> Paragraph -> Paragraph -> Media/Image
For these cases only [paragraph:*] and [paragraph_container:*] will be accessible in tokens, but not Taxonomy terms, Users, 3rd level Paragraph.

But these cases will be working fine:
Taxonomy term -> Paragraph -> Image (without Media)
User -> Paragraph -> Image (without Media)
Because there are different Entity Types.

Hi wd4t, thank you for you report! I fixed these warnings.

Hi gilzero, it's possible to fix for Drupal 10, but Classy theme doesn't support Drupal 11 yet:
https://www.drupal.org/project/classy/issues/3461089 🐛 Drupal 11 compatibility Active

So I'm waiting when Classy maintainers.

It's possible to get Classy theme and put it in custom folder. But then you will need to remove all deprecated code from Classy theme by yourself. Or you can wait when Classy theme will be released for Drupal 11 and then I will update editorial_html5_up theme.

Hi santhoshabraham, thank you for your report! I fixed CSS for Vertical Tabs Rotated and released 1.4.11 version for EBT Tabs.

I created module for GLightbox as well:
https://www.drupal.org/project/ckeditor_glightbox_inline →

Hi n-i, you can copy Colorbox Inline Text Filter module and replace 'Colorbox' with 'GLightbox' and 'colorbox' with 'glightbox' and I believe this module will work with GLightbox.

Hi john_b, you can try to use 'Dialog' style for popup instead of 'Modal' type. But I think there will be still position: fixed. Also if popup window is wider than phone screen it resizes the page.

But I agree jQuery UI dialog is not responsive in iOS Safari. EBT Webform Popup uses default Drupal dialogs:
https://www.drupal.org/docs/develop/drupal-apis/ajax-api/ajax-dialog-boxes →

And this implementation uses jQuery UI Dialog, which is not supported anymore:
https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transiti...
https://github.com/jquery/jquery-ui/issues/2246#issuecomment-2087497491

I can't use

in EBT Webform Popup, because it can break "Dialog" style for popup on other sites.

If you think that jQuery UI Dialog is working not right, you should raise a issue for Drupal Core, because it's a part of core functionality.

Hi santhoshabraham, I added a fix for javascript in EBT Tabs:
https://www.drupal.org/project/ebt_tabs/releases/1.4.9 →

For some reasons in Drupal 11.1, drupalSettings is not loaded yet before Context variable with HTML is loaded. I removed Context variable from once() function, it will not affect to performance too much, because EBT Tabs has separate validation for drupalSettings variable too.
Maybe it must be more eligant solution here, but I haven't worked with Drupal 11.1 yet, I'm still on Drupal 10.

Hi giordy, your videos has aspect ration 4/3 and only 320 pixels width. GLightbox has default values for aspect ration 16/9 and at least 720 pixels width. But you can add custom CSS to resize your video (easiest way) or use plyr plugin settings (it will need to write custom module and apply unique settings for specific page).

<style>
.path-node-1258 plyr__video-wrapper plyr__video-wrapper--fixed-ratio {
  aspect-ratio: 4 / 3 !important;
}

.path-node-1258 #gvideo0 {
  max-width: 100% !important;
}
</style>

Thank you! I will check schema mismatch, it should be simple replacement '1', with 'true'.

Hi pcambra, thank you for your MR! I merged it and testing it now. After that I will move this code inside separate class/service as for this issue:
https://www.drupal.org/project/glightbox/issues/3492657 📌 Create a service for caption calculation Active

levmyshkin → made their first commit to this issue’s fork.

Hi pcambra, sounds good to me, I will have a look this and move calculation of caption in separate class/service. This GLightbox module was forked from Colorbox module, which is rewritten from D7 module. So it's old fashion legacy.

Hi pcambra, External Links module has settings for exclusions by CSS classes, so you can exclude GLightbox for it on your site:
/admin/config/user-interface/extlink

.glightbox, a[rel="glightbox"]

Hi axle_foley00, I added a new Slide Link (field_ept_carousel_item_link) to EPT Carousel Item paragraph and used it in templates. So images in carousel can be wrapped in image now:
https://www.drupal.org/project/ept_carousel/releases/1.4.5 →

Hi pcambra, I added settings for plyr on GLightbox config form:
/admin/config/media/glightbox

I also forgot, that GLightbox has alter hook_glightbox_settings_alter(), where all settings are possible to change in custom module.
/modules/custom/glightbox/glightbox.api.php

Released the changes in 1.0.13 version.

Hi pcambra, thank you for your MR! I merged it and will test your latest updates locally.

Hi giordy,
Possibly, Glightbox will open hidden images from links if you put the glightbox links in the same gallery:
https://github.com/biati-digital/glightbox/blob/master/README.md

<a href="large.jpg" class="glightbox3" data-gallery="gallery1">
  <img src="small.jpg" alt="image" />
</a>
<a href="video.mp4" class="glightbox3" data-gallery="gallery1" style="display: none;">
  <img src="small.jpg" alt="image" />
</a>

You can enable Glightbox Inline module (which is included in Glightbox module), then Glightbox library will be automatically added on all pages. And you will be able to use class="glightbox" for tag, for example:

<a href="https://url.com/full-image.png">
  <img src="https://url.com/thumbnail.png">
</a>

For Body text inside CKEditor I use this module:
https://www.drupal.org/project/image_resize_filter
It creates lightbox link for resized images automatically.

Then you can add style="display: none;" for your hidden extra images, to make it looks like a gallery.

Hi pcambra, thank you for your MR! I merged it and I will test your other updates together and publish a new release soon.

levmyshkin → created an issue.

Hi pcambra, thank you for your MR! It looks like big vulnerability, I will release a new tag for glightbox_media_video.

I copied code from this Colorbox Media Video module and it looks like there is also the same problem, I will raise a ticket for them.

Hi runkumark, EPT Hero module requires EPT Basic Button module. I added it as a dependency:
https://www.drupal.org/project/ept_hero/releases/1.4.5 →

You can install EPT Basic Button module separately:
composer require drupal/ept_basic_button

Or update EPT Hero module with dependencies:
composer update drupal/hero --with-dependencies

Ckeditor5 allows to create custom styles, tag with class. You can create any styles what you want.

Also Images by itself can be centered:
https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overvi...

Maybe it's required additional CKEditor5 plugin:
https://www.npmjs.com/package/@ckeditor/ckeditor5-alignment

Centering all images all the places it's not working for small inline images, like this:

You should use GLightbox for tag:

<p class="text-align-center">
<a href="/sites/default/files/tettonica/tectonics_map.gif" class="glightbox"><img src="/sites/default/files/tettonica/vulcani.png" data-entity-uuid="" data-entity-type="file" alt="distribuzione di vulcani e terremoti" width="651" height="223"></a>
</p>

Use Source mode in CKEditor to fix HTML.

It will be easier to ask ChatGPT about aligning different tags. It will consume your current HTML and suggest solution.
https://chatgpt.com/share/6749a3d2-ed98-800c-86d9-eb96bbce7f8f

There is no settings to align description in popup, but you can add some CSS in your Drupal theme to align description.

.gslide-title {
  text-align: center;
}

.gslide-desc {
  text-align: center;
}

You should utilize ChatGPT for translation, it's working better than Google Translate. It will also help to you with adding CSS, javascript for your site.

Hi axle_foley00, EPT Slideshow works with Slide link field:
https://www.drupal.org/project/ept_slideshow →

You can add Link field for your EPT Carousel Item paragraph type and use EPT Slideshow twig templates as example to wrap image in link.

I will add Link field for EPT Carousel on the next release, but it will not apply automatically for your site, because configs from the module imported once on installation. But you will be able to do partial import configs from folder with Drush after the release.

I tested adding custom 'glightbox' class for link and it's working well for me:

 <p>
    <a class="glightbox" href="/sites/default/files/styles/quote_image/public/2022-08/avatar-41e8d7f56d8cc34044d2c85fed687a37.jpg">asdfasdf</a>
</p>

Hi giordy, it's on GLightbox Settings form:
/admin/config/media/glightbox

You can open it from Configuration toolbar menu link.

You need to install CKEditor Advanced Link module:
https://www.drupal.org/project/editor_advanced_link →

It allows to add classes for links using CKEditor. Without this module CKEditor is working not so good with images wrapped by links.

I will have a look your question in this ticket:
https://www.drupal.org/project/glightbox/issues/3441244#comment-15863159 🐛 Setting description position not working Active

Hi giordy, you don't need to use 'glightbox-inline' class, this class is being used to load entire HTML page by URL in lightbox. Use usual 'glightbox' class instead. I will check GLightbox Inline module for initialization 'glightbox' class as lightbox, maybe it will require additional code:

        <script>
            var lightbox = GLightbox();
            var lightboxDescription = GLightbox({
                selector: '.glightbox'
            });
        </script>

Hi giordy, by default GLightbox opens all images as one gallery if gallery options weren't set. You need to select option Gallery per post on Manage Display page for you content type, for example Article:
/admin/structure/types/manage/article/display

I merged your request in 1.0.x-dev. I will try to add tokens on the next week.

Hi pcambra, it will be tricky to define 'mainly' paragraph automatically. Glightbox image formatter which is being applied to Image field can be referenced to Media entity first and Media field attached in Paragraph directly or in nested paragraph with Gallery and Gallery Item paragraph types. Image field can be included in 'mainly' Gallery paragraph type directly. Paragraph module is not limited by any structure or nested levels.
It's possible to prepare tokens for specific (common, most popular) cases:
1. Multiple image field inside 'mainly' Paragraph (without Media).
2. Single image field in paragraph Gallery Item and Gallery 'mainly' parent paragraph type (without Media).
3. Multiple media field inside 'mainly' Paragraph.
4. Single media field in paragraph Gallery Item and Gallery 'mainly' parent paragraph type.

It can be one token 'Parent title', but here is another problem, which field must be selected for this token. Gallery id is being generated automatically without additional complexity with Text field at the end.

It can be token by reference:
referenece_field_name:parent_entity:reference_field_name:parent_entity:text_field_name

From first glance, it should be straightforward, but I'm afraid that Drupal doesn't support parent entity, because of circullar tokens (parent entities support children fields tokens, children fields tokens support parent fields tokens) and it must be tricky too:
https://www.drupal.org/project/paragraphs/issues/3067265 ✨ Paragraph templates: unable to access parent-node tokens from child-paragraphs in the default installed setup Needs review

Here is a custom solution to create own site specific token:
https://drupal.stackexchange.com/questions/254406/how-to-get-token-of-pa...

I can create only 4 tokens for cases above, then it will be possible to select field for token, but site editor must be aware which token relates for his own site depends on its structure.

Demo page is working fine after update:
https://drupalbook.org/ept/demo/video-and-image-gallery

I will test site in folder with /base_path/ root and add settings for Plyr in GLightbox settings form later.

I merged your request and forked plyr library. It will download plyr library automatically with composer now. One I got error for getting paths with LibrariesDirectoryFileFinder, it returns 'library/plyr' path without slash at the beginning. It must be 'root' folder before, but there is no root prefix for my local site. I added '/' manually, which will be working for 99% of sites, but I think it will break base path for site in folder.

I released v1.0.12, ping me if you will have any problems with update. Since it was added a new argument in construction caches must be cleared after update.

Btw I will test your MR and merge it first tomorrow.