How to best store image annotations?

support
1

Hi there,

I want to generate a photo gallery from a bunch of images, and I want to add descriptions via alt & title HTML attributes:
https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element

What I am confused about is the best place to store this metadata. Ideally I would store the title/descriptions in the image itself. However I think that’s not consistent between image formats like PNG/JPEG.

So how do I best markup in Hugo, so that a {{ with .Resources.ByType "image" }} loop can fill in the alt/titles attributes with this information?

Thank you in advance,

2

something from this?

3

Ctrl+f “alt” has no results. Can’t see on this documentation how to store metadata.

I’m not talking about Exif, as I don’t think it’s a viable approach, as I generally mix JPEG & PNGs for example.

4

You’ll be completely out of luck with PNG. Given the limitations of that format, I’d suggest to go with JPEG. In a perfect world, you would just store the data in the IPTC part of that and you’d be done.

Unfortunately, Hugo does not (yet?) support IPTC but only EXIF. So I resorted to put the title of my images into the “ImageDescription” field of EXIF, something like this:

 {{ title := "" }}
 {{- with .image -}}
    {{- with .Exif -}}
    {{- if .Tags.ImageDescription -}}
    {{/* ImageDescription can consist of blanks only - remove those */}}
        {{- $title = replaceRE "^ +$" "" .Tags.ImageDescription -}}
      {{end}}
    {{ end }}

As to the alt text … well, you could either just use the title for that as well. Or take the file name (provided it is something sensible, not 12345.jpg).

Currently, Hugo experts tend to suggest that you store this kind of meta data in the front matter of your page. I do not find that particularly enticing since it means replication of data and goes against DRY. Also, I prefer to simply dump images into a folder and not bother about their names etc, just use Resources.ByType to deal with them. No need to touch the frontmatter and enter image names/meta data there, if it’s already there (i.e. either in the filesystem or in the images themselves).

Also, I’d suggest to extract all the meta data you need from the jpegs and then transform them to webp for display. Smaller, thus faster.

5

For images such as diagrams, charts and logos, PNGs are often significantly smaller than JPEGs.
PNGs support transparency (32-bit). JPEGs do not.
PNGs support EXIF tags, just like JPEG.

There’s a stale issue and corresponding PR to replace the current EXIF library with something that is maintained. Once this is complete, it might make sense to revisit EXIF support for both PNG and WebP.

Options:

  1. Use the EXIF ImageDescription tag (currently limited by Hugo to JPEG/TIFF)
  2. Page Resources Metadata. This approach allows you store multiple values for each image (e.g, alt, title, caption).
  3. Create a data file (JSON/YAML/TOML) with the image path as the key.
6

Agreed, but the op was talking about a photo gallery. That’s what I was referring to.