feat: use images.AutoOrient in helper/image (#1294)

* feat: use images.AutoOrient in `helper/image`

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/1292

* fix: check if IsImageResourceProcessable before using filter

* remove local field

* feat: add configurable image auto-orientation via a new `autoOrient` parameter in site configuration

assets/scss/partials/article.scss

@@ -71,12 +71,11 @@
     gap: 8px;
 }
 
-.article-footer,
-.article-translations,
-.article-header-tags {
+.article-meta {
     display: flex;
-    color: var(--card-text-color-tertiary);
-    gap: var(--spacing-md);
+    flex-direction: column;
+    gap: var(--spacing-lg);
+    font-size: 1.4rem;
 
     svg {
         vertical-align: middle;
@@ -86,30 +85,22 @@
         flex-shrink: 0;
     }
 
+    &,
     time,
-    a {
+    a,
+    span {
         font-size: 1.4rem;
         color: var(--card-text-color-tertiary);
     }
 
-    & > div {
+    & > .inline-meta {
         display: inline-flex;
+        flex-wrap: wrap;
         align-items: center;
         gap: var(--spacing-md);
     }
 }
 
-.article-time {
-    flex-wrap: wrap;
-}
-
-.article-translations,
-.article-header-tags {
-    & > div {
-        flex-wrap: wrap;
-    }
-}
-
 .article-category,
 .article-tags {
     display: flex;
@@ -172,11 +163,7 @@
                 object-fit: cover;
             }
         }
-
-        .article-footer {
-            font-size: 1.4rem;
-        }
-
+        
         .article-preview {
             font-size: 1.4rem;
             color: var(--card-text-color-tertiary);

assets/scss/partials/layout/article.scss

@@ -45,41 +45,7 @@
 
         .article-footer {
             margin: var(--card-padding);
-            margin-top: 0;
-
-            section:not(:first-child) {
-                margin-top: var(--card-padding);
-            }
-
-            section {
-                color: var(--card-text-color-tertiary);
-                text-transform: uppercase;
-                display: flex;
-                align-items: center;
-                font-size: 1.4rem;
-                gap: 15px;
-
-                svg {
-                    width: 20px;
-                    height: 20px;
-                    stroke-width: 1.33;
-                }
-            }
-
-            .article-tags {
-                text-transform: unset;
-            }
-
-            .article-copyright,
-            .article-lastmod {
-                a {
-                    color: var(--body-text-color);
-                }
-
-                a.link {
-                    box-shadow: unset;
-                }
-            }
+            gap: var(--spacing-2xl);
         }
     }
 }

config/_default/params.toml

@@ -76,6 +76,8 @@ SortBy             = "default"
     default = "auto"
 
 [imageProcessing]
+    autoOrient = false
+
     [imageProcessing.content]
         widths  = [800, 1600, 2400]
         enabled = true

demo/config/_default/params.toml

@@ -13,7 +13,7 @@ favicon        = "img/avatar.png"
 [article]
     [article.license]
         enabled = true
-        default = "Licensed under CC BY-NC-SA 4.0"
+        default = "Licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)"
 
 [widgets]
     homepage = [

layouts/_markup/render-image.html

@@ -1,4 +1,4 @@
-{{- $image := partial "helper/image" (dict "Resources" .Page.Resources "Image" .Destination) -}}
+{{- $image := partial "helper/image" (dict "Resources" .Page.Resources "Image" .Destination "Context" .Page) -}}
 {{- $alt := .PlainText | safeHTML -}}
 {{- $title := .Title | markdownify -}}
 

layouts/_partials/article-list/compact.html

@@ -11,7 +11,7 @@
                 {{- $description = $description | default (T "list.page" (len .Pages)) -}}
             {{- end -}}
             {{- if or $description (not .Date.IsZero) -}}
-                <footer class="article-footer">
+                <footer class="article-meta">
                     {{- if not .Date.IsZero -}}
                         <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
                             {{- .Date | time.Format .Site.Params.dateFormat.published -}}
@@ -23,7 +23,7 @@
             {{- end -}}
         </div>
 
-        {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
+        {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) -}}
         {{ if $image }}
         <div class="article-image">
             {{ partial "helper/thumbnail-image" (dict 

layouts/_partials/article-list/default.html

@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) }}
+{{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) }}
 <article class="{{ if $image }}has-image{{ end }}">
     {{ partial "article/components/header" (dict "Page" . "IsList" true) }}
 </article>

layouts/_partials/article-list/tile.html

@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" (dict "Image" .context.Params.image "Resources" .context.Resources) }}
+{{ $image := partial "helper/image" (dict "Image" .context.Params.image "Resources" .context.Resources "Context" .context) }}
 <article class="{{ if $image }}has-image{{ end }}">
     <a href="{{ .context.RelPermalink }}">
         {{ if $image }}

layouts/_partials/article/components/details.html

@@ -30,48 +30,47 @@
 
     {{ $showReadingTime := $Page.Params.readingTime | default ($Page.Site.Params.article.readingTime) }}
     {{ $showDate := not $Page.Date.IsZero }}
-    {{ $showFooter := or $showDate $showReadingTime }}
-    {{ if $showFooter }}
-    <footer class="article-footer">
-        {{ if $showDate }}
-            <div>
-                {{ partial "helper/icon" "date" }}
-                <time class="article-time--published" datetime='{{ $Page.Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-                    {{- $Page.Date | time.Format $Page.Site.Params.dateFormat.published -}}
-                </time>
+    {{ $showTime := or $showDate $showReadingTime }}
+    {{ $showTranslations := $Page.IsTranslated }}
+    {{ $showTags := and $Page.Site.Params.Article.List.ShowTags ($Page.GetTerms "tags") $IsList }}
+    
+    {{ if or $showTime $showTranslations $showTags }}
+    <footer class="article-meta">
+        {{ if $showTime }}
+            <div class="inline-meta">
+                {{ if $showDate }}
+                    {{ partial "helper/icon" "date" }}
+                    <time class="article-time--published" datetime='{{ $Page.Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+                        {{- $Page.Date | time.Format $Page.Site.Params.dateFormat.published -}}
+                    </time>
+                {{ end }}
+
+                {{ if $showReadingTime }}
+                    {{ partial "helper/icon" "clock" }}
+                    <time class="article-time--reading">
+                        {{ T "article.readingTime" $Page.ReadingTime }}
+                    </time>
+                {{ end }}
             </div>
         {{ end }}
 
-        {{ if $showReadingTime }}
-            <div>
-                {{ partial "helper/icon" "clock" }}
-                <time class="article-time--reading">
-                    {{ T "article.readingTime" $Page.ReadingTime }}
-                </time>
-            </div>
-        {{ end }}
-    </footer>
-    {{ end }}
-
-    {{ if $Page.IsTranslated }}
-        <footer class="article-translations">
-            {{ partial "helper/icon" "language" }}
-            <div>
+        {{ if $showTranslations }}
+            <div class="inline-meta">
+                {{ partial "helper/icon" "language" }}
                 {{ range $Page.Translations }}
                     <a href="{{ .RelPermalink }}" class="link">{{ .Language.LanguageName }}</a>
                 {{ end }}
             </div>
-        </footer>
-    {{ end }}
+        {{ end }}
 
-    {{ if and $Page.Site.Params.Article.List.ShowTags ($Page.GetTerms "tags") $IsList }}
-        <footer class="article-header-tags">
-            {{ partial "helper/icon" "tag" }}
-            <div>
+        {{ if $showTags }}
+            <div class="article-tags inline-meta">
+                {{ partial "helper/icon" "tag" }}
                 {{ range ($Page.GetTerms "tags") }}
                     <a href="{{ .RelPermalink }}" class="link">{{ .LinkTitle }}</a>
                 {{ end }}
             </div>
-        </footer>
+        {{ end }}
+    </footer>
     {{ end }}
 </div>

layouts/_partials/article/components/footer.html

@@ -1,15 +1,15 @@
-<footer class="article-footer">
+<footer class="article-meta article-footer">
     {{ partial "article/components/tags" . }}
 
     {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
-    <section class="article-copyright">
+    <section class="article-copyright inline-meta">
         {{ partial "helper/icon" "copyright" }}
         <span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span>
     </section>
     {{ end }}
 
     {{- if ne .Lastmod .Date -}}
-    <section class="article-lastmod">
+    <section class="article-lastmod inline-meta">
         {{ partial "helper/icon" "clock" }}
         <span>
             {{ T "article.lastUpdatedOn" }} {{ .Lastmod | time.Format .Site.Params.dateFormat.lastUpdated }}

layouts/_partials/article/components/header.html

@@ -1,7 +1,7 @@
 {{- $IsList := .IsList -}}
 {{- $Page := .Page -}}
 <header class="article-header">
-    {{- $image := partial "helper/image" (dict "Image" $Page.Params.image "Resources" $Page.Resources) -}}
+    {{- $image := partial "helper/image" (dict "Image" $Page.Params.image "Resources" $Page.Resources "Context" $Page) -}}
     {{ if $image }}
     <div class="article-image">
         <a href="{{ $Page.RelPermalink }}">

layouts/_partials/article/components/links.html

@@ -6,7 +6,7 @@
                     <h2 class="article-title">
                         {{- $link.title -}}
                     </h2>
-                    <footer class="article-footer">
+                    <footer class="article-meta">
                         {{ with $link.description }}
                             {{ . }}
                         {{ else }}
@@ -15,7 +15,7 @@
                     </footer>
                 </div>
 
-                {{- $image := partial "helper/image" (dict "Image" $link.image "Resources" $.Resources) -}}
+                {{- $image := partial "helper/image" (dict "Image" $link.image "Resources" $.Resources "Context" .) -}}
                 {{- with $image -}}
                     <div class="article-image">
                        {{ partial "helper/thumbnail-image" (dict 

layouts/_partials/head/head.html

@@ -23,7 +23,7 @@
     <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
 {{- end -}}
 
-{{- $favicon := partial "helper/image" (dict "Image" .Site.Params.favicon "Resources" resources) -}}
+{{- $favicon := partial "helper/image" (dict "Image" .Site.Params.favicon "Resources" resources "Context" .) -}}
 {{ with $favicon }}
     <link rel="shortcut icon" href="{{ .Permalink }}" />
 {{ end }}

layouts/_partials/head/opengraph/provider/base.html

@@ -37,7 +37,7 @@
     {{- end -}}
 {{- end -}}
 
-{{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) }}
+{{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) }}
 {{- if $image -}}
     <meta property='og:image' content='{{ absURL $image.permalink }}' />
 {{- end -}}

layouts/_partials/head/opengraph/provider/twitter.html

@@ -9,7 +9,7 @@
 <meta name="twitter:title" {{ printf "content=%q" $title | safeHTMLAttr }}>
 <meta name="twitter:description" {{ printf "content=%q" $description | safeHTMLAttr }}>
 
-{{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
+{{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) -}}
 {{- if $image -}}
     <meta name="twitter:card" content="{{ .Site.Params.opengraph.twitter.card }}">
     <meta name="twitter:image" content='{{ absURL $image.permalink }}' />

layouts/_partials/helper/image.html

@@ -1,6 +1,7 @@
 /// Params:
 ///     Resources: Where to search for images
 ///     Image: Image URL
+///     Context: page context (used to access the configuration)
 
 /// Returns:
 ///     Resource: Hugo image resource object
@@ -14,6 +15,7 @@
     {{ $url := urls.Parse .Image }}
     {{ $permalink := .Image }}
     {{ $resource := "" }}
+    {{ $local := true }}
 
     {{ if not (in (slice "https" "http") $url.Scheme) }}
         {{/* Local image */}}
@@ -26,14 +28,23 @@
                 {{ errorf "%s" . }}
             {{ else with .Value }}
                 {{ $resource = . }}
+                {{ $local = false }}
             {{ else }}
                 {{ errorf "Unable to get remote resource %q" $url }}
             {{ end }}
         {{ end }}   
     {{ end }}
 
-    {{ with $resource }}
-        {{ if reflect.IsImageResourceWithMeta . }}
+    {{ if $resource }}
+        {{ if and .Context.Site.Params.imageProcessing.autoOrient (reflect.IsImageResourceProcessable $resource) }}
+            {{ $filter := images.AutoOrient }}
+            {{ $resource = $resource | images.Filter $filter }}
+            {{ if $local }}
+                {{ $permalink = $resource.RelPermalink }}
+            {{ end }}
+        {{ end }}
+        
+        {{ if reflect.IsImageResourceWithMeta $resource }}
             {{ $result = dict
                 "Resource" $resource
                 "Permalink" $permalink

layouts/_partials/sidebar/left.html

@@ -7,7 +7,7 @@
 
     <header>
         {{ with .Site.Params.sidebar.avatar }}
-            {{- $avatar := partial "helper/image" (dict "Image" . "Resources" resources) -}}
+            {{- $avatar := partial "helper/image" (dict "Image" . "Resources" resources "Context" $) -}}
             <figure class="site-avatar">
                 <a href="{{ $.Site.Home.RelPermalink }}">
                     <img src="{{ $avatar.Permalink }}" 

layouts/list.html

@@ -17,7 +17,7 @@
                 {{ end }}
             </div>
     
-            {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
+            {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) -}}
             {{ if $image }}
                 <div class="section-image">
                     {{ partial "helper/thumbnail-image" (dict 

layouts/page/search.json

@@ -4,7 +4,7 @@
 {{- range $pages -}}
     {{- $data := dict "title" .Title "date" .Date "permalink" .RelPermalink "content" (.Plain) -}}
 
-    {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
+    {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) -}}
     {{- if $image -}}
         {{- $data = merge $data (dict "image" $image.Permalink) -}}
     {{- end -}}

layouts/rss.xml

@@ -50,7 +50,7 @@
                 {{- if .Site.Params.RSSFullContent -}}
                     {{- $content = .Content -}}
                 {{- end -}}
-                {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
+                {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) -}}
                 {{- if $image -}}
                     {{- $imgTag := printf "<img src=\"%s\" alt=\"Featured image of post %s\" />" ($image.permalink | absURL) .Title -}}
                     {{- $content = printf "%s%s" $imgTag $content -}}