A Plugin for Creating a Page with an Image/Video Gallery

Moondeer · November 4, 2021, 1:43am

plugin-gallery

A plugin for Micro.blog that creates a page for housing an instance of a GLightbox gallery. Its code lives here. This plugin is dependent on plugin-lightbox as it utilizes its glightbox injection and shortcodes.

Once installed, the generated page may be found at [SCHEME]://[HOSTNAME]/gallery/.

Page Configuration

The file living at content/gallery.md specifies the front matter for the page.

{
  "title": "Gallery",
  "description": "Gallery",
  "type": "gallery",
  "menu": {
    "main": {
      "name": "Gallery",
      "title": "Gallery",
      "identifier": "gallery",
      "url": "/gallery/",
      "weight": 105
    }
  }
}

You can customize this by editing the value for description to give the page an appropriate description. The value of title controls the page’s title. I played around with changing the value of menu.main.name and never noticed any difference. The value of menu.main.title controls the label used in the navigation menu. The value of menu.main.weight adjusts the order of the navigation item amongst other weighted items. The value of menu.main.identifier I believe may be of use within other Hugo partials.

If you are happy with page URL as described above, don’t touch type or menu.main.url. If you want to change the URL, this what you want to do:

Change the values of type and menu.main.url so that they contain the same replacement value (I believe the custom would be dashed for multiple words but I am not positive).
Edit the location for the template at layouts/gallery/single.html by replacing gallery as the directory with the exact same value you replaced it with in step one.

Stylesheets

There is one stylesheet included. It lives at static/assets/css/gallery.css and looks like this:

div.gallery {
  padding-top: 2em;
}

a.gallery-link {
  height: 30vh; 
  width: 20%; 
  flex-grow: 1;
}

img.gallery-image {
  max-height: 100%;
  min-height: 100%; 
  min-width: 100%; 
  object-fit: cover; 
  vertical-align: bottom;
}

video.gallery-video {
  margin-top: 0; 
  max-height: 100%; 
  min-height: 100%; 
  min-width: 100%; 
  object-fit: cover; 
  vertical-align: bottom;
}

These are the values I currently use on my site. They utilize the classes that the plugin-lightbox automatically attaches in the gallery partial. You can change them or delete the file entirely if you are setting the style within the gallery data parameter (described below).

Gallery Data Example

To make anything show up, you’re gonna need to feed the plugin some data. You can do this through the plugin parameter interface or by creating a new template (file) under the directory I specify below.

If you decide to utilize the plugin parameter interface:

You will want to make sure you are pasting in a JSON object.

If, however, you choose to create a new file located at data/plugin_gallery/gallery_data.ext (where ext is replaced by the appropriate extension), the data file may be JSON, TOML, or YAML. This example will use JSON. So, to deploy it, I would want to create a new template at data/plugin_gallery/gallery_data.json.

Let’s look at an example file and then I’ll explain what all we can throw into it.

{
  "name": "Signed Art",
  "photo_width": 400,
  "link_style": "height:200px;flex-grow:1",
  "img_style": "max-height:100%;min-height:100%;object-fit:cover;vertical-align:bottom",
  "video_style": "max-height:100%;min-height:100%;object-fit:cover;vertical-align:bottom",
  "description": "*An interactive grid of my signed digital art in the order I created them.*",
  "slides": [
    {"title": "American Fabric", 
     "src": "https://moondeer.blog/uploads/2021/80b124a294.jpg"},
    {"title": "Cold Race War", 
     "src": "https://moondeer.blog/uploads/2021/76c82b757c.jpg"},
    {"title": "Representation", 
     "src": "https://moondeer.blog/uploads/2021/95e03999ff.jpg"},
    {"title": "Josh", 
     "src": "https://moondeer.blog/uploads/2021/f706dce000.jpg"},
    {"title": "South Carolina Tokens", 
     "src": "https://moondeer.blog/uploads/2021/10c1206ccb.jpg"},
    {"title": "Fodder", 
     "src": "https://moondeer.blog/uploads/2021/7c1a92896a.jpg"},
    {"title": "Damn Good Dawg", 
     "src": "https://moondeer.blog/uploads/2021/f9ba3905ca.jpg"},
    {"title": "Murphy", 
     "src": "https://moondeer.blog/uploads/2021/f8b4727edc.jpg"},
    {"title": "Demography and The GOP", 
     "src": "https://moondeer.blog/uploads/2021/07f16097b2.jpg"},
    {"title": "Bubble Merger", 
     "src": "https://moondeer.blog/uploads/2021/57cccbe268.jpg"},
    {"title": "Euler Diagram", 
     "src": "https://moondeer.blog/uploads/2021/f1ed034c78.jpg"},
    {"title": "Follower's Count", 
     "src": "https://moondeer.blog/uploads/2021/2c5884abec.jpg"},
    {"title": "Shanti", 
     "src": "https://moondeer.blog/uploads/2021/869813b580.jpg"},
    {"title": "Obstacles", 
     "src": "https://moondeer.blog/uploads/2021/54a798a76b.jpg"},
    {"title": "Base Sculpting 101", 
     "src": "https://moondeer.blog/uploads/2021/e0c894684d.mov"},
    {"title": "Snake Oil", 
     "src": "https://moondeer.blog/uploads/2021/573e0c430d.jpg"},
    {"title": "Programming", 
     "src": "https://moondeer.blog/uploads/2021/69decd9ec3.jpg"},
    {"title": "House of Cards", 
     "src": "https://moondeer.blog/uploads/2021/57da10e35f.jpg"},
    {"title": "GOP Affiliations Deck", 
     "src": "https://moondeer.blog/uploads/2021/c27515570a.png"},
    {"title": "Thin Blue Line", 
     "src": "https://moondeer.blog/uploads/2021/51cd2fc27e.jpg"}
   ]
 }

Valid Keys

name

The name of the gallery. This is required.

wrap

Whether the gallery links should wrap or be constrained to a single row. Default istrue.

div_class

Custom class to apply to the div. Default isundefined. 'gallery' is always applied.

div_style

Custom style to apply to the div in additon to the flex declaration and wrap specification. Default isundefined.

link_class

Custom class to apply to all anchor tags. Default isundefined. gallery-link and glightbox are always applied.

link_style

Custom style to apply to all anchor tags. Default isundefined.

desc_position

(bottom, top, left, right) Where all slides descriptions should be positioned. Default is bottom.

effect

(zoom, fade, none) The animation effect all slide should use. Default is zoom.

width

The custom width for all slides. Default is 900px.

height

The custom height for all slides. Default is 506px.

zoomable

Whether slides should be zoomable. Default istrue.

draggable

Whether slides should be draggable. Default istrue.

video_class

Custom class to apply to all video tags. Default isundefined. gallery-video is always applied.

video_style

Custom style to apply to all video tags. Default isundefined.

loop

Whether link videos should loop. Default istrue.

autoplay

Whether link videos should be set to autoplay. Default istrue.

preload

Value for link video preload attributes. This ignored when set to autoplay. Default isundefined.

img_class

Custom class to apply to all img tags. Default isundefined. gallery-image is always applied.

img_style

Custom style to apply to all img tags. Default isundefined.

photo_width

Specifies a pixel width for a thumbnail image to be fetched using the https://micro.blog/photos/ API. Default isundefined.

slides

The array of slide data objects. The only requirement is to have an entry for at least one of href or src. The full list of supported parameters is as follows:

href: The URL for the slide content. This is required unless a src parameter value has been provided.
src: The URL for the link content. This is required unless an href parameter value has been provided.
link_style: Custom style to apply to the anchor tag. Default is undefined.
title: The slide's title. Default is undefined.
description: The slide's description. Default is undefined.
desc_position: (bottom, top, left, right) Where the slide's description should be positioned. Default is bottom.
type: (image, video, inline?, iframe?) The slide type. Default infers from source … and the last two options I'm not sure about.
effect: (zoom, fade, none) The animation effect the slide should use. Default is zoom.
width: The custom width for this slide. Default is 900px.
height: The custom height for this slide. Default is 506px.
zoomable: Whether this slide should be zoomable. Default is true.
draggable: Whether this slide should be draggable. Default is true.
sizes: Specifies image sizes for different page layouts. Default isundefined.
srcset: Specifies a list of image files to use in different situations. Default isundefined.
video_style: Custom style to apply to the video tag. Default isundefined.
loop: Whether the link video should loop. Default istrue.
autoplay: Whether the link video should be set to autoplay. Default istrue.
preload: Value for the link video's preload attribute. This ignored when set to autoplay. Default isundefined.
alt: Specifies an alternate text for an image. Default isundefined.
img_style: Custom style to apply to the img tag. Default is undefined.
photo_width: Specifies a pixel width for a thumbnail image to be fetched using the https://micro.blog/photos/ API. Default isundefined.