The Shortcode Gallery++ Plugin is an extension for Grav CMS. A shortcode extension
to add sweet galleries to your Grav website.
It combines Justified-Gallery by Miro Mannino and GLightbox by biati digital.
It's quite simple. Just wrap some image links in [gallery] tags:
[gallery]
...
[/gallery]This plugin combines a nice justified gallery layout with an eye-pleasing lightbox.
All images get nicely aligned. After a click on one of them, a sweet popup appears, showing it full-screen.
Just have a look for yourself:
- You can of course create several galleries on the same page.
- You have plenty of settings you can change in the admin panel.
- You can also change everything for a single galleries via shortcode. For example:
[gallery rowHeight=230 margins=25 lastRow="justify" captions="false" border=0]
...
[/gallery]| parameter | possible values | description |
|---|---|---|
rowHeight |
dimension in pixel | The preferred rows height. |
margins |
dimension in pixel | The margins between the images. |
lastRow |
justify, hide, nojustify, center, right |
justify: justifies the last row; hide: hides the row if it can't be justified; nojustify: align the last row to the left; center: align the last row to the center; right: align the last row to the right |
captions |
true, false |
Enable captions that appear when the mouse hovers an image. For caption, the alt-text of an image is used:  |
border |
dimension in pixel | The border size of the gallery. With a negative value the border will be the same as margins. |
resizeFactor |
1, 1.5, 2, 2.5, 3 |
The pixel density of the thumbnails. 1 is maybe a little bit low, since high pixel density screens have become more popular. 2 is a good compromise between the weight of the thumbnails when loading the page, and their quality. 3 displays great quality thumbnails on any device. |
removeTitle |
true, false |
Remove the title attribute from <img> elements in the gallery. Is interesting when you have long descriptions. |
| parameter | possible values | description |
|---|---|---|
openEffect |
zoom, fade, none |
|
closeEffect |
zoom, fade, none |
|
slideEffect |
slide, zoom, fade, none |
|
closeButton |
true, false |
Show or hide the close button. |
touchNavigation |
true, false |
Enable touch navigation (swipe). |
touchFollowAxis |
true, false |
Image follow axis when dragging on mobile. |
keyboardNavigation |
true, false |
Enable or disable the keyboard navigation. |
closeOnOutsideClick |
true, false |
Close the lightbox when clicking outside the active slide. |
loop |
true, false |
Loop slides on end. |
draggable |
true, false |
Enable or disable mouse drag to go to previous and next slide. |
descEnabled |
true, false |
For description, the title-text of an image is used:  |
descPosition |
bottom, top, left, right |
The position for slides description. |
descMoreText |
text | Description: "See more" text. |
descMoreLength |
number | Description: Characters until "See more". Will display the entire description, if set to 0. |
To install the plugin via the GPM, navigate to the root of your Grav-installation, and enter:
bin/gpm install shortcode-gallery-plusplus
If you use the Admin Plugin, you can install the plugin directly by browsing the Plugins-menu and clicking on
the Add button.
NOTE: This plugin is a modular component for Grav which requires the Grav Shortcode Core Plugin to be installed.
To install the plugin manually, download the zip-version of this repository and unzip it
under /your/site/grav/user/plugins. Then rename the folder to shortcode-gallery-plusplus. You can find these files
on GitHub or
via GetGrav.org.
Before configuring this plugin, you should copy
the user/plugins/shortcode-gallery-plusplus/shortcode-gallery-plusplus.yaml
to user/config/plugins/shortcode-gallery-plusplus.yaml and only edit that copy.
Preferably, use the Admin Plugin. It takes care of creating a file with your configuration
named shortcode-gallery-plusplus.yaml to be created in the user/config/plugins/-folder once the configuration is
saved in the Admin.
Couldn't be possible without those awesome libraries:
- Justified-Gallery by Miro Mannino
- GLightbox by biati digital
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent