A Easy Gallery plugin

I wanted a gallery option I could call from anywhere, This was a big ask for 11ty. I originally found inspiration from an old pure HTML site i wrote with PhotoSwipe handling the lightbox and slide function.

Apparently this was too much to ask for a simple way of doing things and I’ve almost messed up my site before launch… again.

example

To do’s

• Make them clickable with a lightbox properly, not sure why they aren’t when a pure HTML version written the same way does. I suspect they aren’t being wrapped in a link when processing to HTML. (solved with point below)
• Currently we have to call the image with [![image](/img/image.jpg "word")](/img/image.jpg) to even get a clickable image for the lightbox to fire, a brief discussion classes this as “insane”.
• fix sizing when Photoswipe takes over, for some reason Photoswipe decides to make them stretch to fit the screen, in stead of the default sizes. No idea why it doesn’t do its default state and just does the thing what requires more coding work.

How its done.

I followed most of the guide at Mark Llobrera’s blog, but it was a bit ‘all over’ the place and seemed to be missing bits, the footnotes helped a little.

Instead of making it a template I made the shortcode global, and put everything called into eleventy.config.gallery.js (didn’t need images-responsiver-config.js in the end, I think i pulled the plugin out too as it was causing issues with all images on the site). Here’s my eleventy.config.gallery.js:

const path = require("path");
const markdownItAttrs = require("markdown-it-attrs");
const markdownIt = require("markdown-it");

module.exports = eleventyConfig => {
//extra markdown
let markdownLibrary = markdownIt({
    html: true,
    breaks: true,
    linkify: true,
    typographer: true,
  })
 /*   .use(markdownItAnchor, {
      permalink: true,
      permalinkClass: "direct-link",
      permalinkSymbol: "#",
    })
    //.use(markdownItFootnote) */
    .use(markdownItAttrs);
  
  markdownLibrary.renderer.rules.footnote_caption = (tokens, idx) => {
    let n = Number(tokens[idx].meta.id + 1).toString();
  
    if (tokens[idx].meta.subId > 0) {
      n += ":" + tokens[idx].meta.subId;
    }
  
    return n;
  };
  eleventyConfig.setLibrary("md", markdownLibrary);
// Gallery shortcode stuff
eleventyConfig.addPairedShortcode(
    "gallery", (data) => {
      const galleryContent = markdownLibrary.render(data);
      return `<script type="module">
import PhotoSwipeLightbox from '/js/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
  gallery: '.gallery',
  children: 'a',
  pswpModule: () => import('/js/photoswipe.esm.js')
});
lightbox.init();
</script>
<link rel="stylesheet" href="/js/photoswipe.css">
      <div class="gallery">${galleryContent}</div>`;
    }
  );


}

And this file is called with a plugin in eleventy.config.js with

//near top of file, you'll see some examples.
const pluginGallery = require("./eleventy.config.gallery.js");
// inside your module exports
eleventyConfig.addPlugin(pluginGallery);

There is probably a better way, or a simple fix i’ve missed for the issues what appear. But I prefer simple being ‘not adding more and more node modules to process in and template’, because that jsut takes weeks to make it work… okay it took a few days.

If it works, i’m happy. Even if it looks terrible.

Editing time!

I’ve changed my base templating again, mainly due to preparing for Eleventy 3.0, but also Eleventy Satisfactory had this gallery and other features already working much better than I could figure out, due to possible image conflicts, this module will work for empty/base templates.

It’s missing EleventyImg integration, but that was a pain in the arse last time i tried it.