Inspired by GLightbox, a lovely image Hugo plugin created by @jsonbecker, Justified Swipebox is a plugin for Micro.blog to easily allow the creation of "clickable" image galleries on posts and pages. It depends on the Justified Gallery to create the initial gallery on the post/page and Swipebox to show the image(s) at a larger resolution when an item in the gallery is clicked / touched. This plugin wouldn't exist without either of those projects, as it's just combining the two of them to work properly in the Micro.blog plugin system. 👏🏻
Note: The markdown preview in the Micro.blog plugin-in system doesn't seem to handle multi-line code blocks or tables. It is advisable view this document on Github or in a dedicated Markdown viewer.
The plugin supplies two shortcodes, one for each image and one to call the required JavaScript (justified-swipebox-entry and justified-swipebox-gallery); essentially it's one to many justified-swipebox-entry shortcodes and justified-swipebox-gallery (per gallery).
The following code...
<div id="gardenGlow2023" class="justified-gallery">
{{< justified-swipebox-entry photo="https://lostinhaste.com/uploads/2023/garden-glow-01-full.jpg" >}}
{{< justified-swipebox-entry photo="https://lostinhaste.com/uploads/2023/garden-glow-02-full.jpg" >}}
{{< justified-swipebox-entry photo="https://lostinhaste.com/uploads/2023/garden-glow-03-full.jpg" >}}
{{< justified-swipebox-entry photo="https://lostinhaste.com/uploads/2023/garden-glow-04-full.jpg" >}}
<div>
{{< justified-swipebox-gallery id="gardenGlow2023" rowHeight="200" >}}...will result in something like this (depending on the template / theme you're using):
Each gallery should be wrapped in a div with a class of "justified-gallery". Multiple galleries are possible per page but the id of the holding div needs to match the gallery for each justified-swipebox-entry shortcode along with the the id justified-swipebox-gallery shortcode.
There appears to be some bug somewhere in the Micro.blog system, preventing this plugin from working properly if extra lines (carriage returns, for those of us old enough to remember that term) are contained within the div, the plugin will not work properly. Even if there is a line break between the div (the one containing the "justified-gallery" class) and the first justified-swipebox-entry entry, the plugin might fail.
Below are a list of the various parameters the Plugin can use when generating HTML, broken down by shortcode.
| Parameter | Required | Description |
|---|---|---|
photo |
Yes | Link to the image. |
thumbnail |
No | Link to a thumbnail version of the image, for faster loading. |
title |
No | Text that is shown when the full resolution of an image is shown. |
alt |
No | Alternative text to be included in the generated img tag. |
gallery |
No | Required if multiple galleries are to be loaded, it should match the id of the holding div and the id justified-swipebox-gallery shortcode. |
| Parameter | Required | Description |
|---|---|---|
id |
Yes | CSS selector to the div containing the justified-swipebox-entry entries. |
margin |
No | Defaults to 3, it is the margin (in pixels) between images in the gallery |
showCaptionsOnHover |
No | Defaults to false, if true, when a user hovers over an image in the gallery, the title / alt text will be shown. |
| Version | Date | Description |
|---|---|---|
| 1.0.2 | January 12, 2024 | Adding text to the Micro.blog description so the Plugin is picked up in the Photos section in the Micro.blog plugin system. |
| 1.0.1 | January 12, 2024 | Updating the Read Me file: more credit to the supporting libraries, added a note about viewing the Read Me file, and added a warning about spacing issues. |
| 1.0.0 | December 15, 2023 | The initial release of the project. |