liwenyip / hugo-easy-gallery Goto Github PK

Navigating a static site built with Hugo and beatifulhugo theme (based on hugo-easy-gallery) I can see thumbs but when clicking on an image it does not open, an error "can't open image appears, anyone same problem?

In the documentation, it is mentioned that you can use the size parameter in the figure shortcode to avoid loading the linked image to calculate its size.

After a bit of debugging, I noticed that the javascript code that reads the manual size value expects the data size info on the <a> tag, but the partial puts that info on the <div> that contains the thumbnail.

I can send a PR with the fix if needed.

I found that after installed Hugo-easy-gallery, when you click a thumbnail image, there's not a zoom-in animation to show the full-size image as PhotoSwipe demo page does: https://photoswipe.com

Hi,

the icarus theme (at least the version I use, which is 8d7dd851703fcddf0c89f774265caf24cdfeade3 from the hugo-icarus-theme) puts a caption right over the images in a gallery.

I did this ugly hack which fixes the issue for me.

/* Hack
 *
 * This is a hack:
 *
 * hugo-easy-gallery puts a "caption" into the image.
 * my hugo theme (icarus) formats a "class = 'caption'" for images.
 * But as the hugo easy gallery plugin renders its own caption with the
 * <figcaption> tag, we don't need to see that hugo caption.
 *
 * So we hide it.
 */
.img .caption {
  display: none
}

And I included that css file in my site via

{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/gallery-caption.css" />{{ end }}

in /layouts/shortcodes/figure.html.

Newer versions of the icarus theme might not have that issue.

Feel free to close this issue right away, I don't expect you to do anything but notice this. This issue was filed only as a documentation of the issue.

Anyone know where to put this:

<!-- Load PhotoSwipe js if the load-photoswipe shortcode has been used -->
{{ if ($.Scratch.Get "photoswipeloaded") }}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
{{ end }}

on the universal theme? I thought the scripts.html partial made the most sense but something doesn't seem to be loading correctly on the page I used it on

I’m implementing the Hugo Easy Gallery on my site but I have a problem with it in combination with the Dimension theme.

I run the gallery on this page: http://newsite.luckycharmtattoo.nl/#portfolio
When I click one of the images, the gallery doesn’t go full screen, but it seems ‘caputered’ in the underlaying layer of the theme.

Because of this, the gallery doesn’t go to the center of the display and doesn’t scale. Does someone know how I can avoid this so the gallery works as good as on the authors website?

I enabled PhotoSwipe using {{< load-photoswipe >}} inside blog blog, however it is linking directly to the image itself instead of opening inside a lightbox.

my example: https://new-homepage-2018.netlify.com/blog/testblog1/

Please advise, thanks!

I am not sure if this is doable but I am wondering if there is a chance of having a single image on the page which acts as a link to the gallery. I mean, just a single picture on the page which allows browsing multiple pictures (not shown on the page) when somebody clicks on the single one.

I checked examples and it seems that the tool creates the gallery only out of the pictures shown on the page (either multiple {{< figure.. >}} or {{}} ).

Thanks for any tip.

How about using the image processing features recently added to Hugo:

• Image processing (Hugo 0.32)
• Smart image cropping (Hugo 0.36)

Hello,

I am relatively new to Hugo and I wonder, because the install procedure for this plugin seems to be rather complicated and also a lot of files are touched, which greatly reduces maintainability.
Also for example if I do not want to load photoswipe from cloudflare I have to manually download it.

Now I wonder is there any better way to install modules/plugins like this gallery in Hugo?

Thank you so much, it works great!

The auto-dimensioning feature is a nice affordance for users. Have you considered only fetching a few bytes of the image to get at the image headers and then cancelling the request as opposed to downloading all full-size images anytime someone encounters a gallery? I ask because it's a bit bandwidth intensive and will hurt users on prepaid mobile plans (like myself).

@liwenyip I'm getting closer to launching my landing page starter. https://dkebler.github.io/landingpage-guide/ I'll incorporate your shortcode (see plugins in the guide). My landing page generator is 100% flexbox and BEM so I'll write you a flexbox version of your css. Might talk you into modifying the shortcode a bit to add some other BEM sub classes but your main wrapper uses the same class "box" that I use to wrap anything in a flexbox so that's good.

I tried using a gallery with the future imperfect theme, but the captions are shown in black on grey, making them hard to read. Using a different theme (academic) the were white, as expected.

Changing background, position, opacity etc. in hugo-easy-gallery.css changes the caption properties, only changing the colour has no effect. I guess the theme sets the colour somewhere and it is not correctly overwritten, however, I do not know enough CSS to fix this.

We both have some good shortcodes. https://dkebler.github.io/landingpage-guide/#plugins

Interested in maintaining with me a shortcode repository/showcase? My new generator would make it easy to build the showcase site. In the plugins section there is nice modal based documentation for each shortcode (albeit I've only finished documenting two). I've been thinking of creating a hugo "tools" github organization so here is a reason.

As per our discussion here: halogenica/beautifulhugo#35 (comment)

It would be nice to be able to define hover text that is different from the caption; for example when the captions are very long. One idea is to prefer to show the "alt" text when hovering, and fall back to "caption" if "alt" is not provided, or no hover text if neither are provided. I want to make sure this is reasonably expected behavior..

When I try to implement the Hugo Easy Gallery on my personal site, Hugo refuses to build when the {{< figure >}} stanza contains the attrlink parameter.

The build fails with the following error:

ERROR 2020/04/07 16:53:42 "/Users/mgibson323/work/redacted.com/content/about.md:8:1": 
failed to render shortcode "figure": failed to process shortcode: 
"/Users/mgibson323/work/redacted.com/layouts/shortcodes/figure.html:23:53": 
execute of template failed: template: shortcodes/figure.html:23:53: executing 
"shortcodes/figure.html" at <.Get>: can't evaluate field Get in type string

Example code follows:

about.md:

{{< load-photoswipe >}}
{{< figure src="/images/me.jpg" attr="image courtesy of @someuser" attrlink="https://twitter.com/someuser" >}}

figure.html:

Unchanged from master.

Is it possible to create a "master gallery" of all images in subfolders? I'd like to have one gallery that includes everything, and then multiple sub-galleries.

My images are organized within the img folder like so:

- img
-- people
-- places
-- events

Is there a way to target all of those at once with the Gallery shortcode? Something like {{< gallery dir="/img/**/**/" />}} {{< load-photoswipe >}}?

Edit: I am using the Victor-Hugo boilerplate, if that has anything to do with it.

Folder structure is:

|--site                // Everything in here will be built with hugo
|  |--content          // Pages and collections - ask if you need extra pages
|  |--data             // YAML data files with any data for use in examples
|  |--layouts          // This is where all templates go
|  |  |--partials      // This is where includes live
|  |  |--index.html    // The index page
|  |--static           // Files in here ends up in the public folder
|--src                 // Files that will pass through the asset pipeline
|  |--css              // CSS files in the root of this folder will end up in /css/...
|  |--js               // app.js will be compiled to /app.js with babel

All static assets are in /static/img/ which builds to ./img/

Master gallery example (not working): https://staging.iammatthias.com/gal/
Individual gallery example (working): https://staging.iammatthias.com/gal/flatframe

For some type of images (technical diagrams, screenshots), it seems better to not crop the thumbnail into a square, but to display the thumbnail with a border (so the whole image is visible). Is there an easy way to do this?

Hi,

I got error when I clicked the image

the error message is:

photoswipe.min.js:4 Uncaught TypeError: Cannot read property 'firstChild' of undefined at Object.getChildByClass (photoswipe.min.js:4) at a.init (photoswipe.min.js:4) at HTMLElement.<anonymous> (load-photoswipe.js:77) at HTMLElement.dispatch (jquery-1.12.4.min.js:3) at HTMLElement.r.handle (jquery-1.12.4.min.js:3) getChildByClass @ photoswipe.min.js:4 init @ photoswipe.min.js:4 (anonymous) @ load-photoswipe.js:77 dispatch @ jquery-1.12.4.min.js:3 r.handle @ jquery-1.12.4.min.js:3
I manually put jquery in the /layout/partials/header.html, please help me, thank you!

Thanks a lot for this great tool! I'm using it on my website and it's working really well. The only minor issue I have is that when I'm adding a whole directory and have the captions depend on the file name, captions have the first letter capitalised and the rest in small (e.g. "This is a photo from russia"). This is the case even if the filename has capitals (e.g. "This-is-a-photo-from-Russia.jpg"). Any idea what's up there?

Perhaps I have not been able to find the right way to pass, but I am having difficulty getting this to work when the base url of the site is not the top-level.

For example: my site is going to live at /foo/bar/ and config.toml is set to:
baseurl = "http://website.com/foo/bar"

Static images from /static/images/ therefore end up in http://website.com/foo/bar/images/* . But the resultant page expects the files to be found in http://website.com/images/* when given the shortcode: {{< gallery dir="/images/" />}} {{< load-photoswipe >}}. The page is create but all image

Thanks for writing this, ever since I started using Hugo I needed something like this.

Install was a breeze. Code was easy to follow for the few changes I needed to make.

Thanks again! Saved me quite a bunch of time.

https://codepen.io/dimsemenov/pen/ZYbPJM

I'm using Hugo with the Blackburn theme, and I find two problems, when I load the gallery with

{{< gallery dir="/ImageDirectory" >}} {{< load-photoswipe >}}

The ImageDirectory is inside my Hugo static directory. However, only the first 30 or so of the images are loaded as thumbnails, and some of the thumbnails are incorrectly oriented. However the pictures are correctly oriented when shown at full size. Also, the thumbnails are all rectangular rather than square. (Also photoswipe does not load.)

The entire page is full of "blank" thumbnails, which when clicked on return a 404 error. I've increased my timeout to 60000 but it makes no difference.

Is there anything obvious I'm doing wrong? Thanks!

When giving a directory to use for the gallery {{< gallery dir="/img/your-directory-of-images/" />}} the static folder is assumed as root for the given parameter. However, when using leaf bundles, images and pages live in the same folder (or in a subfolder):

├── 2018
│   ├── post-about-animals
│   │   ├── img
│   │   │   ├── elephant.jpg
│   │   │   ├── zebrajpg
│   │   │   ├── tiger.jpg
│   │   ├── index.md
└── index.md

Now, I don't see a way to use the images in the post's img folder to use as a gallery. As far as I understand the documentation, these images should be accessible as pages resources via .Resources.

I am new to Hugo and therefore not sure if this is really a missing feature or if I just don't see the solution in that case. I would appreciate some guidance here, so that I can see if I can modify shortcode for that case or if this is already supported.

I have just clone a Gitlab Pages project build with Hugo, where the gallery plugin is a part of theme.

The gallery looks nice and pretty. But I got stuck on a bug: after clicking on a image, then closing it (hitting on a background or a close-button), the page layout gets blocked with a gallery-container with a class pswp.

Could you please check this page?

You can find source code of the page here https://gitlab.com/pages/hugo

Hi! First let me thank you for your work!

I'm having issues getting figures displayed correctly.

The page in Question is here. The first image is added wit the shortcode img.html:

{{ $path := .Get "src" }}
{{ $caption := .Get "title" }}
<div class="fancybox">
    <a data-fancybox="gallery" href="{{ $path | absURL }}" data-caption="{{ $caption }}">
        <img src="{{ $path | absURL }}"  width="100%"  alt="" loading="lazy"/>
    </a>
</div>

and is displayed with correct dimensions.

The second, third and fourth images I've added respectively like so:

{{< load-photoswipe >}}
{{< figure src="/img/fixed-background-bottom.jpg" width="400px" height="auto" >}}
{{< figure link="/img/fixed-background-bottom.jpg" thumb="-small" >}}
{{< figure link="/img/fixed-background-bottom.jpg" thumb="-small" width="400px" >}}

As you can see, the first image has the wrong dimension and the third and fourth one don't display the smaller preview images.. The lightbox is working though.

Edit: I've fixed the thumbnails not displaying... I was using .jpeginstead of .jpg:)

Could you please assist?

Thanks in advance and have a good one :)

I've just found out that the gallery does not work when images use filenames with uppercase font, e.g. P2050131.JPG . The result has just white space instead of pictures. Hugo generates the gallery correctly when I rename the file to p2050131.jpg

Why are you including such an old version of jQuery (1.12.4) in load-photoswipe.html? Current version is 3.3.1, so that's two major versions behind.

Considering PhotoSwipe doesn't require jQuery, could also just use vanilla js.

I'm using easy-gallery with manually specified images and the default hugo-easy-gallery.css and 3 thumbs per line.

Can I somehow specify the thumb width per image as well as thumbs per line in a gallery? This would be very helpful for a gallery with a mix of portrait and panoramas.

load-photoswipe.js and hugo-easy-gallery.css are not imported correctly when the site is configured with a path, for example: https://www.example.com/mysite/

This appears to be due to the fact that the paths are hard coded relative paths in figure.html, gallery.html, and load-photoswipe.html.

For example, in figure.html, changing:

<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />

to:

<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/hugo-easy-gallery.css" />

should address the issue.

i configured hugo in config.toml where i changed default image dir to
staticDir = ["content/static/images/"], then i put example images in content/static/images/post1

after i write my md file just as the example shows.

{{< gallery caption-effect="fade" >}}
{{< figure link="post1/hexagon.jpg" >}}
{{< figure thumb="-thumb" link="post1/sphere.jpg" caption="Sphere" >}}
{{< figure thumb="-thumb" link="post1/triangle.jpg" caption="Triangle" alt="This is a long comment about a triangle" >}}
{{< /gallery >}}
{{< load-photoswipe >}}

those images in the album of the main pages loaded successfully, but the images inside that post(means when you click the post name and readmore) were not loaded properly. They are not found.

it seems those photo on the main pages were using url like blog/post1/hexagon.jpg while those
images inside the post were using url like blog/post/[this is post name]/post1/hexagon.jpg. And i try to build pages in terminal use " hugo ", those images were not in public/post/[this is post name]/

i have no idea how to solve it.

I try to tweak around config.toml file, and find this problem might be relative to urls，when I use baseurl = "https://localhost:1313/" or baseurl = "https://localhost:1313/blog/" the result is different, also there's something to do with CanonifyURLs and RelativeURLs... hope someone could solve my question.

Hi,

I'm using the beautifulhugo theme for our blog, and I'm having the following issue with it. I'll use one blog article as an example, but it's the same for all articles using the gallery. The article in question is here.

The problem is that - and you should be able to verify it by going there and trying - after the gallery has been opened and closed again, all links on the site are blocked. It is then necessary to reload the page to get it working again. This is on Firefox 81.0 and Chromium 83.0.4103.116 (Developer Build), running on Debian sid (but I see this problem on any OS).

On mobile (Firefox on Android, both latest versions) the entire site crashes after closing the gallery and isn't scrollable any longer. Again, reloading the page fixes this.

It would be great if you could have a quick look. Sorry if I'm overlooking something obvious. As for the code, it should be exactly in line with your documentation:

---
title: product development
subtitle: at the hardware-software intersection
date: 2020-05-13
author: Florian
tags: ["baremetal", "bmc::labs", "engineering", "portfolio"]
---

Although most of our team has worked together for several years, **bmc::labs**
is still a young company, so our portfolio is not as rich as we'd like it to
be. In this article we'd like to give a brief look into our process and how we
work - and with a bit of luck, we'll convince you to help us add new items to
our successful projects list.

<!--more-->


{{< load-photoswipe >}}


### modular logging platform

In one of our customer projects, the idea of a modular logging platform came
up. The need was basically for a data logger, but as a cost efficient solution
with a limited feature set and configurable hardware.

We did an initial prototype based on [the blue pill
board](https://stm32-base.org/boards/STM32F103C8T6-Blue-Pill.html). In addition
to what the blue pill has, it was to feature

- Controller Area Network (CAN) Bus to be connected via predefined connector
- a temperature-pressure sensor for ambient conditions sensing
- GPS and a mobile data module (Bluetooth optional)
- a small OLED to output results and the like
- some LEDs for statuses

{{< gallery caption-effect="fade" >}}
  {{< figure thumb="-thumb" link="/img/product-development/onboard-1.JPG" caption="the prototype - fig 1" alt="prototype" >}}
  {{< figure thumb="-thumb" link="/img/product-development/onboard-2.JPG" caption="the prototype - fig 2" alt="prototype" >}}
  {{< figure thumb="-thumb" link="/img/product-development/onboard-3.JPG" caption="the prototype - fig 3" alt="prototype" >}}
{{< /gallery >}}

We did some basic software tests and 3D printed some housings before the
customer shifted the project focus more in the direction of a software
solution for post-processing. However, this project has become the basis for a
project of our own - but more on that in another article.


### control unit configuration selector

A customer approached us looking for a configuration selector for control units
with the following requirements:

- replaces a rotary switch
- should be removable
- must be sealable (preferably using sealing wire)
- must come with a reliable and unique mounting solution

We did a preliminary design inspired by the [Fischer® Rugged Flash
Drives](https://www.fischerconnectors.com/us/en/products/rugged-flash-drive).
We quite liked the design, but recommended to the customer that a different
solution would bring less pain in several regards.

{{< gallery caption-effect="fade" >}}
  {{< figure thumb="-thumb" link="/img/product-development/stick-1.JPG" caption="stick selector - fig 1" alt="stick selector" >}}
  {{< figure thumb="-thumb" link="/img/product-development/stick-2.JPG" caption="stick selector - fig 2" alt="stick selector" >}}
  {{< figure thumb="-thumb" link="/img/product-development/stick-3.JPG" caption="stick selector - fig 3" alt="stick selector" >}}
{{< /gallery >}}

The solution suggested to the customer was to use a rotary with a robust and
unique housing and rotator - as recognizable as it gets - and design that to be
wire sealable. The idea was accepted and once again, we went to the drawing
board to make it happen.

{{< gallery caption-effect="fade" >}}
  {{< figure thumb="-thumb" link="/img/product-development/rotary-1.JPG" caption="rotary selector - fig 1" alt="rotary selector" >}}
  {{< figure thumb="-thumb" link="/img/product-development/rotary-2.JPG" caption="rotary selector - fig 2" alt="rotary selector" >}}
  {{< figure thumb="-thumb" link="/img/product-development/rotary-3.JPG" caption="rotary selector - fig 3" alt="rotary selector" >}}
{{< /gallery >}}

As this solution was accepted all the way through prototyping and testing, we
finalized the product with a anodized finish and adequate packaging. We
actually ended up quite liking this product, despite the fact that it involved
only very minor electronics design, and no software at all.


### last words

The projects presented above are just two recent examples. Our team has
realized projects using custom electronics, as well as Raspberry Pis and other
non-custom hardware.

We want to highlight here:

- We do custom electronics, with the software aspect in mind.
- We work together with our customers to find the best solution, even if that
  involves shelving weeks of development effort in favor of a better solution.
- We have the in-house know-how for mechanical design to support our
  electronics design with housings and custom solutions.
- If you want us to, we'll take care of everything, including the packaging.
- Our strong partners in electronics manufacturing, mechanical manufacturing
  and packaging design and manufacturing enable us to do so.

And honestly, we enjoy these projects like nothing else...

Reliable results, efficiently delivered.

we.are.#baremetal

That is of course just the markdown I give to Hugo, but since I haven't otherwise changed your templates, that shouldn't be the issue. On the development server it seems the problem has disappeared; I can't reproduce it there any longer.

Best regards

I am trying to use the gallery feature with hugo geo theme
I added
/layout/shortcodes/gallery.html
/layout/shortcodes/load-photoswipe.html
/static/js/load-photoswipe.js
/static/css/hugo-easy-gallery.css

and I also added a folder in static/img/myfolder path
and using the below line in markdown file
{{< gallery dir="/img/myfolder/" />}} {{< load-photoswipe >}}
but I cant get the images properly, they overlap.
Also, they are just images but the click event doesn't work with them opening the gallery.

Am I missing something?
Also, can a png format work fine for images?

Here is the link of repo I am trying to implement in.

Hi
My problem is similar to the issue #24
I'm use this gallery on site https://netmoose.ru but my images not hosted in this site. I put images in "spaces" (like s3 object storage) on digitalocean.com and get url from cdn.

Example:
Image 1: photo_2017-07-29_20-44-13.jpg
URL: https://netmoose.ams3.cdn.digitaloceanspaces.com/nigniaya_sinyachikha/photo_2017-07-29_20-44-13.jpg
Image 2: photo_2017-07-29_20-44-52.jpg
URL https://netmoose.ams3.cdn.digitaloceanspaces.com/nigniaya_sinyachikha/photo_2017-07-29_20-44-52.jpg

I write to page:

{{< gallery caption-effect="fade" >}} {{< load-photoswipe >}}

{{< figure width="345px" link="https://netmoose.ams3.cdn.digitaloceanspaces.com/nigniaya_sinyachikha/photo_2017-07-29_20-44-13.jpg" caption="1 image">}}
{{< figure width="345px" link="https://netmoose.ams3.cdn.digitaloceanspaces.com/nigniaya_sinyachikha/photo_2017-07-29_20-44-52.jpg" caption="2 image">}}

{{< /gallery >}}

I rebuild site. Gallery is showing thumbnails. I click on thumbnail, clicked image is shown, when I click on next button (or previous), I see empty photoswipe.

For some reason when I include more than one gallery shortcode on a single post all I get is this:

Note: The whole post is this:

This is a test

{{< gallery dir="/wp-content/galleries/2013-08-26-automatic-cat-lasers/1/">}}
{{< gallery dir="/wp-content/galleries/2016-06-21-rfitea-tea-steeping-with-rfid/1/">}}

And it's only showing the first one. When looking at the page source, it does not include /css/hugo-easy-gallery.css if I add more than one gallery shortcode. The 2 about the image is actually from me adding this right above the first <div> in the gallery shortcode:

{{ $.Page.Scratch.Get "figurecount" }}

So it seems like it's counting both. But completely falls apart otherwise.

Thoughts?

this is more of a support question than a bug. I'm new to Hugo and static sites.

I managed to add your gallery to the blog post as markdown, but can't seem to add it into one of my pages (index, about...) , for example inside a HTML, is this possible?

what is the correct way to do this?

Hi,

I'm having a weird issue where I open one image in the slideshow and when sliding to the left or right, the next image is not shown.

Can you help me debug this please?

I'm not a JS/web guy, so I need a helping hand there.

Is it possible to implement a carousel (instead of a gallery) that if clicked on becomes a PhotoSwipe full-screen carousel (as it happens already right now)?

I'm having a lot of trouble loading my pictures because it's really slow. I decided use the instagram short code built into hugo instead of pictures from my files. problem is I still want these effects. I'm brand new to this. Any help appreciated. I can contribute if somebody points me to the right direction.

When we have that thumbsup data model then I suggest you support both (what you have already done, and the data model). My intention was to be able to export a thumbsup media folder to an external source (like s3 bucket) and the data model to hugo then use a hugo config setting to tell the shortcode where to look for the media defaulting to local static folder. I do this in my landing page already.

Hi!
I'm building a website with the ananke theme..
I have an issue with the gallery (not the single images)
It won't show unless there's something else before in the page...specifically another picture, or an iframe..

EDIT: Actually...it's an issue with the theme, it isn't picking up the width, but in responsive mode(on a phone) it works...
Can I set a width?

I added the easy gallery files to the Hugo Academic template. I can successfully add files to the page using either the {{< gallery dir="" >}} option or by specifying individual files under {{< gallery >}} as described on https://www.liwen.id.au/heg/#gallery-usage. Captions appear correctly under the images when I click on them to enlarge. However, when I mouse over the thumbnails the images grow a tiny bit and a small gray bar appears over them (smaller than the ones on the aforementioned tutorial) and no text appears for the caption.

Hello,
I have a question regarding the thumbs attribute. From experiments it seems that it does not work when applied to the gallery shortcode, but as far as I read the documentation it should work?

It would maybe be good to extend the documentation with an example how to use the thumbs attribute with the gallery shortcode or to clarify that the thumbs attribute has to be put on the figure shortcode.

According to Hugo, shortcodes don't work in template files. Is there a workaround?

I've got bunch of questions to galleries:

1. Why a page content which is followed by {{< /gallery >}} disappears? How can I change that?
2. Is it possible to have two distinct galleries separated with text content on the same page?
3. Why thumbnails for {{< gallery >}} work, but not for single photo (both {{< figure link="..." src="..." >}} and {{< figure thumb="-thumb" link="...">}} doesn't work)?
4. Can I combine {{< /gallery >}} with {{< figure src="..." >}} on the same page, separated with another content?

Hi Li-Wen,

first of all, I really like to thank you for this awesome library! Good job!

I just want to point you to the fact, that the w3 validator is not satisfied with the resulting html. It prints the following error:

Error: Element a not allowed as child of element figure in this context. (Suppressing further errors from this subtree.)
From line 308, column 5; to line 308, column 117
tion>↩    <a href="https://domain/image.JPG" itemprop="contentUrl"></a>↩ 
Contexts in which element a may be used:
Where phrasing content is expected.
Content model for element figure:
Flow content optionally including a figcaption child element.

The reason is that the a is the last child of the figure node. However, the figcaption should either be the first or last node of figure (see here). Moving the a before the figcaption fixes the issue. The gallery still seems to work, but I'm not sure if this is the best fix, because there is this comment:

<!-- put <a> last so it is stacked on top -->

Is this an issue that should be fixed at all?

Cheers, Philipp