Building a justified Gallery with Lightbox
- Optimize and prepare your images i.e. with https://tinypng.com
- Insert the "gallery" opening tag
- Insert an empty row
- Insert the "/gallery" cclosing tags
- Now fill the space between those two gallery tags with some images from Page Media which you can upload too. I suggest you are using for each image a new row! This will help you to keep a better overview of inserted images but also when moving around and changing the order of images, which has to be done by changing the position/order of the images.
The same gallery but the images in another order changes also the look of the gallery itself. So feel free to "play" and "experiment" a bit with the best settings and look ;-). Keep in mind that the gallery will change the order also depending on the available viewport width. Nevertheless in both cases the Gallery will open up in a lightbox.
from README:
Shortcode Gallery++ Plugin
About
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.
Usage
It's quite simple. Just wrap some image links in
Okay, what does it look like?
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 settings
| 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. |
Lightbox settings
| 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. |
Installation
Preferred way: GPM Installation
To install the plugin via the GPM, navigate to the root of your
Grav-installation, and enter:
bin/gpm install shortcode-gallery-plusplusAlternatively: via Admin Plugin
If you use the Admin Plugin, you can install the plugin directly by browsing the Plugins-menu and clicking on
the Add button.
If you wish so: Manual Installation
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.
Configuration
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.
Credits
Couldn't be possible without those awesome libraries:
- Justified-Gallery by Miro Mannino
- GLightbox by biati digital
0 Comments: