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 (push) Successful in 1m14s
Details
/ accessibility (push) Successful in 2m7s
Details

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

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 -}}
{{- else -}}
{{- /* Square thumbnails at two sizes, never larger than the image itself. */ -}}
{{- $side := math.Min 800 $image.Width $image.Height | int -}}
{{- $small := $image.Fill (printf "%dx%d Smart" (div $side 2) (div $side 2)) -}}
{{- $large := $image.Fill (printf "%dx%d Smart" $side $side) -}}
{{- /* Turned as its EXIF orientation says (phone photos are often stored sideways); browsers do
that for the original, but Hugo doesn't when it resizes. */ -}}
{{- $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">
<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">
<span class="visually-hidden"> ({{ i18n "gallery_enlarge" }})</span>
</a>