CCCHH/hackertours
Watch
2
1
Fork
You've already forked hackertours
 3
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix orientation of thumbnails
All checks were successful
/ build (pull_request) Successful in 1m38s
Details
/ accessibility (pull_request) Successful in 2m49s
Details

Browse source
This commit is contained in:
Stefan Bethke 2026-10-17 10:55:54 +02:00
commit f6a698a64b
3 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

7
layouts/_markup/render-image.html
View file

@ -9,8 +9,11 @@ An image on its own line becomes a figure; images sharing a paragraph get an inl
{{- with or (.PageInner.Resources.Get (strings.TrimPrefix "./" .Destination)) (resources.Get .Destination) -}} {{- with or (.PageInner.Resources.Get (strings.TrimPrefix "./" .Destination)) (resources.Get .Destination) -}}
{{- $src = .RelPermalink -}} {{- $src = .RelPermalink -}}
{{- if and (eq .ResourceType "image") (ne .MediaType.SubType "svg") -}} {{- if and (eq .ResourceType "image") (ne .MediaType.SubType "svg") -}}
{{- $width = .Width -}} {{- /* Width and height as the browser shows the image, i.e. turned as its EXIF orientation
{{- $height = .Height -}} says (only JPEG and TIFF carry one). */ -}}
{{- $shown := cond (in (slice "jpeg" "tiff") .MediaType.SubType) (.Filter images.AutoOrient) . -}}
{{- $width = $shown.Width -}}
{{- $height = $shown.Height -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
{{- /* A title that only repeats the alt text is not a credit. */ -}} {{- /* A title that only repeats the alt text is not a credit. */ -}}

4
layouts/_partials/head/extra.html
View file

@ -27,7 +27,9 @@ og:image:alt.
{{- with $resource -}} {{- with $resource -}}
{{- $image := . -}} {{- $image := . -}}
{{- if and (eq .ResourceType "image") (ne .MediaType.SubType "svg") -}} {{- if and (eq .ResourceType "image") (ne .MediaType.SubType "svg") -}}
{{- if gt .Width 1200 }}{{ $image = .Resize "1200x" }}{{ end -}} {{- /* Turned as its EXIF orientation says; Hugo doesn't do that when it resizes. */ -}}
{{- $image = .Filter images.AutoOrient -}}
{{- if gt $image.Width 1200 }}{{ $image = $image.Resize "1200x" }}{{ end -}}
{{- $width = $image.Width -}} {{- $width = $image.Width -}}
{{- $height = $image.Height -}} {{- $height = $image.Height -}}
{{- end -}} {{- end -}}

11
layouts/_shortcodes/gallery-image.html
View file

@ -20,12 +20,15 @@ One image in a gallery, see gallery.html. Params:
{{- errorf "gallery-image: %q is not a photo Hugo can resize: %s" $src .Position -}} {{- errorf "gallery-image: %q is not a photo Hugo can resize: %s" $src .Position -}}
{{- else -}} {{- else -}}
{{- /* Square thumbnails at two sizes, never larger than the image itself. */ -}} {{- /* Square thumbnails at two sizes, never larger than the image itself. */ -}}
{{- $side := math.Min 800 $image.Width $image.Height | int -}} {{- /* Turned as its EXIF orientation says (phone photos are often stored sideways); browsers do
{{- $small := $image.Fill (printf "%dx%d Smart" (div $side 2) (div $side 2)) -}} that for the original, but Hugo doesn't when it resizes. */ -}}
{{- $large := $image.Fill (printf "%dx%d Smart" $side $side) -}} {{- $oriented := $image.Filter images.AutoOrient -}}
{{- $side := math.Min 800 $oriented.Width $oriented.Height | int -}}
{{- $small := $oriented.Fill (printf "%dx%d Smart" (div $side 2) (div $side 2)) -}}
{{- $large := $oriented.Fill (printf "%dx%d Smart" $side $side) -}}
<li class="gallery__item"> <li class="gallery__item">
<figure class="gallery__figure"> <figure class="gallery__figure">
<a class="gallery__link" href="{{ $image.RelPermalink }}" data-width="{{ $image.Width }}" data-height="{{ $image.Height }}" data-alt="{{ $alt }}"{{ with $credit }} data-credit="{{ . }}"{{ end }}> <a class="gallery__link" href="{{ $image.RelPermalink }}" data-width="{{ $oriented.Width }}" data-height="{{ $oriented.Height }}" data-alt="{{ $alt }}"{{ with $credit }} data-credit="{{ . }}"{{ end }}>
<img src="{{ $large.RelPermalink }}" srcset="{{ $small.RelPermalink }} {{ $small.Width }}w, {{ $large.RelPermalink }} {{ $large.Width }}w" sizes="(min-width: 48rem) 34rem, 100vw" width="{{ $large.Width }}" height="{{ $large.Height }}" alt="{{ $alt }}" loading="lazy" decoding="async"> <img src="{{ $large.RelPermalink }}" srcset="{{ $small.RelPermalink }} {{ $small.Width }}w, {{ $large.RelPermalink }} {{ $large.Width }}w" sizes="(min-width: 48rem) 34rem, 100vw" width="{{ $large.Width }}" height="{{ $large.Height }}" alt="{{ $alt }}" loading="lazy" decoding="async">
<span class="visually-hidden"> ({{ i18n "gallery_enlarge" }})</span> <span class="visually-hidden"> ({{ i18n "gallery_enlarge" }})</span>
</a> </a>