📷 Responsive PhotoSwipe image gallery for After Dark https://after-dark.habd.as/module/hall-of-mirrors
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Josh Habdas 0f8dbaf01e
chore(release): 0.1.2
2 years ago
bin docs(bin): add note on recursion to copy script 2 years ago
layouts fix(meta): rename misspelled property 2 years ago
static/modules/hall-of-mirrors initial commit 2 years ago
.gitignore fix(meta): rename misspelled property 2 years ago
CHANGELOG.md chore(release): 0.1.2 2 years ago
COPYING initial commit 2 years ago
README.md fix(meta): rename misspelled property 2 years ago
package-lock.json chore(release): 0.1.2 2 years ago
package.json chore(release): 0.1.2 2 years ago


Hall of Mirrors

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

Latest NPM version NPM downloads per month Minimum After Dark version WTFPL licensed


Your browser doesn't support HTML5 video. Here is a link to the video instead. Ref: embedding-videos-in-readmes


None required, unless you're hosting your site root from a path including a / such as domain.example/blog/. If so, update the url data types in default-skin.css to include the full path. Use the included bin/urlize script to facilitate this change.


  1. Copy the contents of this repository into a directory called themes/hall-of-mirrors under the root of your After Dark site.

  2. Add hall-of-mirrors as a theme component to your After Dark site config.toml, e.g.

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

      enabled = true # Required in version 0.1.x
  4. Create a Leaf Bundle for your images and content.

  5. Configure the content to reference the images.

  6. Build and deploy your After Dark site.


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


Display a gallery for all JPEG images in the page bundle:

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

Display a gallery for images in a specific bundle subdirectory:

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


Add captions and enhance SEO by configuring individual resources:

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

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

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

  src = "images/gallery/**.jpg"
  name = "Nature gallery"
    genre = "digital" # Set genre meta for all gallery images

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


Copyright (C) 2018 Josh Habdas jhabdas@protonmail.com

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.