How to use GLightbox in a node

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>

Thanks for the reply. Unfortunately I am not familiar with scripts and do not know how to use them.
I think I found the problem anyway.

In the documentation:

<!-- Simple image -->
<a href="large.jpg" class="glightbox">
  <img src="small.jpg" alt="image" />
</a>

On my site I put:

<a href="/sites/default/files/tettonica/tectonics_map.gif" class="glightbox"><img src="/sites/default/files/tettonica/vulcani.png" width="651" height="223"></a>

I save, check the code and find:

<a href="/sites/default/files/tettonica/tectonics_map.gif"><img class="glightbox" src="/sites/default/files/tettonica/vulcani.png" width="651" height="223"></a>

CKEditor moved the class to the second image.
How do I fix it?

P.S. Did you see my question in https://www.drupal.org/project/glightbox/issues/3441244#comment-15863159 🐛 Setting description position not working Active ?

Thanks and kind regards

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

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>

The Editor Advanced Link and Editor Advanced Image modules are regularly installed.
That is not the problem.

The module works with text, but does not work with two images.

I summarize the situation.

1. I insert an image with IMCE
2. I connect the image with another image
3. In the link I put the glightbox class
4. I save and check if it works: html has not changed
5. In the same page I copy the code of another page that originally had colorbox
6. I replace colorbox with glightbox
7. I save and check if it works: html has changed, the class has been moved from the link to the image

See the page https://prova.gmpe.it/prove.

In the same page I have two images, one works and the other does not. Absurd!
Practically, it only works on new images and not on existing ones.

I do not know how to solve the problem because I have dozens of images to replace.

Thanks and best regards

I found the problem: it's the p tag

It works if I put:

<a class="glightbox" href="/sites/default/files/tettonica/tectonics_map.gif"><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>

If instead I put:

<p class="text-align-center">
<a class="glightbox" href="/sites/default/files/tettonica/tectonics_map.gif"><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>

CKEditor moves the class and shows the wrong image:

<p class="text-align-center">
<a href="/sites/default/files/tettonica/tectonics_map.gif"><img class="glightbox" 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>

Unfortunately without the p tag I don't know how to center the images.

Thanks and best regards

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

Unfortunately none of the three methods work:
- div moves the class as p
- css does not center the image

CKEditor 5 sucks!

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: