Merge a15820cb37 into 7a9020b52f

feat: picture partial

CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Warning when building if links to markdown files cannot be resolved ([#691](https://github.com/jpanther/congo/pull/691))
 
+### Changed
+
+- Refactored image logic into a new `picture.html` partial ([#693](https://github.com/jpanther/congo/pull/693))
+
 ### Removed
 
 - Fathom Analytics custom domain parameter as this is no longer supported by Fathom

config/_default/languages.en.toml

@@ -12,7 +12,7 @@ title = "Congo"
   # mainSections = ["section1", "section2"]
   # description = "My awesome website"
 
-[author]
+[params.author]
   # name = "Your name here"
   # image = "img/author.jpg"
   # headline = "I'm only human"

config/_default/params.toml

@@ -12,6 +12,7 @@ autoSwitchAppearance = true
 enableSearch = false
 enableCodeCopy = false
 enableImageLazyLoading = true
+enableImageWebp = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

exampleSite/config/_default/languages.de.toml

@@ -12,7 +12,7 @@ copyright = "© 2023 Congo contributors"
   mainSections = ["samples"]
   description = "Ein leistungsstarkes, leichtgewichtiges Theme für Hugo, das mit Tailwind CSS erstellt wurde."
 
-[author]
+[params.author]
   name = "Congo"
   image = "img/author.jpg"
   headline = "Nicht dein Durschnitts-Theme!"

exampleSite/config/_default/languages.en.toml

@@ -12,7 +12,7 @@ copyright = "© 2023 Congo contributors"
   mainSections = ["samples"]
   description = "A powerful, lightweight theme for Hugo built with Tailwind CSS."
 
-[author]
+[params.author]
   name = "Congo"
   image = "img/author.jpg"
   headline = "Not your ordinary theme!"

exampleSite/config/_default/languages.es.toml

@@ -12,7 +12,7 @@ copyright = "© 2023 Congo contributors"
   mainSections = ["samples"]
   description = "Un tema poderoso y liviano para Hugo creado con Tailwind CSS."
 
-[author]
+[params.author]
   name = "Congo"
   image = "img/author.jpg"
   headline = "¡No es tu tema ordinario!"

exampleSite/config/_default/languages.ja.toml

@@ -12,7 +12,7 @@ copyright = "© 2023 Congo contributors"
   mainSections = ["samples"]
   description = "Tailwind CSSをベースに開発された強力で軽量なHugo向けテーマ"
 
-[author]
+[params.author]
   name = "Congo"
   image = "img/author.jpg"
   headline = "ただならぬテーマ!"

exampleSite/config/_default/params.toml

@@ -12,6 +12,7 @@ autoSwitchAppearance = true
 enableSearch = true
 enableCodeCopy = true
 enableImageLazyLoading = true
+enableImageWebp = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

exampleSite/content/docs/configuration/index.ja.md

@@ -100,11 +100,11 @@ Congoは現在、以下の言語に対応しています:
 |`params.dateFormat`|`"2 January 2006"`|日付の書式。許容される書式については、[Hugo docs](https://gohugo.io/functions/format/#gos-layout-string)を参照してください。|
 |`params.mainSections`|_Not set_|最近の記事リストに表示するセクション。指定されていない場合は、記事の数が最も多いセクションが使われます。|
 |`params.description`|_Not set_|ウェブサイトの説明。これはサイトのメタデータに使用されます。|
-|`author.name`|_Not set_|著者の名前。これは記事のフッターと、プロフィールレイアウトが使用されている場合にホームページに表示されます。|
+|`params.author.name`|_Not set_|著者の名前。これは記事のフッターと、プロフィールレイアウトが使用されている場合にホームページに表示されます。|
-|`author.image`|_Not set_|著者の画像ファイルへのパス。画像は縦横比1:1で、 `assets/` に置くこと。|
+|`params.author.image`|_Not set_|著者の画像ファイルへのパス。画像は縦横比1:1で、 `assets/` に置くこと。|
-|`author.headline`|_Not set_|著者の見出しを含むMarkdown文字列。プロフィールのトップページで著者の名前の下に表示されます。|
+|`params.author.headline`|_Not set_|著者の見出しを含むMarkdown文字列。プロフィールのトップページで著者の名前の下に表示されます。|
-|`author.bio`|_Not set_|著者の経歴を含むMarkdown文字列。記事のフッターに表示されます。|
+|`params.author.bio`|_Not set_|著者の経歴を含むMarkdown文字列。記事のフッターに表示されます。|
-|`author.links`|_Not set_|著者の詳細とともに表示するリンク。設定ファイルにはリンクの例が含まれており、コメントを外すだけで有効にすることができます。リンクが表示される順番は、配列に表示される順番によって決まります。 `assets/icons/` に対応するSVGアイコンを用意することで、カスタムリンクを追加することもできます。|
+|`params.author.links`|_Not set_|著者の詳細とともに表示するリンク。設定ファイルにはリンクの例が含まれており、コメントを外すだけで有効にすることができます。リンクが表示される順番は、配列に表示される順番によって決まります。 `assets/icons/` に対応するSVGアイコンを用意することで、カスタムリンクを追加することもできます。|
 <!-- prettier-ignore-end -->
 
 ### メニュー

exampleSite/content/docs/configuration/index.md

@@ -100,11 +100,11 @@ The default file can be used as a template to create additional languages, or re
 |`params.dateFormat`|`"2 January 2006"`|How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.|
 |`params.mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
 |`params.description`|_Not set_|The website description. This will be used in the site metadata.|
-|`author.name`|_Not set_|The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.|
+|`params.author.name`|_Not set_|The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.|
-|`author.image`|_Not set_|Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site's `assets/` folder.|
+|`params.author.image`|_Not set_|Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site's `assets/` folder.|
-|`author.headline`|_Not set_|A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.|
+|`params.author.headline`|_Not set_|A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.|
-|`author.bio`|_Not set_|A Markdown string containing the author's bio. It will be displayed in article footers.|
+|`params.author.bio`|_Not set_|A Markdown string containing the author's bio. It will be displayed in article footers.|
-|`author.links`|_Not set_|The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`.|
+|`params.author.links`|_Not set_|The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`.|
 <!-- prettier-ignore-end -->
 
 ### Menus

exampleSite/content/docs/getting-started/index.ja.md

@@ -38,7 +38,7 @@ languageCode = "en"
 
 title = "My awesome website"
 
-[author]
+[params.author]
 name = "My name"
 image = "img/author.jpg"
 headline = "A generally awesome human"
@@ -48,7 +48,7 @@ links = [
 ]
 ```
 
-`[author]` はウェブサイト上でどのように著者情報を表示するかを決定します。画像はサイトの `assets/` に置きましょう。リンクはリストの記述順に沿って表示されます。
+`[params.author]` はウェブサイト上でどのように著者情報を表示するかを決定します。画像はサイトの `assets/` に置きましょう。リンクはリストの記述順に沿って表示されます。
 
 各設定に関する詳細情報は、[設定]({{< ref "configuration" >}})セクションで説明されています。
 

exampleSite/content/docs/getting-started/index.md

@@ -38,7 +38,7 @@ The language code in the language config filename should match the `languageCode
 
 title = "My awesome website"
 
-[author]
+[params.author]
 name = "My name"
 image = "img/author.jpg"
 headline = "A generally awesome human"
@@ -48,7 +48,7 @@ links = [
 ]
 ```
 
-The `[author]` configuration determines how the author information is displayed on the website. The image should be placed in the site's `assets/` folder. Links will be displayed in the order they are listed.
+The `[params.author]` configuration determines how the author information is displayed on the website. The image should be placed in the site's `assets/` folder. Links will be displayed in the order they are listed.
 
 If you need extra detail, further information about each of these configuration options, is covered in the [Configuration]({{< ref "configuration" >}}) section.
 

layouts/_default/_markup/render-image.html

@@ -1,64 +1,28 @@
 {{ $url := urls.Parse .Destination }}
 {{ $altText := .Text }}
 {{ $caption := .Title }}
-{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $class := "mx-auto my-0 rounded-md" }}
-{{ if findRE "^https?" $url.Scheme }}
+
-  <figure>
+{{ $file := $url.Path }}
-    <img
+{{ $img := .Page.Resources.GetMatch $file }}
-      class="mx-auto my-0 rounded-md"
+{{- if and (not $img) .Page.File }}
-      src="{{ $url.String }}"
+    {{ $path := path.Join .Page.File.Dir $file }}
-      alt="{{ $altText }}" 
+    {{ $img = resources.Get $path }}
-      {{ if $lazyLoad }}
+{{ end -}}
-        loading="lazy"
+
-      {{ end }}
+{{/* https://github.com/gohugoio/hugo/pull/10666 */}}
-    />
+{{- $params := $url.Query -}}
-    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
+{{- $x2Param := $params.Get "2x" -}}
-  </figure>
+{{- $x2 := false -}}
-{{ else }}
+{{- if eq $x2Param "true" -}}
-  {{ $resource := "" }}
+    {{- $x2 = true  -}}
-  {{ if $.Page.Resources.GetMatch ($url.String) }}
+{{- end -}}
-    {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
+
-  {{ else if resources.GetMatch ($url.String) }}
+<figure>
-    {{ $resource = resources.Get ($url.String) }}
+  {{- with $img -}}
-  {{ end }}
+    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }}
-  {{ with $resource }}
+  {{- else -}}
-    <figure>
+    <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/>
-      <img
+  {{- end -}}
-        class="mx-auto my-0 rounded-md"
+  {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-        {{ if eq .MediaType.SubType "svg" }}
+</figure>
-          src="{{ .RelPermalink }}"
-        {{ else }}
-          width="{{ .Width }}"
-          height="{{ .Height }}"
-          {{ if lt .Width 660 }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            srcset="
-            {{- (.Resize "330x").RelPermalink }} 330w,
-            {{- (.Resize "660x").RelPermalink }} 660w,
-            {{- (.Resize "1024x").RelPermalink }} 1024w,
-            {{- (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
-          {{ end }}
-        {{ end }}
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ else }}
-    <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        src="{{ $url.String }}"
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ end }}
-{{ end }}

layouts/_default/single.html

@@ -15,25 +15,9 @@
       </div>
       {{ with $feature }}
         <div class="prose">
-          <img
+          {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
-            class="mb-6 -mt-4 rounded-md"
+          {{ $class := "mb-6 -mt-4 rounded-md" }}
-            {{ if eq .MediaType.SubType "svg" }}
+          {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              width="{{ .Width }}"
-              height="{{ .Height }}"
-              {{ if lt .Width 660 }}
-                src="{{ .RelPermalink }}"
-              {{ else }}
-                srcset="
-                {{- (.Resize "330x").RelPermalink }} 330w,
-                {{- (.Resize "660x").RelPermalink }} 660w,
-                {{- (.Resize "1024x").RelPermalink }} 1024w,
-                {{- (.Resize "1320x").RelPermalink }} 2x"
-              {{ end }}
-            {{ end }}
-            alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
-          />
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
           {{ end }}

layouts/partials/author-links.html

@@ -1,4 +1,4 @@
-{{ with .Site.Author.links }}
+{{ with .Site.Language.Params.Author.links }}
   <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
     {{ range $links := . }}
       {{ range $name, $url := $links }}

layouts/partials/author.html

@@ -1,6 +1,6 @@
 {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
   <div class="flex">
-    {{ with .Site.Author.image }}
+    {{ with .Site.Language.Params.Author.image }}
       {{ $authorImage := resources.Get . }}
       {{ if $authorImage }}
         {{ $authorImage := $authorImage.Fill "192x192 Center" }}
@@ -8,7 +8,7 @@
           class="!mb-0 !mt-0 me-4 h-24 w-24 rounded-full"
           width="96"
           height="96"
-          alt="{{ $.Site.Author.name | default "Author" }}"
+          alt="{{ $.Site.Language.Params.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
           {{ if $.Site.Params.enableImageLazyLoading | default true }}
             loading="lazy"
@@ -17,7 +17,7 @@
       {{ end }}
     {{ end }}
     <div class="place-self-center">
-      {{ with .Site.Author.name | markdownify | emojify }}
+      {{ with .Site.Language.Params.Author.name | markdownify | emojify }}
         <div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
           {{ i18n "author.byline_title" | markdownify | emojify }}
         </div>
@@ -25,7 +25,7 @@
           {{ . }}
         </div>
       {{ end }}
-      {{ with .Site.Author.bio | markdownify | emojify }}
+      {{ with .Site.Language.Params.Author.bio | markdownify | emojify }}
         <div class="text-sm text-neutral-700 dark:text-neutral-400">{{ . }}</div>
       {{ end }}
       <div class="text-2xl sm:text-lg">{{ partialCached "author-links.html" . }}</div>

layouts/partials/footer.html

@@ -86,7 +86,7 @@
           {{- else }}
             ©
             {{ now.Format "2006" }}
-            {{ .Site.Author.name | markdownify | emojify }}
+            {{ .Site.Language.Params.Author.name | markdownify | emojify }}
           {{- end }}
         </p>
       {{ end }}

layouts/partials/functions/warnings.html

@@ -7,3 +7,6 @@
 {{ if ne .Params.logo nil }}
   {{ warnf "[CONGO] Theme parameter `logo` has been renamed to `header.logo`. Please update your site configuration." }}
 {{ end }}
+{{ if .Author }}
+  {{ warnf "[CONGO] Theme parameter `author` block in `languages.xx.toml` has been renamed to `.params.author`. Please update your site configuration." }}
+{{ end }}

layouts/partials/head.html

@@ -117,8 +117,8 @@
   {{/* Schema */}}
   {{ partial "schema.html" . }}
   {{/* Me */}}
-  {{ with .Site.Author.name }}<meta name="author" content="{{ . }}" />{{ end }}
+  {{ with .Site.Language.Params.Author.name }}<meta name="author" content="{{ . }}" />{{ end }}
-  {{ with .Site.Author.links }}
+  {{ with .Site.Language.Params.Author.links }}
     {{ range $links := . }}
       {{ range $name, $url := $links }}<link href="{{ $url }}" rel="me" />{{ end }}
     {{ end }}

layouts/partials/home/profile.html

@@ -4,7 +4,7 @@
   {{ end }} flex flex-col items-center justify-center text-center"
 >
   <header class="mb-3 flex flex-col items-center">
-    {{ with .Site.Author.image }}
+    {{ with .Site.Language.Params.Author.image }}
       {{ $authorImage := resources.Get . }}
       {{ if $authorImage }}
         {{ $authorImage := $authorImage.Fill "288x288 Center" }}
@@ -12,15 +12,15 @@
           class="mb-2 h-36 w-36 rounded-full"
           width="144"
           height="144"
-          alt="{{ $.Site.Author.name | default "Author" }}"
+          alt="{{ $.Site.Language.Params.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
         />
       {{ end }}
     {{ end }}
     <h1 class="text-4xl font-extrabold">
-      {{ .Site.Author.name | default .Site.Title }}
+      {{ .Site.Language.Params.Author.name | default .Site.Title }}
     </h1>
-    {{ with .Site.Author.headline }}
+    {{ with .Site.Language.Params.Author.headline }}
       <h2 class="text-xl text-neutral-500 dark:text-neutral-400">
         {{ . | markdownify | emojify }}
       </h2>

layouts/partials/picture.html

@@ -0,0 +1,112 @@
+{{ $img := .img }}
+{{ $alt := .alt }}
+{{ $class := .class }}
+{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
+{{ $lqip := .lqip | default false }}
+{{ $x2 := .x2 | default false }}
+
+{{ with $img }}
+  {{ if (eq .MediaType.SubType "svg") }}
+    {{ $width := ""}}
+    {{ $height := ""}}
+    {{ $svgContent := .Content }}
+    {{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
+      {{ $width = index . 1 }}
+    {{ end }}
+    {{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
+      {{ $height = index . 1 }}
+    {{ end }}
+    {{ if (eq "" $width $height) }}
+      {{ range (findRESubmatch `<svg[^>]*viewBox=["']?([.0-9]*) ([.0-9]*) ([.0-9]*) ([.0-9]*)` $svgContent 1) }}
+        {{ $width = index . 3 }}
+        {{ $height = index . 4 }}
+      {{ end }}
+    {{ end }}
+    {{ if (eq "" $width $height) }}
+      {{ warnf "Can't detect width and height for SVG %s" .RelPermalink }}
+      {{/* do not use lazy without dimensions */}}
+      {{ $lazy = false }}
+    {{ end }}
+    <picture {{ with $class }} class="{{ . }}" {{ end }}>
+      <img
+        src="{{ .RelPermalink }}"
+        {{ with $width }} width="{{ . }}" {{ end }}
+        {{ with $height }} height="{{ . }}" {{ end }}
+        {{ with $class }} class="{{ . }}" {{ end }}
+        {{ with $alt }} alt="{{ . }}" {{ end }}
+        {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
+      >
+    </picture>
+  {{ else }}
+    <picture 
+      {{ with $class }} class="{{ . }}" {{ end }}
+      {{ if $lqip }}
+        {{ $bg := (.Resize "20x webp q20").Content | base64Encode }}
+        style="background-image:url(data:image/webp;base64,{{ $bg }});background-size:cover"
+      {{ end }}
+    >
+    {{ $width := .Width }}
+    {{ $height := .Height }}
+    {{ if $x2 }}
+      {{ $width = div .Width 2 }}
+      {{ $height = div .Height 2 }}
+    {{ end }}
+    {{ if $webp }}
+      <source 
+        {{ if lt .Width 660 }}
+          {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+            src="{{ .RelPermalink }}"
+          {{ end }}
+        {{ else }}
+          srcset="
+            {{- (.Resize "330x webp").RelPermalink }} 330w,
+            {{- (.Resize "660x webp").RelPermalink }} 660w
+            {{ if gt .Width 1024 }}
+              ,{{ (.Resize "1024x webp").RelPermalink }} 1024w
+            {{ else }}
+              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+                ,{{ .RelPermalink }} {{ .Width }}w
+              {{ end }}
+            {{ end }}
+            {{ if gt .Width 1320 }}
+              ,{{ (.Resize "1320x webp").RelPermalink }} 2x
+            {{ else }}
+              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+                ,{{ .RelPermalink }} {{ .Width }}w
+              {{ end }}
+            {{ end }}"
+          src="{{ (.Resize "660x webp").RelPermalink }}" 
+        {{ end }}
+        type="image/webp" 
+      />
+    {{ end }}
+      <img
+        src="{{ .RelPermalink }}"
+        width="{{ $width }}"
+        height="{{ $height }}"
+        {{ with $class }} class="{{ . }}" {{ end }}
+        {{ with $alt }} alt="{{ . }}" {{ end }}
+        {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
+        {{ if lt .Width 660 }}
+          src="{{ .RelPermalink }}"
+        {{ else }}
+          srcset="
+          {{- (.Resize "330x").RelPermalink }} 330w,
+          {{- (.Resize "660x").RelPermalink }} 660w
+          {{ if gt .Width 1024 }}
+            ,{{ (.Resize "1024x").RelPermalink }} 1024w
+          {{ else }}
+            ,{{ .RelPermalink }} {{ .Width }}w
+          {{ end }}
+          {{ if gt .Width 1320 }}
+            ,{{ (.Resize "1320x").RelPermalink }} 2x
+          {{ else }}
+            ,{{ .RelPermalink }} {{ .Width }}w
+          {{ end }}"
+          src="{{ (.Resize "660x").RelPermalink }}"
+        {{ end }}
+      >
+    </picture>
+  {{ end }}
+{{ end }}

layouts/partials/schema.html

@@ -11,7 +11,7 @@
     {{ with .Site.Params.keywords }}"keywords": {{ . }},{{ end }}
     "publisher" : {
       "@type": "Person",
-      "name": "{{ .Site.Author.name | safeJS }}"
+      "name": "{{ .Site.Language.Params.Author.name | safeJS }}"
     }
   }
   </script>
@@ -30,7 +30,7 @@
     "url" : "{{ .Permalink }}",
     "author" : {
       "@type": "Person",
-      "name": "{{ .Site.Author.name | safeJS }}"
+      "name": "{{ .Site.Language.Params.Author.name | safeJS }}"
     },
     {{ with .PublishDate }}"copyrightYear": "{{ .Format "2006" }}",{{ end }}
     {{ with .Date }}"dateCreated": "{{ .Format $iso8601 }}",{{ end }}

layouts/shortcodes/figure.html

@@ -6,45 +6,23 @@
   {{ $caption := .Get "caption" }}
   {{ $href := .Get "href" }}
   {{ $class := .Get "class" }}
+
+  {{ $file := $url.Path }}
+  {{ $img := .Page.Resources.GetMatch $file }}
+  {{- if and (not $img) .Page.File }}
+    {{ $path := path.Join .Page.File.Dir $file }}
+    {{ $img = resources.Get $path }}
+  {{ end -}}
+
   <figure{{ with $class }} class="{{ . }}"{{ end }}>
     {{ with $href }}<a href="{{ . }}">{{ end }}
-    <img
+
-      class="mx-auto my-0 rounded-md"
+    {{- with $img -}}
-      alt="{{ $altText }}"
+      {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class) }}
-      {{ if .Site.Params.enableImageLazyLoading | default true }}
+    {{- else -}}
-        loading="lazy"
+      <img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/>
-      {{ end }}
+    {{- end -}}
-      {{ if findRE "^https?" $url.Scheme }}
+
-        src="{{ $url.String }}"
-      {{ else }}
-        {{ $resource := "" }}
-        {{ if $.Page.Resources.GetMatch ($url.String) }}
-          {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
-        {{ else if resources.GetMatch ($url.String) }}
-          {{ $resource = resources.Get ($url.String) }}
-        {{ end }}
-        {{ with $resource }}
-          {{ if eq .MediaType.SubType "svg" }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            width="{{ .Width }}"
-            height="{{ .Height }}"
-            {{ if lt .Width 660 }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              srcset="
-              {{- (.Resize "330x").RelPermalink }} 330w,
-              {{- (.Resize "660x").RelPermalink }} 660w,
-              {{- (.Resize "1024x").RelPermalink }} 1024w,
-              {{- (.Resize "1320x").RelPermalink }} 2x"
-              src="{{ (.Resize "660x").RelPermalink }}"
-            {{ end }}
-          {{ end }}
-        {{ else }}
-          src="{{ $url.String }}"
-        {{ end }}
-      {{ end }}
-    />
     {{ with $href }}</a>{{ end }}
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>

layouts/shortcodes/screenshot.html

@@ -4,17 +4,16 @@
     {{- if .Get "href" -}}
       <a href="{{ .Get "href" }}">
     {{- end -}}
-    <img src="{{ $image.RelPermalink }}"
+
-      {{- if or (.Get "alt") (.Get "caption") }}
+    {{ $altText := "" }}
-        alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
+    {{ with .Get "alt" }}
-      {{- end -}}
+      {{ $altText = . }}
-      {{ if .Site.Params.enableImageLazyLoading | default true }}
+    {{ else }}
-        loading="lazy"
+      {{ $altText = (.Get "caption") | markdownify | plainify }}
-      {{ end }}
+    {{ end }}
-      width="100%"
+
-      height="auto"
+    {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true) }}
-      style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"
+
-    />
     {{- if .Get "href" }}</a>{{ end -}}
     {{- if .Get "caption" -}}
       <figcaption>