📷 Responsive PhotoSwipe image gallery for After Dark https://after-dark.habd.as/module/hall-of-mirrors

hugo after-dark fetch-inject photoswipe

Josh Habdas 8003184af3 chore(release): 0.1.1		2 years ago
bin	docs(bin): add note on recursion to copy script	2 years ago
layouts	fix: remove hardcoded script	2 years ago
static/modules/hall-of-mirrors	initial commit	2 years ago
CHANGELOG.md	chore(release): 0.1.1	2 years ago
COPYING	initial commit	2 years ago
README.md	fix: remove hardcoded script	2 years ago
package-lock.json	chore(release): 0.1.1	2 years ago
package.json	chore(release): 0.1.1	2 years ago

README.md

Hall of Mirrors

PhotoSwipe Image Gallery for After Dark. Hall of Mirrors adds a responsive JavaScript image gallery using PhotoSwipe.

Demo

Your browser doesn't support HTML5 video. Here is a link to the video instead. Ref: gitea/issues/3845

Setup

None requried unless you're hosting your site from a subdirectory (e.g. example.com/blog/). If so you'll need to update the url types in default-skin.css to point to your base url. A script called urlize has been provided to facilitate this change.

Installation

Copy the contents of this repository into a directory called themes/hall-of-mirrors under the root of your After Dark site.
Add hall-of-mirrors as a theme component to your After Dark site config.toml, e.g.
```
theme = [
  "hall-of-mirrors",
  "after-dark"
]
```

Add and specify settings for the module in your After Dark site config, e.g.

[params.modules.hall_of_mirrors]
  enabled = true # Required in version 0.1.0

Create a Leaf Bundle to group image resources you wish to display in a PhotoSwipe gallery together with your content.
Configure the gallery to your liking.
Build and deploy your After Dark site.

Configuration

To display a gallery add the Page Resources you wish to display to your Leaf Bundle and configure your front matter.

Minimal

The following is all you need to display a basic gallery. Seriously.

[[resources]]
  src = "**.jpg" # Display any jpeg image in the leaf bundle
  name = "gallery" # Name must include the word 'gallery'

[[resources]]
  src = "images/gallery/**.jpg" # Restrict images to a folder
  name = "Image gallery" # Provide a more friendly gallery name

Extended

If you want to add captions and enhance SEO you can configure individual resources.

[[resources]]
  src = "**/ray-hennessy-763310-unsplash.jpg"
  [resources.params]
    thumb_size = "750x" # Adjust size of thumbnail image
  [resources.params.meta]
    creator = "Ray Hennessy"
    description = "This is a long description. It is shown instead of the title and is intended to provide more information."

[[resources]]
  src = "**sprat**" # Glob for image with 'sprat' in the filename
  title = "Diverse succulents around a rock"
  [resources.params]
    hide_credits = true # Display title but not creator
  [resources.params.meta]
    creator = "Annie Spratt" # Maps to schema structured data

[[resources]]
  src = "**/blake-richard-verdoorn-20063-unsplash.jpg"
  title = "Bridge over a green waterfall"
  [resources.params]
    hide_credits = true
    thumb_size = "350x"
  [resources.params.meta]
    creator = "Blake Richard Verdoorn"
    keywords = ["nature", "waterfall", "bridge"]

[[resources]]
  src = "images/gallery/**.jpg"
  name = "Nature gallery"
  [resources.params.meta]
    genere = "digital" # Set a genere for all image resources

This should get you started. Expect some breaking changes as the development is completed.

License

This work is free. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See the COPYING file for more details.