Example slideshow using md-to-html

Setup Instructions

  • Install md-to-html

  • Create index.md using this template.

    ---
enable_jinja: true
title: Example slideshow using `md-to-html`
galleries:
  banff:
    paths:
      # Relative to source. To allow downloads you need to copy these
      # to the destination directory (if different), and set allow_downloads
      originals: /home/gautam/tmp/web-photos/2023-banff/orig/

      # Relative to destination
      thumbnails: thumb/
      images: img/

    allow_downloads: false
    # thumbnails:
    #   width: 150
    #   height: 150
    #   quality: 95
    #   method: crop
    # images:
    #   width: 1920
    #   height: 1080
    #   quality: 95

    # Paths are relative to paths.originals (relative to source).
    # If descriptions aren't needed, you can alternately specify originals as a
    # sequence
    originals:
      IMG_20231002_132823.jpg: Bow river
      IMG_20231004_153244.jpg: Lake Moraine
      IMG_20231005_175551.jpg: Bow river
      IMG_20231006_110027.jpg: Banff town (from the top of Sulpher Mountain)
      IMG_20231006_110729.jpg: From the top of Sulpher Mountain
---
# {{title}}

{{LightGallery.gallery( 'banff', galleries.banff )}}

    This will use LightGallery to create the slideshow.

  • Run md-to-html -r index.md to resize images and generate the slideshow. (Use -fF to force regeneration of images, and drop -r if you don’t want images resized.)

Some Configuration Options

  • If you don’t want to caption any of your images, you can alternately specify originals by 

    originals:
  - img1.jpg
  - img2.jpg
  - img3.jpg
  - img4.jpg

  • To add links to original images for download, set allow_downloads = true, and copy the originals into dst_dir (if different from the current directory). In this case specify paths.originals relative to the source directory.

Resizing images

md-to-html can resize images to generate thumbnails and web view images for each original image.

  • Specify the command line argument -r.

  • Normally images are only generated if the source files are newer. To force regeneration of images use the -F or --force-resize options.

  • Configure sizes using images / thumbnails mapping. The default values are commented in the example above.