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 54467acb24
chore(release): 0.1.4
1 month ago
bin docs(bin): add note on recursion to copy script 2 months ago
layouts fix(post/layouts): move module partials under flag 1 month ago
static/modules/hall-of-mirrors initial commit 2 months ago
.gitignore fix(meta): rename misspelled property 2 months ago
CHANGELOG.md chore(release): 0.1.4 1 month ago
COPYING initial commit 2 months ago
README.md fix(readme): update min theme vers 1 month ago
package-lock.json chore(release): 0.1.4 1 month ago
package.json chore(release): 0.1.4 1 month 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 WTFPL 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.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.

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.

License

Copyright © 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.