Use page resources

[EmielH]

Hi! Thanks a lot for this shortcode, it's very useful!

I did a complete overhaul to make use of Hugo Page Resources which makes ranging over files to make a gallery a lot easier.

The gallery shortcode can now also create thumbnails on the fly, with a configurable thumbnail size, for example: {{< gallery dir="/img/your-directory-of-images/" thumbnail-size="150x150" />}}. The parameter for thumbnail size is not mandatory: the shortcode defaults to 300x300.

I'm already using this updated version on my site, except for the configurable thumbnail size, which I added today.

I would also be willing to help maintain this project. Let me know if you would like my help!

[liwenyip]

Hi @EmielH

Thanks so much for your contribution and offer to help maintain the project; I really appreciate it.

I wasn't aware of Hugo's new Page Resources feature (yes it's been that long since I have worked on this project), but having briefly read about it, I can see it greatly simplifies things for hugo-easy-gallery and I'm keen to adopt it.

This is a fairly big change that affects the way hugo-easy-gallery works, so we need to check whether it breaks any existing functionality, and we need to make sure that the readme docs are updated.

It looks like the proposed change removes or changes some existing features:

• create a gallery from an arbitrary folder of images in static (using the dir parameter)
• create more than one gallery on the same page (using the dir parameter)
• create a gallery of the same images on different pages, without having to make multiple copies of the images (using the dir parameter)
• create a gallery with a list of specific image files (using figure shortcodes inside a gallery shortcode)
• set custom captions and attribution info (using figure shortcodes inside a gallery shortcode)
• humanise the filename (if generating caption from filename)
• use a user-generated thumbnail

Some of these features are worth keeping; some are not; some are possible to re-implement using page resources; some are not.

For now, I suggest the best thing to do is keep all the old code, and use the page resources method only if no dir parameter is specified and there are no figure shortcodes nested inside the gallery.

e.g.

{{- with (.Get "dir") -}}
  <-- old code -->
{{- else with .Inner -}}
  {{ .Inner }} <-- nested figure shortcodes -->
{{- else -}}
  <-- new code, using page resources -->
{{- end -}}

I can't remember if the else with syntax works in Hugo/Golang, but you get the idea.

The Readme docs need to be updated with details of:

• what happens if you don't specify a dir parameter, and usage examples
• how to put images into a page bundle
• how to set image captions, attribution info, and other metadata, using page front matter

Some other features that may be worth implementing:

• ability to create a gallery from a subset of the images in the page bundle (this would also enable multiple galleries per page)
• update the standalone figure shortcode to also use page resources

Thanks again, this is a great contribution :-)

Li-Wen

[EmielH]

Hi @liwenyip, thank you for your very extensive review. It would appear that, in the process of making the shortcode work with page resources, I broke everything else... 😓 I was quite happy with the simplification of hugo-easy-gallery when using page resources, but there should of course be backwards compatibility, at least at first.

For now, I suggest the best thing to do is keep all the old code, and use the page resources method only if no dir parameter is specified and there are no figure shortcodes nested inside the gallery.

👍 I will make the necessary changes and commit these to the branch.

[liwenyip]

Hey @EmielH

No worries, and please don't take my comments as criticism - it was more me thinking aloud whilst trying to remember how my own code works (I haven't looked at this for well over a year) and trying to make a list of things that we should try to re-implement using page resources :-)

Thanks again,
Li-Wen

[EmielH]

Hi @liwenyip, no problem, I wasn't offended! I agree that a lot of additional functionality could be added using page resources. 👍

I just pushed a commit that restores the original functionality. Two remarks:

If you want to use page resources, the shortcode should be included as a self-closing tag: {{< gallery />}}. When using {{< gallery >}} on its own, even without a closing tag, Hugo populates .Inner and the shortcode will try to show that.

{{ else with .Inner }} doesn't work, so I had to introduce an additional level of nesting.

I haven't updated the readme yet. Unfortunately, I do not have test cases yet to check whether the original functionality still works. I only tested the page resources part for now.

[ex-nerd]

Does this need any more testing? I've just started integrating easy-gallery into my site and it looks like there's a lot of new stuff in Hugo (including image processing that could be used to dynamically generate thumbnails) that could go in once this plugin is upgraded further.

[EmielH]

@ex-nerd It does! I tried to incorporate the new stuff you mention into this PR. Possibly, more things have changed since then and this plugin could be improved even further; I haven't looked at the code anymore since my last commit in April.

[guites]

In order to more closely reproduce the default behaviour, I've added

{{- $caption :=  .Title | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->

here, so that I could use it in both line 50 (changing alt="{{.Title}}" to alt="{{ $caption }}"

and in line 54, using <p>{{ $caption }}</p> instead of <p>{{ . }}</p>.

Other than that, its working fine. Thanks!!