how it's done

The idea is to put all the images that you want in a specific gallery into one folder alongside your page's markdown file.

Then, in markdown, you can use this syntax:

1

[name <sort> <direction>]!​!(image-folder)

to create a gallery.

The name of the gallery and the image folder are required. Sorting key and direction are optional; however, it is not possible to specify direction without sort, since these are positional arguments.

You can have as many galleries per page as you want.

what you get

Let's say you put this snippet somewhere in your markdown:

1

[examplegallery name desc]!​!(mygallery)

mygallery/ contains three images, a.png, b.jpg and c.png. The resulting HTML-snippet will then look like this:

1
2
3
4
5

<div class="gallery" id="gallery-examplegallery">
    <img src="mygallery/c.png" alt="image 1 in examplegallery gallery">
    <img src="mygallery/b.jpg" alt="image 2 in examplegallery gallery">
    <img src="mygallery/a.png" alt="image 3 in examplegallery gallery">
</div>

Important: The gallery plugin, by default, acts right before the pixelizer plugin. The plugins play nicely with each other, turning the above img tags into responsive picture tags!