search

nicokaiser / hugo-theme-gallery

Gallery Theme for Hugo
https://nicokaiser.github.io/hugo-theme-gallery/
MIT License
354 stars 103 forks source link

Feature Request: Metadata Info Bar #77

Open timcappalli opened 2 months ago

timcappalli commented 2 months ago

It would be awesome to have an option to display the photo metadata (Camera, exposure, aperture, focal length, etc) underneath the title/description text when the photo is expanded.

Here's an example:

image

Thanks for all your work on this awesome theme!

timcappalli commented 2 months ago

I actually figured out how to do this with the native EXIF parser. If you're accepting pull requests, happy to add it! I'm thinking it can be behind a config flag.

nicokaiser commented 2 months ago

You could add a section to gallery.html, inside the gallery-item tag:

        <a class="gallery-item" href="{{ $image.RelPermalink }}" data-pswp-src="{{ $full.RelPermalink }}" data-pswp-width="{{ $full.Width }}" data-pswp-height="{{ $full.Height }}" title="{{ .Title }}" itemscope itemtype="https://schema.org/ImageObject" style="aspect-ratio: {{ $thumbnail.Width }} / {{ $thumbnail.Height }}">
          <img loading="lazy" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" src="{{ $thumbnail.RelPermalink }}" style="background-color: {{ $color }}" alt="{{ .Title }}" />
+         {{ if $image.Exif }}
+           <span class="pswp-caption-content">
+             {{ with .Title }}{{ . }}<br />{{ end }}
+             {{ with $image.Exif.Tags }}
+               {{ if .Model }}
+                 {{ .Make }} {{ .Model }} &middot;
+               {{ end }}
+               {{ with .FocalLength }}{{ . }}mm &middot; {{ end }}
+               {{ with .ApertureValue }}f/{{ div (math.Round (mul (float .) 10)) 10 }}{{ end }}
+               {{ with .ExposureTime }}{{ . }}s &middot; {{ end }}
+               {{ with .ISO }}ISO {{ . }}{{ end }}
+             {{ end }}
+           </span>
+         {{ end }}
          <meta itemprop="contentUrl" content="{{ $image.RelPermalink }}" />
          {{ with site.Params.Author }}
            <span itemprop="creator" itemtype="https://schema.org/Person" itemscope>
              <meta itemprop="name" content="{{ site.Params.Author.name }}" />
            </span>
          {{ end }}
        </a>

… and remove the includeFields line from hugo.toml so all EXIF tags are extracted.

timcappalli commented 2 months ago

Thank you! That is perfect!

Do you know if its possible to include a link in the caption? Whenever I add an <a> </a> tag, nothing from that tag on renders. I assume it is because the caption is part of an <a> tag itself and the engine doesn't know how to deal with it. I tried to do it in a partial but same result.

Essentially I'm trying to add a Google Maps link based on the GPS data:

{{ with $image.Exif.Long }}
    &middot; <a href="https://www.google.com/maps/place/{{ $image.Exif.Lat }},{{ $image.Exif.Long }}">Map</a>
{{ end }}
inkhey commented 2 months ago

Thank you! That is perfect!

Do you know if its possible to include a link in the caption? Whenever I add an <a> </a> tag, nothing from that tag on renders. I assume it is because the caption is part of an <a> tag itself and the engine doesn't know how to deal with it. I tried to do it in a partial but same result.

Essentially I'm trying to add a Google Maps link based on the GPS data:

{{ with $image.Exif.Long }}
    &middot; <a href="https://www.google.com/maps/place/{{ $image.Exif.Lat }},{{ $image.Exif.Long }}">Map</a>
{{ end }}

it's an issue with the gallery lightbox configuration, to make it work there are at least 2 requirements:

I made a POC for this, because i wanted to share a local video link from params to the caption: https://github.com/nicokaiser/hugo-theme-gallery/commit/77bf36eafadf771f09abe7b47db83403a2163d15

I don't see others issue with the fix but maybe it broke something else.

PS: The poc also synchronize title attribute value (visible on overlay) of the link/image and the caption, but of course, link in the title cannot be used.