https://github.com/jsonbecker/plugin-glightbox
A Glightbox plugin for Micro.blog that can be used by other Hugo sites
https://github.com/jsonbecker/plugin-glightbox
Last synced: 12 months ago
JSON representation
A Glightbox plugin for Micro.blog that can be used by other Hugo sites
- Host: GitHub
- URL: https://github.com/jsonbecker/plugin-glightbox
- Owner: jsonbecker
- License: mit
- Created: 2020-07-10T15:16:32.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-02-22T17:39:11.000Z (over 1 year ago)
- Last Synced: 2025-04-10T15:45:33.120Z (about 1 year ago)
- Language: HTML
- Size: 29.3 KB
- Stars: 12
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: NEWS.md
- License: LICENSE
Awesome Lists containing this project
README
# plugin-glightbox
A Glightbox plugin for Micro.blog that can be used by other Hugo sites
## Description
[GLightbox](https://biati-digital.github.io/glightbox/) is a great, simple image gallery plugin. It provides an attractive way to show zoomed in versions of your photos when clicking on them, including the ability to have titles, captions, and arrow key/touch navigatable galleries.
This plugin provides a [Hugo shortcode](https://gohugo.io/content-management/shortcodes/) for your Micro.blog (this can be easily used with other Hugo blogs as well) that makes it easy to add these galleries/lightboxes to your site.
## Usage
### Markdown
As of version 3.0, you can now use Markdown's native image syntax like `` to have a single image use `glightbox`. This should increase compatibility with micro.blog since I believe markdown renders occur prior to shortcode expansion, improving compatiblity with both newsletters and the Photos page. It's also just convenient.
### Shortcode for More flexibility
Using shortcodes are easy. They have a special delimiter, but otherwise, look a lot like HTML. The simplest version of GLightbox works like this:
```html
{{< glightbox src="path-to-image" >}}
```
This will display the image at the URL in `src`. That image will be clickable and will expand in a lightbox.
Adding important accessiblity functions like alt text is as easy as adding an `alt` parameter:
```html
{{< glightbox src="path-to-image" alt="My alt text here" >}}
```
Other optional parameters include:
- `title`, which will show up when you click to expand
- `description`, which will appear below the title (or just below the image if there is no title) upon expansion
- ~`thumb`, another image URL which will be used as a thumbnail in the non-expanded version on your page. This is especially helpful if your post will have many images.~
- `gallery`, which is a name you want to give to an image gallery. To have a navigatable image gallery, you must provide the same text to gallery for all the images that are to be grouped together. It's important this name is somewhat unique, because it's quite possible you'll have multiple galleries on the same page on site indexes or archives, and you'll want to make sure you don't use something like `"gallery1"` in all your posts that puts them all in the same gallery on under these conditions. When using a gallery, your photos will all be presented as 260px wide thumbnails produced by Micro.blog's API for photo resizing. This will reduce page load times on pages with many images, as galleries may have.
## Extras
I have included a small snippet of CSS for anything with the class `img-gallery` that will provide a grid-of-images if you surround your `glightbox` entries with a div of that class.
On my own site, you can see an example on [this blog post.](https://json.blog/2020/01/01/the-first-ten.html)
Here's the code for that first gallery that is in the content of my post:
```html
{{}}
{{}}
{{}}
{{}}
{{}}
```