Edit this Page
This is a Demo Site with Custom Banner plugin
Dismiss Click me...

Shortcode Gallery++

Grav Plugin
Montessori X - Andi Becker

ads-image-1599x1066-background-beverage-break-958165_1 brown-map-on-map-2660262 ads-image-1599x1066-adding-blurred-background-carrot-1657103_1 Test-Landscape africa-2665112_1920 ads-image-1599x1066-art-blur-close-up-326036_1 Test-Portrait ads-image-1599x1066-art-border-card-2395249_1

Building a justified Gallery with Lightbox

  1. Optimize and prepare your images i.e. with https://tinypng.com
  2. Insert the "gallery" opening tag
  3. Insert an empty row
  4. Insert the "/gallery" cclosing tags
  5. 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.

brown-map-on-map-2660262 ads-image-1599x1066-background-beverage-break-958165_1 ads-image-1599x1066-adding-blurred-background-carrot-1657103_1 Test-Landscape ads-image-1599x1066-art-blur-close-up-326036_1 Test-Portrait africa-2665112_1920 ads-image-1599x1066-art-border-card-2395249_1

Issues

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

tags:

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:

Demo

  • 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: ![caption](image.jpg)
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: ![](image.jpg "description")
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-plusplus

Alternatively: 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:

0 Comments: