feat(demo): add story 1 — Sorano: Rock and Time

plugins/shortcode-gallery-plusplus/CHANGELOG.md

@@ -0,0 +1,125 @@
+# v1.6.0
+##  04/18/2023
+
+1. [](#new)
+   * New option: configure the thumbnail size.
+2. [](#improved)
+   * Further improvements on thumbnail generation.
+
+# v1.5.0
+##  10/02/2022
+
+1. [](#new)
+   * New option to disable the `title` attribute on images.
+2. [](#bugfix)
+   * Fix a problem with Gantry.
+3. [](#improved)
+   * Better thumbnail generation.
+
+# v1.4.2
+##  05/25/2022
+
+1. [](#improved)
+   * Support for `loading` attributes on image thumbnails. To learn more, see
+      * https://learn.getgrav.org/17/advanced/grav-development/grav-17-upgrade-guide#media
+      * https://learn.getgrav.org/17/content/media#loading
+
+# v1.4.1
+##  05/06/2022
+
+1. [](#improved)
+    * Make this plugin compatible with older PHP versions.
+
+# v1.4.0
+##  05/05/2022
+
+1. [](#new)
+    * Option configure "See more" text and text length until "See more appears" for the lightbox.
+
+# v1.3.0
+##  05/04/2022
+
+1. [](#new)
+    * Option to disable thumbnails on RSS, Atom and JSON feeds from the Feed plugin
+2. [](#improved)
+    * Updated GLightbox to [3.2.0](https://github.com/biati-digital/glightbox/releases/tag/3.2.0)
+
+# v1.2.1
+##  09/17/2021
+
+1. [](#improved)
+    * Improved formatting of the generated HTML.
+
+# v1.2.0
+##  09/07/2021
+
+1. [](#new)
+    * The thumbnail images in the gallery will now use a smaller resolution, to improve performance. Change the thumbnail size in the settings!
+2. [](#bugfix)
+    * The toggle buttons in the settings were too narrow for some languages, cutting off text. This is fixed now.
+3. [](#improved)
+    * This plugin is now compatible to be used with all the caching features of Grav.
+
+# v1.1.1
+##  08/29/2021
+
+1. [](#improved)
+   * Updated GLightbox to [3.1.0](https://github.com/biati-digital/glightbox/releases/tag/3.1.0)
+
+# v1.1.0
+##  06/03/2021
+
+1. [](#bugfix)
+   * Sometimes the descriptions could get mixed up and be displayed with the wrong image. This is now fixed.
+2. [](#new)
+   * You can now provide different values for **captions** (shown on the images in the gallery) and **descriptions** (shown in the lightbox):  
+     An images `alt`-value will be the caption, its `title`-value the description. Example:  
+     `![image caption](image.jpg "image description")`  
+     The descriptions can even be html formatted:  
+     `![image caption](image.jpg "<strong>Descriptions</strong> can also<br>be <i>HTML</i> formatted.")`
+
+# v1.0.6
+##  05/23/2021
+
+1. [](#improved)
+   * Updated GLightbox to 3.0.9
+
+# v1.0.5
+##  04/10/2021
+
+1. [](#improved)
+   * Updated GLightbox to 3.0.8
+
+# v1.0.4
+##  04/04/2021
+
+1. [](#bugfix)
+   * Fixes a problem where no images would be shown when used together with the `trilbymedia/grav-plugin-image-captions` plugin
+
+# v1.0.3
+##  02/10/2021
+
+1. [](#bugfix)
+   * Provide backwards compatibility with PHP 7
+2. [](#bugfix)
+   * Fixes a problem where this plugin wouldn't work properly any more, when caching is enabled in the system settings
+
+# v1.0.2
+##  02/05/2021
+
+1. [](#bugfix)
+   * Added missing jQuery dependency
+   
+# v1.0.1
+##  01/06/2021
+
+1. [](#improved)
+    Updated GLightbox to 3.0.7
+2. [](#improved)
+   * Improved image parsing
+
+# v1.0.0
+##  12/30/2020
+
+1. [](#new)
+   * Initial release 🎈

plugins/shortcode-gallery-plusplus/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Maximilian Salomon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

plugins/shortcode-gallery-plusplus/README.md

@@ -0,0 +1,119 @@
+# Shortcode Gallery++ Plugin
+
+## About
+
+The **Shortcode Gallery++** Plugin is an extension for [Grav CMS](http://github.com/getgrav/grav). A shortcode extension
+to add sweet galleries to your Grav website.  
+It combines [Justified-Gallery](https://github.com/miromannino/Justified-Gallery) by Miro Mannino and [GLightbox](https://github.com/biati-digital/glightbox) by biati digital.
+
+## Usage
+
+It's quite simple. Just wrap some image links in `[gallery]` tags:
+
+```markdown
+[gallery]
+![Alt text 1](image.jpg "Some description to be used in the lightbox")
+![Alt text 2](/images/image.jpg "<strong>Descriptions</strong> can also<br>be <i>HTML</i> formatted.")
+![relative link](../image.jpg)
+![remote link](https://remotesite.com/image.jpg)
+...
+[/gallery]
+```
+
+## 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](assets/demo.webp)
+
+* 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:  
+```markdown
+[gallery rowHeight=230 margins=25 lastRow="justify" captions="false" border=0]
+![Alt text 1](image.jpg "Some description to be used in the lightbox")
+![Alt text 2](/images/image.jpg "<strong>Descriptions</strong> can also<br>be <i>HTML</i> formatted.")
+![relative link](../image.jpg)
+![remote link](https://remotesite.com/image.jpg)
+...
+[/gallery]
+```
+
+## 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`.
+| `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.
+
+## 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.
+| `descMoreText`        | text            | Description: "See more" text.
+| `descMoreLength`      | number          | Description: Characters until "See more". Will display the entire description, if set to `0`.
+
+
+---
+
+## Installation
+
+### Preferred way: GPM Installation
+
+To install the plugin via the [GPM](http://learn.getgrav.org/advanced/grav-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
+](https://github.com/getgrav/grav-plugin-shortcode-core) 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](https://github.com/sal0max/grav-plugin-shortcode-gallery-plusplus) or
+via [GetGrav.org](http://getgrav.org/downloads/plugins#extras).
+
+## 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](https://github.com/miromannino/Justified-Gallery) by Miro Mannino
+* [GLightbox](https://github.com/biati-digital/glightbox) by biati digital

plugins/shortcode-gallery-plusplus/blueprints.yaml

@@ -0,0 +1,215 @@
+name: Shortcode Gallery++
+slug: shortcode-gallery-plusplus
+type: plugin
+version: 1.6.0
+description: A Shortcode extension to add sweet galleries with a lightbox to your Grav website.
+icon: code
+author:
+  name: Maximilian Salomon
+  email: msal.coding@gmail.com
+homepage: https://github.com/sal0max/grav-plugin-shortcode-gallery-plusplus
+demo:
+keywords: grav, plugin, shortcode, gallery, glightbox, justifiedgallery
+bugs: https://github.com/sal0max/grav-plugin-shortcode-gallery-plusplus/issues
+docs: https://github.com/sal0max/grav-plugin-shortcode-gallery-plusplus/blob/master/README.md
+license: MIT
+
+dependencies:
+  - { name: grav, version: '>=1.7.4' }
+  - shortcode-core
+
+form:
+  validation: strict
+  fields:
+    enabled:
+      type: toggle
+      label: PLUGIN_ADMIN.PLUGIN_STATUS
+      highlight: 1
+      default: 0
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+
+    gallery:
+      type: section
+      title: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.GALLERY_SETTINGS
+      underline: true
+      fields:
+        gallery.rowHeight:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_ROW_HEIGHT
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_ROW_HEIGHT_HELP
+          type: number
+          validate:
+            min: 0
+          size: small
+        gallery.margins:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_MARGINS
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_MARGINS_HELP
+          type: number
+          validate:
+            min: 0
+          size: small
+        gallery.lastRow:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_LAST_ROW
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_LAST_ROW_HELP
+          type: select
+          options:
+            "justify": "justify"
+            "nojustify": "nojustify"
+            "hide": "hide"
+            "center": "center"
+            "right": "right"
+          size: small
+        gallery.captions:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_CAPTIONS
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_CAPTIONS_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        gallery.border:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_BORDER
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_BORDER_HELP
+          type: number
+          validate:
+            min: -1
+          size: small
+        gallery.resizeFactor:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_RESIZE_FACTOR
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_RESIZE_FACTOR_HELP
+          type: select
+          default: 2
+          options:
+            1: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_RESIZE_FACTOR_1
+            "1.5": PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_RESIZE_FACTOR_1_5
+            2: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_RESIZE_FACTOR_2
+            "2.5": PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_RESIZE_FACTOR_2_5
+            3: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_RESIZE_FACTOR_3
+          size: medium
+        gallery.removeTitle:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_REMOVE_TITLE
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_REMOVE_TITLE_HELP
+          type: toggle
+          highlight: "false"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+    lightbox:
+      type: section
+      title: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.LIGHTBOX_SETTINGS
+      underline: true
+      fields:
+        lightbox.openEffect:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_OPEN_EFFECT
+          type: select
+          options:
+            "zoom": "zoom"
+            "fade": "fade"
+            "none": "none"
+          size: small
+        lightbox.closeEffect:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_CLOSE_EFFECT
+          type: select
+          options:
+            "zoom": "zoom"
+            "fade": "fade"
+            "none": "none"
+          size: small
+        lightbox.slideEffect:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_SLIDE_EFFECT
+          type: select
+          options:
+            "slide": "slide"
+            "fade": "fade"
+            "zoom": "zoom"
+            "none": "none"
+          size: small
+        lightbox.closeButton:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_CLOSE_BUTTON
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_CLOSE_BUTTON_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        lightbox.touchNavigation:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_TOUCH_NAVIGATION
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_TOUCH_NAVIGATION_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        lightbox.touchFollowAxis:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_TOUCH_FOLLOW_AXIS
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_TOUCH_FOLLOW_AXIS_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        lightbox.keyboardNavigation:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_KEYBOARD_NAVIGATION
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_KEYBOARD_NAVIGATION_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        lightbox.closeOnOutsideClick:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_CLOSE_ON_OUTSIDE_CLICK
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_CLOSE_ON_OUTSIDE_CLICK_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        lightbox.loop:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_LOOP
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_LOOP_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        lightbox.draggable:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DRAGGABLE
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DRAGGABLE_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        lightbox.descEnabled:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DESC_ENABLED
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DESC_ENABLED_HELP
+          type: toggle
+          highlight: "true"
+          options:
+            "true": PLUGIN_ADMIN.ENABLED
+            "false": PLUGIN_ADMIN.DISABLED
+        lightbox.descPosition:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DESC_POSITION
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DESC_POSITION_HELP
+          type: select
+          options:
+            "bottom": "bottom"
+            "top": "top"
+            "left": "left"
+            "right": "right"
+          size: small
+        lightbox.descMoreText:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DESC_MORE_TEXT
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DESC_MORE_TEXT_HELP
+          type: text
+          size: small
+        lightbox.descMoreLength:
+          label: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DESC_MORE_LENGTH
+          help: PLUGIN_SHORTCODE_GALLERY_PLUSPLUS.DEFAULT_DESC_MORE_LENGTH_HELP
+          type: number
+          validate:
+            min: 0
+          size: small

plugins/shortcode-gallery-plusplus/languages.yaml

@@ -0,0 +1,74 @@
+en:
+  PLUGIN_SHORTCODE_GALLERY_PLUSPLUS:
+
+    # Justified Gallery
+    GALLERY_SETTINGS: "Gallery Settings"
+
+    DEFAULT_ROW_HEIGHT: "Row height"
+    DEFAULT_ROW_HEIGHT_HELP: "The preferred rows height in pixel."
+
+    DEFAULT_MARGINS: "Margin size"
+    DEFAULT_MARGINS_HELP: "Decide the margins between the images in pixel"
+
+    DEFAULT_LAST_ROW: "Last row"
+    DEFAULT_LAST_ROW_HELP: "Decide to justify the last row ('justify') or not ('nojustify'), or to hide the row if it can't be justified (using 'hide'). Using 'nojustify', the last row images are aligned to the left, but they can be also aligned to the center (using 'center') or to the right (using 'right')."
+
+    DEFAULT_CAPTIONS: "Captions"
+    DEFAULT_CAPTIONS_HELP: "Decide if you want to show the captions that appears when your mouse is over the image."
+
+    DEFAULT_BORDER: "Border size"
+    DEFAULT_BORDER_HELP: "Decide the border size of the gallery. Use '-1' to set the border the same size as the margins."
+
+    DEFAULT_RESIZE_FACTOR: "Thumbnail size"
+    DEFAULT_RESIZE_FACTOR_HELP: "The height of the image thumbnails. Will be the row height multiplied by this value."
+    DEFAULT_RESIZE_FACTOR_1: "Row height × 1"
+    DEFAULT_RESIZE_FACTOR_1_5: "Row height × 1.5"
+    DEFAULT_RESIZE_FACTOR_2: "Row height × 2"
+    DEFAULT_RESIZE_FACTOR_2_5: "Row height × 2.5"
+    DEFAULT_RESIZE_FACTOR_3: "Row height × 3"
+
+    DEFAULT_REMOVE_TITLE: "Remove title attribute"
+    DEFAULT_REMOVE_TITLE_HELP: "Remove the title attribute from images elements."
+
+    # GLightbox
+    LIGHTBOX_SETTINGS: "Lightbox Settings"
+
+    DEFAULT_OPEN_EFFECT: "Open effect"
+
+    DEFAULT_CLOSE_EFFECT: "Close effect"
+
+    DEFAULT_SLIDE_EFFECT: "Slide effect"
+
+    DEFAULT_CLOSE_BUTTON: "Close button"
+    DEFAULT_CLOSE_BUTTON_HELP: "Show or hide the close button."
+
+    DEFAULT_TOUCH_NAVIGATION: "Touch navigation"
+    DEFAULT_TOUCH_NAVIGATION_HELP: "Enable or disable the touch navigation (swipe)."
+
+    DEFAULT_TOUCH_FOLLOW_AXIS: "Touch follow axis"
+    DEFAULT_TOUCH_FOLLOW_AXIS_HELP: "Image follow axis when dragging on mobile."
+
+    DEFAULT_KEYBOARD_NAVIGATION: "Keyboard navigation"
+    DEFAULT_KEYBOARD_NAVIGATION_HELP: "Enable or disable the keyboard navigation."
+
+    DEFAULT_CLOSE_ON_OUTSIDE_CLICK: "Close on outside click"
+    DEFAULT_CLOSE_ON_OUTSIDE_CLICK_HELP: "Close the lightbox when clicking outside the active slide."
+
+    DEFAULT_LOOP: "Loop"
+    DEFAULT_LOOP_HELP: "Loop slides on end."
+
+    DEFAULT_DRAGGABLE: "Draggable"
+    DEFAULT_DRAGGABLE_HELP: "Enable or disable mouse drag to go prev and next slide."
+
+    DEFAULT_DESC_ENABLED: "Show description"
+    DEFAULT_DESC_ENABLED_HELP: "The 'alt' text will be used as description."
+
+    DEFAULT_DESC_POSITION: "Description position"
+    DEFAULT_DESC_POSITION_HELP: "Position for slides description."
+
+    DEFAULT_DESC_MORE_TEXT: 'Description: "See more" text'
+    DEFAULT_DESC_MORE_TEXT_HELP: "The text which indicates there is more description text. Used on small layout (mobile devices)."
+
+    DEFAULT_DESC_MORE_LENGTH: 'Description: Characters until "See more"'
+    DEFAULT_DESC_MORE_LENGTH_HELP: "Number of characters to display on the description before adding the 'See more' link. If set to 0 it will display the entire description."
+    

plugins/shortcode-gallery-plusplus/shortcode-gallery-plusplus.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace Grav\Plugin;
+
+use Grav\Common\Plugin;
+use RocketTheme\Toolbox\Event\Event;
+use Grav\Common\Page\Page;
+
+/**
+ * Class ShortcodeGalleryPlusPlus
+ * @package Grav\Plugin
+ */
+class ShortcodeGalleryPlusPlusPlugin extends Plugin
+{
+    private $currentPage = null;
+
+    /**
+     * @return array
+     *
+     * The getSubscribedEvents() gives the core a list of events
+     *     that the plugin wants to listen to. The key of each
+     *     array section is the event that the plugin listens to
+     *     and the value (in the form of an array) contains the
+     *     callable (or function) as well as the priority. The
+     *     higher the number the higher the priority.
+     */
+    public static function getSubscribedEvents(): array
+    {
+        return [
+            'onShortcodeHandlers' => ['onShortcodeHandlers', 0],
+            'onTwigTemplatePaths' => ['onTwigTemplatePaths', 0],
+            'onPageContentRaw' => ['onPageContentRaw', 1000],             // before the Shortcode Core plugin
+            'onPageContentProcessed' => ['onPageContentProcessed', 1000], // before the Shortcode Core plugin
+        ];
+    }
+
+    /**
+     * Add current directory to twig lookup paths.
+     */
+    public function onTwigTemplatePaths()
+    {
+        $this->grav['twig']->twig_paths[] = __DIR__ . '/templates';
+    }
+
+    /**
+     * Detect which page is being processed, even if it is in a collection.
+     * We store it so that our shortcode can use it.
+     */
+    public function onPageContentRaw(Event $event)
+    {
+        $this->currentPage = $event['page'];
+    }
+    public function onPageContentProcessed(Event $event)
+    {
+        $this->currentPage = $event['page'];
+    }
+    public function getCurrentPage()
+    {
+        return $this->currentPage;
+    }
+
+    /**
+     * Initialize configuration
+     */
+    public function onShortcodeHandlers()
+    {
+        $this->grav['shortcode']->registerAllShortcodes(__DIR__ . '/shortcodes');
+    }
+}

plugins/shortcode-gallery-plusplus/shortcode-gallery-plusplus.yaml

@@ -0,0 +1,24 @@
+enabled: true
+gallery:
+  rowHeight: 200
+  margins: 3
+  lastRow: nojustify
+  captions: "false"
+  border: 0
+  resizeFactor: 2
+  removeTitle: "false"
+lightbox:
+  openEffect: zoom
+  closeEffect: zoom
+  slideEffect: slide
+  closeButton: "true"
+  touchNavigation: "true"
+  touchFollowAxis: "true"
+  keyboardNavigation: "true"
+  closeOnOutsideClick: "true"
+  loop: "false"
+  draggable: "true"
+  descEnabled: "false"
+  descPosition: bottom
+  descMoreText: "See more"
+  descMoreLength: 60

plugins/shortcode-gallery-plusplus/shortcodes/GalleryPlusPlusShortcode.php

@@ -0,0 +1,182 @@
+<?php
+
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class GalleryPlusPlusShortcode extends Shortcode
+{
+
+    /*
+     *
+     */
+    public function init()
+    {
+        // gallery
+        $this->shortcode->getHandlers()->add('gallery', function (ShortcodeInterface $shortcode) {
+            // get default settings
+            $pluginConfig = $this->config->get('plugins.shortcode-gallery-plusplus');
+
+
+            // get the current page in process (i.e. the page where the shortcode is being processed)
+            // warning, it can be different from $this->grav['page'], if ever we browse a collection
+            // this is exactly what the Feed plugin does
+            $currentPage = $this->grav['plugins']->getPlugin('shortcode-gallery-plusplus')->getCurrentPage();
+
+            // values to check if we are in a feed (RSS, Atom, JSON)
+            $type = $this->grav['uri']->extension(); // Get current page extension
+            $feed_config = $this->grav['config']->get('plugins.feed');
+            $feed_types = array('rss','atom');
+            if ($feed_config && $feed_config['enable_json_feed'])
+                $feed_types[] = 'json';
+
+            // check if the rendered page will be cached or not
+            $renderingCacheDisabled = !is_null($currentPage)
+                                      && isset($currentPage->header()->cache_enable)
+                                      && !$currentPage->header()->cache_enable
+                                      || !$this->grav['config']->get('system.cache.enabled');
+
+            // check if we are in a feed (RSS, Atom, JSON)
+            // we also check that the page will not be cached once rendered (otherwise the gallery will not be generated on the normal page)
+            if ( $renderingCacheDisabled &&                       // if the current page does not cache its rendering
+                 $feed_config && $feed_config['enabled'] &&       // and the Feed plugin is enabled
+                 isset($this->grav['page']->header()->content) && // and the current page has a collection
+                 $feed_types && in_array($type, $feed_types) ) {  // and the Feed plugin handles it
+                return $shortcode->getContent(); // return unprocessed content (because in RSS, Javascripts don't work)
+            }
+
+
+            // overwrite default gallery settings, if set by user
+            $rowHeight = $shortcode->getParameter('rowHeight', $pluginConfig['gallery']['rowHeight']);
+            $margins = $shortcode->getParameter('margins', $pluginConfig['gallery']['margins']);
+            $lastRow = $shortcode->getParameter('lastRow', $pluginConfig['gallery']['lastRow']);
+            $captions = $shortcode->getParameter('captions', $pluginConfig['gallery']['captions']);
+            $border = $shortcode->getParameter('border', $pluginConfig['gallery']['border']);
+            $resizeFactor = $shortcode->getParameter('resizeFactor', $pluginConfig['gallery']['resizeFactor']);
+            $removeTitle = $shortcode->getParameter('removeTitle', $pluginConfig['gallery']['removeTitle']);
+
+            // overwrite default lightbox settings, if set by user
+            $openEffect = $shortcode->getParameter('openEffect', $pluginConfig['lightbox']['openEffect']);
+            $closeEffect = $shortcode->getParameter('closeEffect', $pluginConfig['lightbox']['closeEffect']);
+            $slideEffect = $shortcode->getParameter('slideEffect', $pluginConfig['lightbox']['slideEffect']);
+            $closeButton = $shortcode->getParameter('closeButton', $pluginConfig['lightbox']['closeButton']);
+            $touchNavigation = $shortcode->getParameter('touchNavigation', $pluginConfig['lightbox']['touchNavigation']);
+            $touchFollowAxis = $shortcode->getParameter('touchFollowAxis', $pluginConfig['lightbox']['touchFollowAxis']);
+            $keyboardNavigation = $shortcode->getParameter('keyboardNavigation', $pluginConfig['lightbox']['keyboardNavigation']);
+            $closeOnOutsideClick = $shortcode->getParameter('closeOnOutsideClick', $pluginConfig['lightbox']['closeOnOutsideClick']);
+            $loop = $shortcode->getParameter('loop', $pluginConfig['lightbox']['loop']);
+            $draggable = $shortcode->getParameter('draggable', $pluginConfig['lightbox']['draggable']);
+            $descEnabled = $shortcode->getParameter('descEnabled', $pluginConfig['lightbox']['descEnabled']);
+            $descPosition = $shortcode->getParameter('descPosition', $pluginConfig['lightbox']['descPosition']);
+            $descMoreText = $shortcode->getParameter('descMoreText', $pluginConfig['lightbox']['descMoreText']);
+            $descMoreLength = $shortcode->getParameter('descMoreLength', $pluginConfig['lightbox']['descMoreLength']);
+
+            // find all images, that a gallery contains
+            $content = $shortcode->getContent();
+
+            // check validity
+            if (strpos($content, "<pre>") !== false)
+                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>";
+
+            // remove <p> tags
+            $content = preg_replace('(<p>|</p>)', '', $content);
+            // split up images to arrays of img links
+            preg_match_all('|<img.*?>|', $content, $images);
+
+            $images_final = [];
+            foreach ($images[0] as $image) {
+                // get src attribute
+                preg_match('|src="(.*?)"|', $image, $links);
+
+                // get alt attribute
+                preg_match('|alt="(.*?)"|', $image, $alts);
+
+                // get title attribute - and strip html from it
+                // e.g.:    "<strong>Title 1</strong><br />Example 1<br/>More description<br>Bla bla"
+                // becomes: "Title 1 | Example 1 | More description | Bla bla"
+                preg_match('/title="(.*?)"/', $image, $desc);
+                $title_clean = null;
+                if (!empty($desc)) {
+                    if (!filter_var($removeTitle, FILTER_VALIDATE_BOOLEAN)) {
+                        // replace br tags with " | "
+                        $title_clean = preg_replace('/<br *\/*>/', ' | ', html_entity_decode($desc[1]));
+                        // strip html
+                        $title_clean = strip_tags(html_entity_decode($title_clean));
+                        // set as new title
+                        $image = preg_replace('/title=".*?"/', "title=\"$title_clean\"", $image);
+                    } else {
+                        $image = preg_replace('/title=".*?" /', "", $image);
+                    }
+                } else {
+                    $desc[1] = null;
+                }
+
+                // combine
+                array_push($images_final, [
+                    // full
+                    "image" => $image,
+                    "src" => $links[1],
+                    "alt" => $alts[1],
+                    "title" => $title_clean,
+                    "desc" => $desc[1],
+                    ]);
+            }
+
+            // a random id for each gallery
+            $id = mt_rand();
+
+            // generate inline JS
+            $inline_js = $this->twig->processTemplate(
+                'partials/gallery-plusplus-inlinejs.js.twig', [
+                    'id' => $id,
+                    // gallery settings
+                    'rowHeight' => $rowHeight,
+                    'margins' => $margins,
+                    'lastRow' => $lastRow,
+                    'captions' => $captions,
+                    'border' => $border,
+                    // lightbox settings
+                    'openEffect' => $openEffect,
+                    'closeEffect' => $closeEffect,
+                    'slideEffect' => $slideEffect,
+                    'closeButton' => $closeButton,
+                    'touchNavigation' => $touchNavigation,
+                    'touchFollowAxis' => $touchFollowAxis,
+                    'keyboardNavigation' => $keyboardNavigation,
+                    'closeOnOutsideClick' => $closeOnOutsideClick,
+                    'loop' => $loop,
+                    'draggable' => $draggable,
+                    'descPosition' => $descPosition,
+                    'descMoreText' => $descMoreText,
+                    'descMoreLength' => $descMoreLength,
+                ]
+            );
+
+            // give JS and CSS so that they can be cached
+            $this->shortcode->addAssets('css', 'plugin://shortcode-gallery-plusplus/vendor/glightbox/glightbox.min.css');
+            $this->shortcode->addAssets('css', 'plugin://shortcode-gallery-plusplus/vendor/justified-gallery/justifiedGallery.min.css');
+            $this->shortcode->addAssets('js', ['jquery', 101]);
+            $this->shortcode->addAssets('js', 'plugin://shortcode-gallery-plusplus/vendor/glightbox/glightbox.min.js');
+            $this->shortcode->addAssets('js', 'plugin://shortcode-gallery-plusplus/vendor/justified-gallery/jquery.justifiedGallery.min.js');
+            $this->shortcode->addAssets('inlineJs', [ $inline_js, [ 'group' => 'bottom' ] ] );
+
+            return $this->twig->processTemplate(
+                'partials/gallery-plusplus.html.twig',
+                [
+                    'page' => $this->grav['page'], // used for image resizing
+                    'id' => $id,
+                    // gallery settings
+                    'rowHeight' => $rowHeight,
+                    'resizeFactor' => $resizeFactor,
+                    // lightbox settings
+                    'descEnabled' => $descEnabled,
+                    // images
+                    'images' => $images_final,
+                ]
+            );
+        });
+    }
+
+}

plugins/shortcode-gallery-plusplus/templates/partials/gallery-plusplus-inlinejs.js.twig

@@ -0,0 +1,31 @@
+{# add javascript for gallery and lightbox configuration #}
+$("#{{ id }}").justifiedGallery({
+    rowHeight: {{  rowHeight  }},
+    margins: {{  margins  }},
+    lastRow: "{{  lastRow  }}",
+    captions: {{  captions  }},
+    border: {{  border  }},
+    {#~ use given width and height, don't load "src" attribute #}
+    waitThumbnailsLoad: false,
+    thumbnailPath: function (currentPath, width, height, image) {
+        {#~ don't try to reload image from "src" #}
+        return image.currentSrc;
+    },
+});
+
+GLightbox({
+    selector: ".glightbox-{{ id }}",
+    openEffect: "{{ openEffect }}",
+    closeEffect: "{{ closeEffect }}",
+    slideEffect: "{{ slideEffect }}",
+    closeButton: {{ closeButton }},
+    touchNavigation: {{ touchNavigation }},
+    touchFollowAxis: {{ touchFollowAxis }},
+    keyboardNavigation: {{ keyboardNavigation }},
+    closeOnOutsideClick: {{ closeOnOutsideClick }},
+    loop: {{ loop }},
+    draggable: {{ draggable }},
+    descPosition: "{{ descPosition }}",
+    moreText: "{{ descMoreText }}",
+    moreLength: {{ descMoreLength }},
+});

plugins/shortcode-gallery-plusplus/templates/partials/gallery-plusplus.html.twig

@@ -0,0 +1,43 @@
+{# html #}
+<p id="{{ id }}">
+    {%~ for image in images %}
+    <a href="{{ image["src"] }}" class="glightbox-{{ id }}"
+        {#- add description, if enabled #}
+        {%- if descEnabled == "true" %}
+            {{- "" }} data-description="{{ image["desc"]|raw }}"
+        {%- endif %}
+>
+        {#~ try to generate a thumbnail image #}
+        {#- get the full image url              https://mywebsite.com/user/pages/02.gallery/01.landscapes/image01.jpg #}
+        {%- set original_image = image["src"] %}
+        {#- remove the sites url                                     /user/pages/02.gallery/01.landscapes/image01.jpg #}
+        {%- if base_url %}
+            {%- set original_image = original_image|replace({(base_url): ""}) %}
+        {%- endif %}
+        {#- remove "/user/"                                                pages/02.gallery/01.landscapes/image01.jpg #}
+        {#- be careful, a page can be named "user", only replace the first occurence #}
+        {%- set original_image = original_image|split("/user/", 2) %}
+        {#- add "user://"                                           user://pages/02.gallery/01.landscapes/image01.jpg #}
+        {%- set original_image = "user://" ~ original_image[1] %}
+        {#- use the generated url to get the image via grav (can load any image in the /user directory) #}
+        {%- set original_image = page.media[original_image] %}
+        {#- success: can now generate a smaller thumbnail image #}
+        {%- if original_image %}
+        {%- set estimated_thumb_width = ( original_image.width * rowHeight / original_image.height ) | round %}
+        {#- force the use of the first image in srcset (thumbnail) with sizes="1px" #}
+        {#- RSS readers shouldn't use srcset images, otherwise they will display something similar to JG, but not justified #}
+        {#- width and height to avoid Justified Gallery loading the image from "src" attribute #}
+        {{ original_image
+            .derivatives( [ ( estimated_thumb_width * resizeFactor ) | round ] )
+            .sizes( "1px" )
+            .width( estimated_thumb_width )
+            .height( rowHeight )
+            .loading.html(image.title, image.alt)|raw }}
+        {#~ couldn't find the image inside grav, so just use the original url #}
+        {%- else %}
+        {{ image["image"]|raw }}
+        {{- "\n" }}
+        {%- endif %}
+    </a>
+    {%~ endfor %}
+</p>

plugins/shortcode-gallery-plusplus/vendor/glightbox/glightbox.css

@@ -0,0 +1,939 @@
+.glightbox-container {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999999 !important;
+  overflow: hidden;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  outline: none;
+}
+
+.glightbox-container.inactive {
+  display: none;
+}
+
+.glightbox-container .gcontainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.glightbox-container .gslider {
+  -webkit-transition: -webkit-transform 0.4s ease;
+  transition: -webkit-transform 0.4s ease;
+  transition: transform 0.4s ease;
+  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.glightbox-container .gslide {
+  width: 100%;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  opacity: 0;
+}
+
+.glightbox-container .gslide.current {
+  opacity: 1;
+  z-index: 99999;
+  position: relative;
+}
+
+.glightbox-container .gslide.prev {
+  opacity: 1;
+  z-index: 9999;
+}
+
+.glightbox-container .gslide-inner-content {
+  width: 100%;
+}
+
+.glightbox-container .ginner-container {
+  position: relative;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-width: 100%;
+  margin: auto;
+  height: 100vh;
+}
+
+.glightbox-container .ginner-container.gvideo-container {
+  width: 100%;
+}
+
+.glightbox-container .ginner-container.desc-bottom,
+        .glightbox-container .ginner-container.desc-top {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.glightbox-container .ginner-container.desc-left,
+        .glightbox-container .ginner-container.desc-right {
+  max-width: 100% !important;
+}
+
+.gslide iframe,
+    .gslide video {
+  outline: none !important;
+  border: none;
+  min-height: 165px;
+  -webkit-overflow-scrolling: touch;
+  -ms-touch-action: auto;
+  touch-action: auto;
+}
+
+.gslide:not(.current) {
+  pointer-events: none;
+}
+
+.gslide-image {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.gslide-image img {
+  max-height: 100vh;
+  display: block;
+  padding: 0;
+  float: none;
+  outline: none;
+  border: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  max-width: 100vw;
+  width: auto;
+  height: auto;
+  -o-object-fit: cover;
+  object-fit: cover;
+  -ms-touch-action: none;
+  touch-action: none;
+  margin: auto;
+  min-width: 200px;
+}
+
+.desc-top .gslide-image img,
+        .desc-bottom .gslide-image img {
+  width: auto;
+}
+
+.desc-left .gslide-image img,
+        .desc-right .gslide-image img {
+  width: auto;
+  max-width: 100%;
+}
+
+.gslide-image img.zoomable {
+  position: relative;
+}
+
+.gslide-image img.dragging {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+  -webkit-transition: none;
+  transition: none;
+}
+
+.gslide-video {
+  position: relative;
+  max-width: 100vh;
+  width: 100% !important;
+}
+
+.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
+  display: none;
+}
+
+.gslide-video .gvideo-wrapper {
+  width: 100%;
+        /* max-width: 160vmin; */
+  margin: auto;
+}
+
+.gslide-video::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 0, 0, 0.34);
+  display: none;
+}
+
+.gslide-video.playing::before {
+  display: none;
+}
+
+.gslide-video.fullscreen {
+  max-width: 100% !important;
+  min-width: 100%;
+  height: 75vh;
+}
+
+.gslide-video.fullscreen video {
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+.gslide-inline {
+  background: #fff;
+  text-align: left;
+  max-height: calc(100vh - 40px);
+  overflow: auto;
+  max-width: 100%;
+  margin: auto;
+}
+
+.gslide-inline .ginlined-content {
+  padding: 20px;
+  width: 100%;
+}
+
+.gslide-inline .dragging {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+  -webkit-transition: none;
+  transition: none;
+}
+
+.ginlined-content {
+  overflow: auto;
+  display: block !important;
+  opacity: 1;
+}
+
+.gslide-external {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  min-width: 100%;
+  background: #fff;
+  padding: 0;
+  overflow: auto;
+  max-height: 75vh;
+  height: 100%;
+}
+
+.gslide-media {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+}
+
+.zoomed .gslide-media {
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+.desc-top .gslide-media,
+    .desc-bottom .gslide-media {
+  margin: 0 auto;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.gslide-description {
+  position: relative;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 100%;
+  flex: 1 0 100%;
+}
+
+.gslide-description.description-left,
+    .gslide-description.description-right {
+  max-width: 100%;
+}
+
+.gslide-description.description-bottom,
+    .gslide-description.description-top {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.gslide-description p {
+  margin-bottom: 12px;
+}
+
+.gslide-description p:last-child {
+  margin-bottom: 0;
+}
+
+.zoomed .gslide-description {
+  display: none;
+}
+
+.glightbox-button-hidden {
+  display: none;
+}
+
+
+/*
+ * Description for mobiles
+ * something like facebook does the description
+ * for the photos
+*/
+
+.glightbox-mobile .glightbox-container .gslide-description {
+  height: auto !important;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  padding: 19px 11px;
+  max-width: 100vw !important;
+  -webkit-box-ordinal-group: 3 !important;
+  -ms-flex-order: 2 !important;
+  order: 2 !important;
+  max-height: 78vh;
+  overflow: auto !important;
+  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
+  -webkit-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear;
+  padding-bottom: 50px;
+}
+
+.glightbox-mobile .glightbox-container .gslide-title {
+  color: #fff;
+  font-size: 1em;
+}
+
+.glightbox-mobile .glightbox-container .gslide-desc {
+  color: #a1a1a1;
+}
+
+.glightbox-mobile .glightbox-container .gslide-desc a {
+  color: #fff;
+  font-weight: bold;
+}
+
+.glightbox-mobile .glightbox-container .gslide-desc * {
+  color: inherit;
+}
+
+.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
+  color: #fff;
+  opacity: 0.4;
+}
+
+.gdesc-open .gslide-media {
+  -webkit-transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease;
+  opacity: 0.4;
+}
+
+.gdesc-open .gdesc-inner {
+  padding-bottom: 30px;
+}
+
+.gdesc-closed .gslide-media {
+  -webkit-transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease;
+  opacity: 1;
+}
+
+.greset {
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.gabsolute {
+  position: absolute;
+}
+
+.grelative {
+  position: relative;
+}
+
+.glightbox-desc {
+  display: none !important;
+}
+
+.glightbox-open {
+  overflow: hidden;
+}
+
+.gloader {
+  height: 25px;
+  width: 25px;
+  -webkit-animation: lightboxLoader 0.8s infinite linear;
+  animation: lightboxLoader 0.8s infinite linear;
+  border: 2px solid #fff;
+  border-right-color: transparent;
+  border-radius: 50%;
+  position: absolute;
+  display: block;
+  z-index: 9999;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  top: 47%;
+}
+
+.goverlay {
+  width: 100%;
+  height: calc(100vh + 1px);
+  position: fixed;
+  top: -1px;
+  left: 0;
+  background: #000;
+  will-change: opacity;
+}
+
+.glightbox-mobile .goverlay {
+  background: #000;
+}
+
+.gprev,
+.gnext,
+.gclose {
+  z-index: 99999;
+  cursor: pointer;
+  width: 26px;
+  height: 44px;
+  border: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.gprev svg,
+.gnext svg,
+.gclose svg {
+  display: block;
+  width: 25px;
+  height: auto;
+  margin: 0;
+  padding: 0;
+}
+
+.gprev.disabled,
+.gnext.disabled,
+.gclose.disabled {
+  opacity: 0.1;
+}
+
+.gprev .garrow,
+.gnext .garrow,
+.gclose .garrow {
+  stroke: #fff;
+}
+
+.gbtn.focused {
+  outline: 2px solid #0f3d81;
+}
+
+iframe.wait-autoplay {
+  opacity: 0;
+}
+
+.glightbox-closing .gnext,
+    .glightbox-closing .gprev,
+    .glightbox-closing .gclose {
+  opacity: 0 !important;
+}
+
+
+/*Skin */
+
+.glightbox-clean .gslide-description {
+  background: #fff;
+}
+
+.glightbox-clean .gdesc-inner {
+  padding: 22px 20px;
+}
+
+.glightbox-clean .gslide-title {
+  font-size: 1em;
+  font-weight: normal;
+  font-family: arial;
+  color: #000;
+  margin-bottom: 19px;
+  line-height: 1.4em;
+}
+
+.glightbox-clean .gslide-desc {
+  font-size: 0.86em;
+  margin-bottom: 0;
+  font-family: arial;
+  line-height: 1.4em;
+}
+
+.glightbox-clean .gslide-video {
+  background: #000;
+}
+
+.glightbox-clean .gprev,
+    .glightbox-clean .gnext,
+    .glightbox-clean .gclose {
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 4px;
+}
+
+.glightbox-clean .gprev path,
+.glightbox-clean .gnext path,
+.glightbox-clean .gclose path {
+  fill: #fff;
+}
+
+.glightbox-clean .gprev {
+  position: absolute;
+  top: -100%;
+  left: 30px;
+  width: 40px;
+  height: 50px;
+}
+
+.glightbox-clean .gnext {
+  position: absolute;
+  top: -100%;
+  right: 30px;
+  width: 40px;
+  height: 50px;
+}
+
+.glightbox-clean .gclose {
+  width: 35px;
+  height: 35px;
+  top: 15px;
+  right: 10px;
+  position: absolute;
+}
+
+.glightbox-clean .gclose svg {
+  width: 18px;
+  height: auto;
+}
+
+.glightbox-clean .gclose:hover {
+  opacity: 1;
+}
+
+
+/*CSS Animations*/
+
+.gfadeIn {
+  -webkit-animation: gfadeIn 0.5s ease;
+  animation: gfadeIn 0.5s ease;
+}
+
+.gfadeOut {
+  -webkit-animation: gfadeOut 0.5s ease;
+  animation: gfadeOut 0.5s ease;
+}
+
+.gslideOutLeft {
+  -webkit-animation: gslideOutLeft 0.3s ease;
+  animation: gslideOutLeft 0.3s ease;
+}
+
+.gslideInLeft {
+  -webkit-animation: gslideInLeft 0.3s ease;
+  animation: gslideInLeft 0.3s ease;
+}
+
+.gslideOutRight {
+  -webkit-animation: gslideOutRight 0.3s ease;
+  animation: gslideOutRight 0.3s ease;
+}
+
+.gslideInRight {
+  -webkit-animation: gslideInRight 0.3s ease;
+  animation: gslideInRight 0.3s ease;
+}
+
+.gzoomIn {
+  -webkit-animation: gzoomIn 0.5s ease;
+  animation: gzoomIn 0.5s ease;
+}
+
+.gzoomOut {
+  -webkit-animation: gzoomOut 0.5s ease;
+  animation: gzoomOut 0.5s ease;
+}
+
+@-webkit-keyframes lightboxLoader {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lightboxLoader {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes gfadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes gfadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes gfadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes gfadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes gslideInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-60%, 0, 0);
+    transform: translate3d(-60%, 0, 0);
+  }
+  to {
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes gslideInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-60%, 0, 0);
+    transform: translate3d(-60%, 0, 0);
+  }
+  to {
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes gslideOutLeft {
+  from {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(-60%, 0, 0);
+    transform: translate3d(-60%, 0, 0);
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes gslideOutLeft {
+  from {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(-60%, 0, 0);
+    transform: translate3d(-60%, 0, 0);
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@-webkit-keyframes gslideInRight {
+  from {
+    opacity: 0;
+    visibility: visible;
+    -webkit-transform: translate3d(60%, 0, 0);
+    transform: translate3d(60%, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes gslideInRight {
+  from {
+    opacity: 0;
+    visibility: visible;
+    -webkit-transform: translate3d(60%, 0, 0);
+    transform: translate3d(60%, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes gslideOutRight {
+  from {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(60%, 0, 0);
+    transform: translate3d(60%, 0, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes gslideOutRight {
+  from {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(60%, 0, 0);
+    transform: translate3d(60%, 0, 0);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes gzoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes gzoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes gzoomOut {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes gzoomOut {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (min-width: 769px) {
+  .glightbox-container .ginner-container {
+    width: auto;
+    height: auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+  .glightbox-container .ginner-container.desc-top .gslide-description {
+    -webkit-box-ordinal-group: 1;
+    -ms-flex-order: 0;
+    order: 0;
+  }
+  .glightbox-container .ginner-container.desc-top .gslide-image,
+                .glightbox-container .ginner-container.desc-top .gslide-image img {
+    -webkit-box-ordinal-group: 2;
+    -ms-flex-order: 1;
+    order: 1;
+  }
+  .glightbox-container .ginner-container.desc-left .gslide-description {
+    -webkit-box-ordinal-group: 1;
+    -ms-flex-order: 0;
+    order: 0;
+  }
+  .glightbox-container .ginner-container.desc-left .gslide-image {
+    -webkit-box-ordinal-group: 2;
+    -ms-flex-order: 1;
+    order: 1;
+  }
+  .gslide-image img {
+    max-height: 97vh;
+    max-width: 100%;
+  }
+  .gslide-image img.zoomable {
+    cursor: -webkit-zoom-in;
+    cursor: zoom-in;
+  }
+  .zoomed .gslide-image img.zoomable {
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+  .gslide-inline {
+    max-height: 95vh;
+  }
+  .gslide-external {
+    max-height: 100vh;
+  }
+  .gslide-description.description-left,
+    .gslide-description.description-right {
+    max-width: 275px;
+  }
+  .glightbox-open {
+    height: auto;
+  }
+  .goverlay {
+    background: rgba(0, 0, 0, 0.92);
+  }
+  .glightbox-clean .gslide-media {
+    -webkit-box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
+    box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
+  }
+  .glightbox-clean .description-left .gdesc-inner,
+.glightbox-clean .description-right .gdesc-inner {
+    position: absolute;
+    height: 100%;
+    overflow-y: auto;
+  }
+  .glightbox-clean .gprev,
+    .glightbox-clean .gnext,
+    .glightbox-clean .gclose {
+    background-color: rgba(0, 0, 0, 0.32);
+  }
+  .glightbox-clean .gprev:hover,
+.glightbox-clean .gnext:hover,
+.glightbox-clean .gclose:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+  .glightbox-clean .gprev {
+    top: 45%;
+  }
+  .glightbox-clean .gnext {
+    top: 45%;
+  }
+}
+
+@media (min-width: 992px) {
+  .glightbox-clean .gclose {
+    opacity: 0.7;
+    right: 20px;
+  }
+}
+
+@media screen and (max-height: 420px) {
+  .goverlay {
+    background: #000;
+  }
+}

plugins/shortcode-gallery-plusplus/vendor/glightbox/license.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Biati Digital https://www.biati.digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

plugins/shortcode-gallery-plusplus/vendor/justified-gallery/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2020 Miro Mannino
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

plugins/shortcode-gallery-plusplus/vendor/justified-gallery/justifiedGallery.css

@@ -0,0 +1,110 @@
+/*!
+ * justifiedGallery - v3.8.1
+ * http://miromannino.github.io/Justified-Gallery/
+ * Copyright (c) 2020 Miro Mannino
+ * Licensed under the MIT license.
+ */
+.justified-gallery {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.justified-gallery > a,
+.justified-gallery > div,
+.justified-gallery > figure {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
+  filter: "alpha(opacity=10)";
+  opacity: 0.1;
+  margin: 0;
+  padding: 0;
+}
+.justified-gallery > a > img,
+.justified-gallery > div > img,
+.justified-gallery > figure > img,
+.justified-gallery > a > a > img,
+.justified-gallery > div > a > img,
+.justified-gallery > figure > a > img,
+.justified-gallery > a > svg,
+.justified-gallery > div > svg,
+.justified-gallery > figure > svg,
+.justified-gallery > a > a > svg,
+.justified-gallery > div > a > svg,
+.justified-gallery > figure > a > svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+}
+.justified-gallery > a > .jg-caption,
+.justified-gallery > div > .jg-caption,
+.justified-gallery > figure > .jg-caption {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  padding: 5px;
+  background-color: #000000;
+  left: 0;
+  right: 0;
+  margin: 0;
+  color: white;
+  font-size: 12px;
+  font-weight: 300;
+  font-family: sans-serif;
+}
+.justified-gallery > a > .jg-caption.jg-caption-visible,
+.justified-gallery > div > .jg-caption.jg-caption-visible,
+.justified-gallery > figure > .jg-caption.jg-caption-visible {
+  display: initial;
+  filter: "alpha(opacity=70)";
+  opacity: 0.7;
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  -o-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
+}
+.justified-gallery > .jg-entry-visible {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  background: none;
+}
+.justified-gallery > .jg-entry-visible > img,
+.justified-gallery > .jg-entry-visible > a > img,
+.justified-gallery > .jg-entry-visible > svg,
+.justified-gallery > .jg-entry-visible > a > svg {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  -o-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
+}
+.justified-gallery > .jg-filtered {
+  display: none;
+}
+.justified-gallery > .jg-spinner {
+  position: absolute;
+  bottom: 0;
+  margin-left: -24px;
+  padding: 10px 0 10px 0;
+  left: 50%;
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  overflow: initial;
+}
+.justified-gallery > .jg-spinner > span {
+  display: inline-block;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+  width: 8px;
+  height: 8px;
+  margin: 0 4px 0 4px;
+  background-color: #000;
+  border-radius: 6px;
+}

plugins/shortcode-gallery-plusplus/vendor/justified-gallery/justifiedGallery.min.css

@@ -0,0 +1,110 @@
+/*!
+ * justifiedGallery - v3.8.1
+ * http://miromannino.github.io/Justified-Gallery/
+ * Copyright (c) 2020 Miro Mannino
+ * Licensed under the MIT license.
+ */
+.justified-gallery {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.justified-gallery > a,
+.justified-gallery > div,
+.justified-gallery > figure {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
+  filter: "alpha(opacity=10)";
+  opacity: 0.1;
+  margin: 0;
+  padding: 0;
+}
+.justified-gallery > a > img,
+.justified-gallery > div > img,
+.justified-gallery > figure > img,
+.justified-gallery > a > a > img,
+.justified-gallery > div > a > img,
+.justified-gallery > figure > a > img,
+.justified-gallery > a > svg,
+.justified-gallery > div > svg,
+.justified-gallery > figure > svg,
+.justified-gallery > a > a > svg,
+.justified-gallery > div > a > svg,
+.justified-gallery > figure > a > svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+}
+.justified-gallery > a > .jg-caption,
+.justified-gallery > div > .jg-caption,
+.justified-gallery > figure > .jg-caption {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  padding: 5px;
+  background-color: #000000;
+  left: 0;
+  right: 0;
+  margin: 0;
+  color: white;
+  font-size: 12px;
+  font-weight: 300;
+  font-family: sans-serif;
+}
+.justified-gallery > a > .jg-caption.jg-caption-visible,
+.justified-gallery > div > .jg-caption.jg-caption-visible,
+.justified-gallery > figure > .jg-caption.jg-caption-visible {
+  display: initial;
+  filter: "alpha(opacity=70)";
+  opacity: 0.7;
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  -o-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
+}
+.justified-gallery > .jg-entry-visible {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  background: none;
+}
+.justified-gallery > .jg-entry-visible > img,
+.justified-gallery > .jg-entry-visible > a > img,
+.justified-gallery > .jg-entry-visible > svg,
+.justified-gallery > .jg-entry-visible > a > svg {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  -o-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
+}
+.justified-gallery > .jg-filtered {
+  display: none;
+}
+.justified-gallery > .jg-spinner {
+  position: absolute;
+  bottom: 0;
+  margin-left: -24px;
+  padding: 10px 0 10px 0;
+  left: 50%;
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  overflow: initial;
+}
+.justified-gallery > .jg-spinner > span {
+  display: inline-block;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+  width: 8px;
+  height: 8px;
+  margin: 0 4px 0 4px;
+  background-color: #000;
+  border-radius: 6px;
+}