sal0max/grav-plugin-shortcode-gallery-plusplus

A Shortcode extension to add sweet galleries with a lightbox to your Grav website.

grav-plugin-shortcode-gallery-plusplus's Issues

margin vertically

hi,

thanks for this great plugin.

is there a way to set margin between images vertically?

how to align gallery horizontally?

Hello,

is there way to align gallery horizontally on the page? I.e. I have a gallery of just two pictures which doesn't take the full width of the page. I've tried to wrap [gallery] in <center> tag or <div class="center"> but it renders gallery invisible.

Also, is it possible to center align text in slide description?

Method for adding image description without adding title to the image

Hello,
I am trying to add a long html-formatted description to the image that I want to be visible when user clicks on the image. However, the image description is also added as an image title, which means that on mouseover it gets displayed and it looks quite ugly.
It would be nice if there was a way to add a description without adding a title to the image, or maybe an option like hideTitle=true/false
For now I just added $('img').removeAttr('title'); to gallery-plusplus.html.twig scripts and it does what I need, but I am sure there's a better way to do it.

this plugin doesn't seem to work along with "trilbymedia/grav-plugin-image-captions"

Hello, I have your plugin with default configuraiton.
When I have "trilbymedia/grav-plugin-image-captions" plugin enabled and reference an image with 'caption' class in my page, i.e.

![](image1.jpg?classes=caption,center "My image caption")

Then any [gallery] within the same page is not rendered anymore.

The source section becomes just empty:

<p id="6977931">
    </p>
....
    <script src="/assets/5246ceab977a56b766085feb05e6a042.js"></script>
<script>
$("#6977931").justifiedGallery({
    rowHeight: 400,
    margins: 8,
    lastRow: "nojustify",
    captions: false,
    border: 0,
});

GLightbox({
    selector: ".glightbox-6977931",
    openEffect: "zoom",
    closeEffect: "fade",
    slideEffect: "slide",
    closeButton: true,
    touchNavigation: true,
    touchFollowAxis: true,
    keyboardNavigation: true,
    closeOnOutsideClick: true,
    loop: true,
    draggable: true,
    descPosition: "bottom",
});
</script>

While it still works if the same image comes only with the 'center' class selector.
![](image1.jpg?classes=center "My image caption")

Just in case - I use "quark-open-publishing" theme

Helium Theme: the class="justified-gallery" is not there anymore.

@sal0max Hi I have the same problem with Helium: the class="justified-gallery" is not there anymore.

My settings:
Shortcode gallery+++ v 1.2.1
Helium v 5.5.11
Gantry 5 v 5.5.11
Grav v.1.7.30
Admin Panel v. 1.10.30.2

I tried to locate the base.html.twig file of the theme, but i couldn't find it

Any idea how to fix the issue?

Originally posted by @beamaria in #22 (comment)

Group multiple galleries

Hello,

Thank you for this neat plugin :)

I would like to be able to group multiple separate galleries, so users can navigate through all the images which are spread across the page.

For example, being able to navigate between the 3 images in the following 3 galleries:

### Title 1

Text 1.

[gallery]
![image 1](image1.png)
[/gallery]

### Title 2

Text 2.

[gallery]
![image 2](image2.png)
[/gallery]

### Title 3

Text 3.

[gallery]
![image 3](image3.png)
[/gallery]

Is this something doable?

Gallery doesn't collapse into a grid?

Hello,

I'm a new user of this gallery plugin, and I can't get it to display a grid / thumbnail preview of images. It's just showing image after image like there wasn't a gallery plugin there at all:

http://www.ivoras.net/divlje-20te/savrsen-ljetni-sat-seiko-srpg47k1

The code I'm using in the Grav editor is:

[gallery]
![20210731_182054](20210731_182054.jpg "20210731_182054")
![20210807_182628](20210807_182628.jpg "20210807_182628")
![20210811_091805](20210811_091805.jpg "20210811_091805")
![20210811_101408](20210811_101408.jpg "20210811_101408")
![20210811_151443](20210811_151443.jpg "20210811_151443")
![20210815_183903](20210815_183903.jpg "20210815_183903")
![20210823_174259](20210823_174259.jpg "20210823_174259")
![20210823_174940](20210823_174940.jpg "20210823_174940")
[/gallery]

The generated HTML does mention the gallery plugin but it's like something is missing, maybe CSS or JS to make it work?

I've installed the plugin from the Admin panel. This is plugin version 1.1.1 on Grav 1.7.18. The Shortcode Core plugin version is 5.0.6 (and it's installed and enabled).

Can you help me get the plugin working?

Justify first instead of last row when odd number of images

First of all, thank you very much for this marvellous plugin! It comes in very handy and clearly does the job!

This is a feature request.

Currently, when justify is enabled and the number of images is odd, the last image is displayed big. Example:

| 1st image | | 2nd image|
| T h i r d _____ i m a g e |

The thing is, it would be much nicer to display the first image bigger and the others smaller, hence the other way around.

| F i r s t _____ i m a g e |
| 2nd image | | 3rd image|

CodeMirror Editor Button for the Gallery

For usability, it would be great if a button could be added to the editor menu which enters the shortcode markers

[gallery lastRow=justify]
[/gallery]

to the text where the shortcode should get inserted and placing the cursor just behind "...justify]Cursor". That way there won't be an empty line to start the gallery and the "lastRow=justify" as standard guarantees that the gallery is always in a nice looking format no matter what image formats had been inserted.

It would make the gallery plugin much more usable and would limit typing errors.

Checking for <pre> breaks page

commit 20de209 "Improved image parsing"

Below code breaks page

// check validity if (str_contains($content, "<pre>")) return "<p style='color: #d40000; font-weight: bold; padding: 1rem 0;'>[Shortcode Gallery++] Error:<br> &gt; Images provided got parsed as code block.<br> &gt; Please check your markdown file and make sure the images aren't indented by tab or more than three spaces.</p>";

Used example code in readme (switching out for my images).
There is no <pre> anywhere on the page.

Error:
Call to undefined function Grav\Plugin\Shortcodes\str_contains()
References line 45

Removing the check validity makes it work fine.

Don't work

I don't know the origine of the cause, but it don't work with my custom theme.

Screenshoot1 without the [gallery] :

Screenshoot2 with the [gallery] :

PHP Parse error: syntax error, unexpected '?'

Received this one per mail:

After update shortcode-gallery-plusplus 1.2.1 > 1.4 I got the following error:

[Thu May 05 17:27:15.751955 2022] [php7:error] [pid 26888] [client 84.80.23.178:55825] PHP Parse error: syntax error, unexpected '?', expecting function (T_FUNCTION) or const (T_CONST) in /var/www/html2/grav/user/plugins/shortcode-gallery-plusplus/shortcode-gallery-plusplus.php on line 15

My grav website and admin-page are not working any more. the only solution was to remove plugin by CLI and reinstal the old plugin (from backup)

---

The code in question here is this line from the merged pull request #25 from @Sailoriae:

private ?Page $currentPage = null;

The error message indicates, that the ?, which is a Nullable Type hint and which was introduced in PHP 7.1, is wrong.

My guess: The email author uses PHP < 7.1, which causes this error. And that is odd. This plugin states, that it needs at least Grav 1.6, and Grav 1.6 needs at least PHP 7.1.3.

Strong indication that PHP7 is used: [php7:error] in the error message. ;)

So, tldr;: Author needs to provide more information. I'll keep this issue updated.

Optimize page loading: indicate 2 images

Suggestion for enhancement.

In order to optimize the page loading, allow to indicate 2 images: a small one and a large one. Or define a nomenclature to use 2 images (for example image.jpg and image_small.jpg in the same folder). The objective being a result in html as in this example:

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

In addition GLightbox allows the use of videos. Being able to specify 2 files would offer the possibility of an image in the gallery that links to a video in GLightbox.

If I develop a solution I will post it. For now I submit this suggestion for consideration...

Getting "Uncaught TypeError: $(...).justifiedGallery is not a function"

I installed the plugin via the admin panel, saved the configuration and cleared all caches.

Before the plugin was installed, I saw the following on my page:

[gallery]<some image markdown>[/gallery]

After installing the plugin, this is gone (conclusion: The plugin is working and detects the shortcode), but I don't see any images. Instead, I get above error in the development console.

The following additional elements are linked in the document and downloaded according to the development console.

• justifiedGallery.min.css
• jquery.justifiedGallery.min.js

Also, the following script is added at the bottom of the page:

<script>
$("#192376910").justifiedGallery({
    rowHeight: 200,
    margins: 3,
    lastRow: "nojustify",
    captions: false,
    border: 0,
    waitThumbnailsLoad: false,
    thumbnailPath: function (currentPath, width, height, image) {
        return image.currentSrc;
    },
});

GLightbox({
    selector: ".glightbox-192376910",
    openEffect: "zoom",
    closeEffect: "zoom",
    slideEffect: "slide",
    closeButton: true,
    touchNavigation: true,
    touchFollowAxis: true,
    keyboardNavigation: true,
    closeOnOutsideClick: true,
    loop: false,
    draggable: true,
    descPosition: "bottom",
    moreText: "See more",
    moreLength: 60,
});
</script>

How can I resolve this issue?

Readme.md has incorrect example code.

[gallery
rowHeight=230
margins=25
lastRow="justify"
captions="false"
border=0]
...
[/gallery]
Above code does not work. It displays as plain text.

Keeping it as one line does work though.
[gallery rowHeight=230 margins=25 lastRow="justify" captions="false" border=0]
...
[/gallery]

Call to undefined function Grav\Plugin\Shortcodes\str_contains()

I'm tryin your plugin and it shows the following error:

Call to undefined function Grav\Plugin\Shortcodes\str_contains(), in line 45

If I comment this code, it works fine:

if (str_contains($content, "<pre>"))
    return "<p style='color: #d40000; font-weight: bold; padding: 1rem 0;'>[Shortcode Gallery++] Error:<br> 
            &gt; Images provided got parsed as code block.<br>
            &gt; Please check your markdown file and make sure the images aren't indented by tab or more than three spaces.</p>";

What's wrong?

List images in directory

Instead of listing images manually, it would be nice to be able to put a folder and all images in the folder would be displayed in the gallery. See this plugin: https://github.com/michaijtsma/grav-plugin-dir-gallery (but yours is nicer)

"justified-gallery" disappeard after recent update of Shortcode Gallery++ v1.2.1

Hello!

After the recent update of Shortcode Gallery++ (v1.2.1) my images are not arranged as justified gallery anymore.

I have updated the plugin on a test-website first and it shows a different arrangement of my images, than on the website which is online. After opening the inspector and comparing both portfolios, it shows that the class="justified-gallery" is not there anymore on the test-site.

this is the website where it works correctly (I haven´t updated the plugin here): https://www.lexart-tattoo.at/

How can I fix this on my test site?

Thanks a lot in advance.

The lightbox and navigation features don't work

Hi ! Thanks for the great work.

I'm having the following issue : while the gallery seems to be working good, the lightbox effect doesn't work. Instead of having the full-screen popup with the navigation arrows, it just go the url of the image, displaying it in my browser without any effect or navigation option. Naturally, if i try to change some of the lightbox options in the admin panel, nothing happens on the frontend.

Can you help me with that ? Thank you so much !

[question] shortcode in twig template

I want to use your gallery shortcode in a twig.html – is it possible?
I thought it should be

{{% gallery %}}
{{ image["image"]|raw }}
{{% end %}}

TIA

Gantry 5 Adding Shortcode in Custom HTML Particle Fails

Going to top of website when opening gallery on mobile device

Hi!
I've fund a bug that can be annoying for people reading articles on mobile devices (smartphone).

