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 76aed79476
docs(readme): update license badge alt text
4 months ago
bin docs(bin): add note on recursion to copy script 1 year ago
layouts fix(layouts/post): add support for after-dark@7 layout refactoring 4 months ago
static/modules/hall-of-mirrors initial commit 1 year ago
.gitignore fix(meta): rename misspelled property 1 year ago
CHANGELOG.md chore(release): 0.2.0 4 months ago
COPYING chore(license): wtfpl -> 0bsd 4 months ago
README.md docs(readme): update license badge alt text 4 months ago
package-lock.json chore(release): 0.2.0 4 months ago
package.json chore(release): 0.2.0 4 months ago

README.md

Hall of Mirrors

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

Latest NPM version NPM downloads per month Minimum After Dark version 0BSD licensed

Demo

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

Setup

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.

Installation

  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 = [
      "hall-of-mirrors",
      "after-dark"
    ]
    
  3. 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.x.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.

Configuration

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

Minimal

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

[[resources]]
  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:

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

Extended

Add captions and enhance SEO by configuring 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]
    genre = "digital" # Set genre meta for all gallery images

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

Contributing

Please squash commits and use Convention Commit messages. Run npm run commit after installing NPM dev dependencies for help creating conventional commit messages.

Rights

Copyright © 2018, 2019 by Josh Habdas jhabdas@protonmail.com

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted.

The text of the above license is included in the file COPYING in the source.