Image galleries based on "tags" stored in data file

support
1

I’d appreciate a pointer on how I could achieve the following:

Image galleries generated from a ‘tag’ specified in a shortcode / page frontmatter.

[This is trying to replicate the WP Media Tags and Tag Gallery plugins to generate the gallery based on the media tag set]

e.g., I have a series of images that can be classified according to their content / theme / etc. I have this in a format that I can convert to JSON.

/path/to/interesting_image.jpg   tag1,tag2
/path/to/interesting_image2.jpg   tag3,tag1

I’d like to be able to create a post/page for each ‘tag’ and have the images displayed in a gallery on that page, with the images processed/resized etc etc using Hugo’s capabilities.

From extensive reading I think I can create a custom taxonomy, set these in data file, then read in the appropriate paths in a loop.

Am I on the right path?

Thanks for any tips.

2

You can apply taxonomy terms to content pages, but not to assets/resources. With a limited number of tags, you could “stub out” a content page for each tag, then assign a layout that will range through your data files.

But this obviously falls apart with a large number of image tags, or if new image tags will be created frequently. There are a couple of ways to handle this:

  1. Create pages from data using the “prebuild” method
  2. Create pages from data using resources.FromString and/or resources.ExecuteAsTemplate

Edit…

I may have misunderstood your question. I thought you wanted to “automatically” create pages for each tag, but reading again it sounds like you’d be open to manually creating each page. Please clarify.

3

There’s also sort of a hybrid approach here. Term pages are automatically created for each term applied to content. We could have one stub page (a section page or regular page not listed anywhere) with a front matter field that contains all of the tags you use with images, e.g.,

content/something/_index.md

+++
title = 'something'
imageTags = ['a','b','c','d','e',...]
+++

Then create one template (term page) specifically for images with tags.

4

Thanks Joe, you’ve provoked further thought on this. I wrote the below just before I read your 2nd post.

Thanks to the wayback machine, I can show the site I’m trying to recreate / replicate:

https://web.archive.org/web/20161014230851/http://www.atwpenn.com/category/galleries/

I simplified my description somewhat initially, seeking a more ‘Hugo’ way of doing things.

Describing the flow in Wordpress: the ‘way in’ to each top level gallery is via a set of ‘media tags’. Each ‘media tag’ (category in Hugo?) has a page generated, can have a description and has a featured image, with the list of thumbnails of other images with that tag displayed. Each image then has a page with further info (but interestingly doesn’t include the other tags attached to the image). Each image may have more than one tag.

Perhaps the way to do this is to process my SQL dump from wordpress, generate a basic JSON file of all the info I want, then generate a set of pages, one for each image, with the extra info such as the tag included as appropriate.

5

With the hybrid model you wouldn’t have to generate the pages… you let Hugo do that for you. Rough example:

git clone --single-branch -b hugo-forum-topic-47811 https://github.com/jmooring/hugo-testing hugo-forum-topic-47811
cd hugo-forum-topic-47811
hugo server

The only “trick” here is the content home page:

content/_index.md

+++
# List all image tags below. See https://discourse.gohugo.io/t/47811/3.
galleries = ['tag1','tag2','tag3']
+++
1 Like
6

Brilliant Joe. I think you’ve set me in motion.

So I could pull through further fields from the data file to be displayed when, e.g., the image is clicked - using some JS perhaps? Taking a shortcut by taking an existing gallery partial and placing the code in the term.html layout.

Thanks again.

Tristan

7

Yes. You could also have two data files: one for images (with tags, caption, alt tag, path), and another for each gallery (markdown describing the gallery, link to cover image, etc.).

1 Like
8

I’ve a bit of SQL wrangling to do to get the old data out in a suitable format, but I can see the path ahead more clearly now. If you don’t mind I’ll use your cloned repo as a starting point - forgetting about style for the moment and getting the data form and function right.

1 Like