sal0max / grav-plugin-shortcode-gallery-plusplus

A Shortcode extension to add sweet galleries with a lightbox to your Grav website.
MIT License
33 stars 8 forks source link

Improve the slide description (Lightbox options) #10

Closed Fazarel closed 3 years ago

Fazarel commented 3 years ago

Currently this plugin only uses the alt attribute as image title and slide description: ![image title and description](image.jpg)

GLightbox allows to display more information in the description of the slides and to format the text with html: https://biati-digital.github.io/glightbox/#examples https://github.com/biati-digital/glightbox/blob/master/README.md

I am not a developer but here are the modifications I made to the plugin to complete and improve the description of the images using alt and title attributes:

In GalleryPlusPlusShortcode.php, I added these lines:

// get all alt descriptions (current code)
preg_match_all('|alt="(.*?)"|', $content, $descs);
// get all title descriptions (added)
preg_match_all('|title="(.*?)"|', $content, $descs2);

...

// at the end of return section
'descs2' => $descs2[1],

In gallery-plusplus.html.twig, I did the following amendment. The title attribute, if it exists, replaces the alt attribute in the description. The text can be formatted with html :

{# html #}
<p id="{{ id }}">
    {% for image in images %}
        {% set index = loop.index0 %}
        <a href="{{ links[index] }}" class="glightbox-{{ id }}"
            {# add description only if enabled #}
            {% if descEnabled == "true" %}
                {% if descs2[index] %}
                    data-description="{{ descs2[index]|raw }}"
                {% else %}
                    data-description="{{ descs[index] }}"
                {% endif %}
            {% endif %}
        >
            {{ image|raw }}
        </a>
    {% endfor %}
</p>

How to use it in a page:

[gallery captions="true"]
![Title 1](image1.jpg '<strong>Title 1</strong><br />Example 1<br />More description<br />Bla bla')
![Title 2](image2.jpg '<strong>Title 2</strong><br />Example 2<br />More description<br />Bla bla')
[/gallery]

This possibility to expand the description of images seems to me essential for this plugin. It can certainly be better coded.

sal0max commented 3 years ago

Great idea! To be honest, I wasn't even aware that markdown supports title attributes.

Your code looks mighty fine to me. I basically will use it for the update. :)

sal0max commented 3 years ago

Implemented with dea404972c19e6eae9ff4dc1dfa28a9f3c0d0267 / v1.1.0

Please check it out if that's what you wished for, @Fazarel . 👍

Fazarel commented 3 years ago

It works for my pages, without any additional changes. Thank you!