When you open the gallery with images, the whole website is scrolling back to the top in the background, so when the user is closing the gallery he needs to scroll down to the place when he was reading. Tested on Samsung Galaxy S10e device with latest Chrome and Samsung's stock web browser, but you can see the same behavior on Chrome or Edge when emulating mobile device in DevTools.

You can check such behavior here on my website: https://nindyki.pl/instax-mini-link-recenzja (which runs on Grav v1.7.20).

Separate row height for smartphone/mobile devices

It would be nice to have a separate option to determine the row height for mobile devices. The reason being that an array of images looks good on the desktop but on the phone it simply is one image (full width of screen) per row.

My current workaround is to keep the row height at 100px, this way it is two images per row on a phone and six images per row on the desktop. It is not optimal but I can live with it. It would be nicer to only have 3 per row on the desktop.

Light area at the bottom of the image on smartphone, horizontal screen

On a cell phone, when the screen is rotated horizontally, a gray filter is applied to the image but not to the full height, leaving a lighter area at the bottom of the image.

Bug found on iPhone, Android, Ubports, with Firefox, Safari, Chrome, Brave and Morpheus browsers.

You can see the bug on eduardomataicasa.com (by the way thank you for your work !)

Request: the ability to control the character limit of the description in mobile views

Currently you'd have to click "See more" on mobile views
A request to have the ability to control the limit of the characters
Again, thank you for sharing the code

Improve the slide description (Lightbox options)

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.

Uncaught TypeError: this.resetImgSrc is not a function

Hi there!

Recently I've got some problems with your plugin on my site with Quark Open Publishing theme.

When I use it, images on page are blank (but I can see captions) and when I click on them - they will show correctly. In Chrome's console I can see such error:
Uncaught TypeError: this.resetImgSrc is not a function

You can check how it looks and behave for example here: https://nindyki.pl/dorfromantik-nintendo-switch

Any idea how to fix it?

Is there an known incompalibility with other plugins

I love your gallery-plugin.
Installed on my GRAV v1.6.25 site.
The images are displayed fine, but the navigation does not seem to work.
I've also got UniteGallery and Featherlight plugin active. Disabling them does not solve the problem.
Enabling and disabling the page cache does not make any difference.
I hope you can shed some light on the matter.

Pinch to zoom

Thank you so much for this plugin!

Are you planning on implementing pinch to zoom on mobile devices? Or have we overseen the option?

Thanks again!

Shortcode Gallery++ doesn't work with the Gantry 5 Helium theme

Grav v1.7.5, Gantry v5.4.37

It seems like jQuery as well as the plugin specific JS and CSS files aren't being included.
I got it working by adding the following into /user/plugins/gantry5/engines/nucleus/templates/page_head.html.twig, which isn't very elegant but the best I could come up with.

 <script src="//code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
 <script src="http://mysite.com/grav/user/plugins/shortcode-gallery-plusplus/vendor/glightbox/glightbox.min.js" type="text/javascript"></script>
  <script src="http://mysite.comh/grav/user/plugins/shortcode-gallery-plusplus/vendor/justified-gallery/jquery.justifiedGallery.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="http://mysite.com/grav/user/plugins/shortcode-gallery-plusplus/vendor/glightbox/glightbox.min.css">
  <link rel="stylesheet" href="http://mysite.com/grav/user/plugins/shortcode-gallery-plusplus/vendor/justified-gallery/justifiedGallery.min.css">

right before

{% block head_application -%}
        {{ gantry.styles('head')|join("\n")|raw }}
        {{ gantry.scripts('head')|join("\n")|raw }}
{%- endblock %}

Thank you for your work!
Tobias

Gallery style is lost when the page is reloaded

Update: i found the problem: cache in frontmatter must be disabled

I like your beautiful - and easy to implement!! - gallery. Just a strange behaviour: when you create the gallery and see it in the preview everything is working fine, but as soon as you reload the page you have all the images displayed in a list. The only way to have the correct display back is to clean the cache in GPM.
Working in local environment with the latest version of Grav and admin panel (updated today)