Fix orientation of thumbnails

(cherry picked from commit f6a698a64b)

layouts/_markup/render-image.html

@@ -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) -}}
   {{- $src = .RelPermalink -}}
   {{- if and (eq .ResourceType "image") (ne .MediaType.SubType "svg") -}}
-    {{- $width = .Width -}}
-    {{- $height = .Height -}}
+    {{- /* Width and height as the browser shows the image, i.e. turned as its EXIF orientation
+    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 -}}
 {{- /* A title that only repeats the alt text is not a credit. */ -}}

layouts/_partials/head/extra.html

@@ -27,7 +27,9 @@ og:image:alt.
     {{- with $resource -}}
       {{- $image := . -}}
       {{- 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 -}}
         {{- $height = $image.Height -}}
       {{- end -}}

layouts/_shortcodes/gallery-image.html

@@ -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>