🇷🇸Serbia @levmyshkin

Hey gmarez8, it's not tricky to generate CSS at all, you can check how DOM Box and Background color work and you can extend Field Widget with any fields with Drupal Form API. You get values from Drupal Form API and insert them in template preprocess and output in template as variable. A little bit messy, but when where will be a lot of code I will refactore it with plugins. For now it's OK to do it straightforward in functional way.

I can add these fields as well and make configuration form to enable this functionality in EPT Core if it's needed on site:
https://www.drupal.org/project/ept_core →
It's not hard to implement gradient generator like this:
https://www.w3schools.com/colors/colors_gradient.asp

Or find jquery/javascript library for generating gradient and include it with EPT Core.

Also, as an option, you can add Custom CSS field, generate gradient on another service and insert it:
https://cssgradient.io/

Hi john_b, it looks like a conflict with other jQuery UI library. jQuery UI Tabs checks IDs on the page and if ui-id-1 ID already exists, then it tries next one ui-id-2. Check what element already uses ui-id-1, I can't find a way to define these tabs IDs, because it's not provided in jQuery UI tabs documentation:
https://api.jqueryui.com/
https://jqueryui.com/tabs/

It's somewhere inside jQuery UI API. I can only suggest to use nth-child() for CSS and add custom anchor in HTML. Also jQuery UI Tabs provides API to open needed tabs on page loading, there is also setting in EBT Settings.

I have no idea how to make jQuery UI Tabs more consistant, I asked ChatGPT, but it also doesn't have any ideas.

Hi gmarez8, I added fields for all wrappers in 'Elements additional classes' fieldset:

You can update module and use bootstrap classes for the wrappers:
https://www.drupal.org/project/ept_hero/releases/1.4.6 →

I see what you mean, usually on commercial project, I use different predefined variants. I create predefined styles and separate them with View Modes, then you need to create own template for each view mode with all needed classes. It's possible to choose view mode and edit page using Paragraph View Mode or Paragraphs View Modes modules:
https://www.drupal.org/project/paragraph_view_mode →
https://www.drupal.org/project/paragraphs_viewmode →

Here is article about overriding EPT templates:
https://www.drupal.org/project/ept_slideshow/issues/3406887 💬 How to override slideshow item template file? Needs review

Then you don't need to select 15 classes on edit form and select only Variant (predefined View Mode). It looks harder to implement and create content. But if you will see from Content Editor perspective, it's easier to select Variant instead of remembering Bootstrap Grid classes. It's easier to switch from Bootstrap to Tailwind or own Desing System when all classses are stored in templates than go through all pages and change classes manually.

In the case you have only 20-30 pages and you need to create dozens of these sites quickly and you will create pages by yourself. This approach with fields for all elements will work. I agree it's worth it then. OK, let's try to achieve this. I will add collapsed fieldset with textfields for additional classes and pass them in the template:

    <div class="bg-inner {{ bg_inner_classes }}"></div>
    <div class="ept-container {{ ept_container_classes }}">

Feel free to re-open this ticket if will need any help with extending Field Widget.

Hi gmarez8, you can install Fences module:
https://www.drupal.org/project/fences →
It allows to add additional classes for all fields wrappers.

I have additional module for Bootstrap Buttons:
https://www.drupal.org/project/ept_bootstrap_button →

Here is a bunch of Bootstrap Paragraphs:
https://www.drupal.org/project/drowl_paragraphs_bs →

I'm not sure what exactly you want to do with additional classes. All EPT paragraphs has or can have Additional Classes setting. It's possible to extend Field Widget for EPT Settings field and add any number of additional fields. But then it will look too messy for editors.

If you could specify what exactly want to extand with classes (First, Second buttons) then I will extend Hero Field Widget for EPT settings field.

levmyshkin → created an issue.

What’s blowing up?
Drupal 11 ships with jQuery 4.0.0-beta. One of the breaking changes in jQuery 4 is that the long-deprecated helper jQuery.isFunction() (and the alias $.isFunction) has been removed. The minified Waypoints 4.0.1 library that your theme/module loads still calls that helper. In the compressed file the call appears as t.isFunction, where t is the local reference to jQuery. Because the method no longer exists, the browser throws:
Uncaught TypeError: t.isFunction is not a function

right where Waypoints tries to register a waypoint.

Fix options:

1. Patch Waypoints (recommended)
Replace every occurence of $.isFunction(…) with typeof … === 'function'

2. Add a one-line polyfill Before Waypoints loads, inject js
js if (typeof jQuery.isFunction !== 'function') { jQuery.isFunction = obj => typeof obj === 'function'; }

3. Use jQuery Migrate 4 plugin Load the official migrate plugin that re-adds removed helpers.

Quick Drupal-specific patch
Create my_module/js/jquery4-polyfills.js:

/**
 * Tiny polyfills for libraries that still expect jQuery < 4.
 */
(( $, Drupal, drupalSettings ) => {
  if (typeof $.isFunction !== 'function') {
    $.isFunction = obj => typeof obj === 'function';
  }
})(jQuery, Drupal, drupalSettings);

Then add this library to your theme/modules’ libraries.yml before the Waypoints library to guarantee it is evaluated first.

Long-term
Track the “Deprecated t.isFunction call on D11” issue in the jQuery Waypoints queue; once a new release lands, remove your patch/polyfill.
Drupal

Audit any other contributed or custom scripts for calls to $.isFunction, $.isNumeric, $.trim, jQuery.type, etc.—all of them vanished in jQuery 4. Drupal’s upgrade status report will flag many of these automatically.
Drupal

Once Waypoints (and any similar libraries) are patched, Drupal 11 + jQuery 4 will run without the “isFunction” crash.

Hi Shane Birley, thank you for your report and patch! I applied it and released 1.4.6 version for EBT Countdown.

Working for me.

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.