📷 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 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.

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: 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

  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.0
    
  4. Create a Leaf Bundle to group image resources you wish to display in a PhotoSwipe gallery together with your content.

  5. Configure the gallery to your liking.

  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.

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

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.