{"id":17153099,"url":"https://github.com/jsonbecker/plugin-glightbox","last_synced_at":"2025-07-01T23:03:51.129Z","repository":{"id":47099099,"uuid":"278666536","full_name":"jsonbecker/plugin-glightbox","owner":"jsonbecker","description":"A Glightbox plugin for Micro.blog that can be used by other Hugo sites","archived":false,"fork":false,"pushed_at":"2025-02-22T17:39:11.000Z","size":30,"stargazers_count":12,"open_issues_count":1,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-10T15:45:33.120Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsonbecker.png","metadata":{"files":{"readme":"README.md","changelog":"NEWS.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-10T15:16:32.000Z","updated_at":"2025-03-16T21:03:20.000Z","dependencies_parsed_at":"2024-12-16T16:25:38.013Z","dependency_job_id":"012b91b9-edc1-4b48-9fc9-a3bd72f203ea","html_url":"https://github.com/jsonbecker/plugin-glightbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jsonbecker/plugin-glightbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonbecker%2Fplugin-glightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonbecker%2Fplugin-glightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonbecker%2Fplugin-glightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonbecker%2Fplugin-glightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsonbecker","download_url":"https://codeload.github.com/jsonbecker/plugin-glightbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonbecker%2Fplugin-glightbox/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263047658,"owners_count":23405280,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T21:45:14.870Z","updated_at":"2025-07-01T23:03:51.077Z","avatar_url":"https://github.com/jsonbecker.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# plugin-glightbox\nA Glightbox plugin for Micro.blog that can be used by other Hugo sites\n\n## Description\n[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.\n\nThis 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.\n\n## Usage\n\n### Markdown\n\nAs of version 3.0, you can now use Markdown's native image syntax like `![Alt text](url_to_image.jpg \"Title\")` 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.\n\n### Shortcode for More flexibility\nUsing shortcodes are easy. They have a special delimiter, but otherwise, look a lot like HTML. The simplest version of GLightbox works like this:\n\n```html\n{{\u003c glightbox src=\"path-to-image\" \u003e}}\n```\n\nThis will display the image at the URL in `src`. That image will be clickable and will expand in a lightbox.\n\nAdding important accessiblity functions like alt text is as easy as adding an `alt` parameter:\n\n```html\n{{\u003c glightbox src=\"path-to-image\" alt=\"My alt text here\" \u003e}}\n```\n\nOther optional parameters include:\n\n- `title`, which will show up when you click to expand\n- `description`, which will appear below the title (or just below the image if there is no title) upon expansion\n- ~`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.~\n- `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.\n\n## Extras\n\nI 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.\n\nOn my own site, you can see an example on [this blog post.](https://json.blog/2020/01/01/the-first-ten.html)\n\nHere's the code for that first gallery that is in the content of my post:\n\n```html\n\u003cdiv class=\"img-gallery\"\u003e\n  {{\u003cglightbox src=\"https://www.json.blog/img/2010-01-30_20-24-32.jpg\" thumb=\"https://www.json.blog/img/2010-01-30_20-24-32_thumb.jpg\" gallery=\"2010\" title=\"Elsa and I Being Playful \" description=\"This is one of the first pictures I have of Elsa and I together. \" \u003e}}\n  {{\u003cglightbox src=\"https://www.json.blog/img/2010-04-30_10-37-48.jpg\" thumb=\"https://www.json.blog/img/2010-04-30_10-37-48_thumb.jpg\" gallery=\"2010\" title=\"Elsa, Sinnjinn, and I at Trinity Brewhouse \" \u003e}}\n  {{\u003cglightbox src=\"https://www.json.blog/img/2010-06-23_14-06-32.jpg\" thumb=\"https://www.json.blog/img/2010-06-23_14-06-32_thumb.jpg\" gallery=\"2010\" title=\"Signing Ceremony for Rhode Island Funding Formula \" description=\"One of my first professional accomplishments was working on the modeling and language to support new legislation to change how school districts are funded by the state in Rhode Island. This is a picture I grabbed at the signing ceremony.\" \u003e}}\n  {{\u003cglightbox src=\"https://www.json.blog/img/2010-08-08_13-43-31a.jpg\" thumb=\"https://www.json.blog/img/2010-08-08_13-43-31a_thumb.jpg\" gallery=\"2010\" title=\"Elsa and I Visting Newport, RI \" description=\"From a day trip we took that first summer together down to the mansions in Newport. Note the awesome Glassjaw shirt I've got on.\" \u003e}}\n  {{\u003cglightbox src=\"https://www.json.blog/img/2012-03-26_21-29-11.jpg\" thumb=\"https://www.json.blog/img/2012-03-26_21-29-11_thumb.jpg\" gallery=\"2010\" title=\"Elsa looking cool \" \u003e}}\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsonbecker%2Fplugin-glightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsonbecker%2Fplugin-glightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsonbecker%2Fplugin-glightbox/lists"}