✨ Add article thumb, cover and feature images

layouts/_default/_markup/render-link.html

@@ -1,3 +1,3 @@
 <a href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"{{ end }} {{ if or (strings.HasPrefix .Destination "http:") (strings.HasPrefix .Destination "https:") }} target="_blank"{{ end }}>
     {{- .Text | safeHTML -}}
-</a>
+</a>

layouts/_default/single.html

@@ -1,4 +1,7 @@
 {{ define "main" }}
+  {{- $images := .Resources.ByType "image" }}
+  {{- $cover := $images.GetMatch "*cover*" }}
+  {{- $feature := $images.GetMatch "*feature*" | default $cover }}
   <article>
     <header class="max-w-prose">
       {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
@@ -10,6 +13,17 @@
       <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       </div>
+      {{ with $feature }}
+        <img
+          class="mb-6 -mt-4 rounded-md"
+          srcset="
+                {{- (.Resize "330x").RelPermalink }} 330w,
+                {{- (.Resize "660x").RelPermalink }} 660w,
+                {{- (.Resize "1024x").RelPermalink }} 1024w,
+                {{- (.Resize "1320x").RelPermalink }} 2x"
+          src="{{ (.Resize "660x").RelPermalink }}"
+        />
+      {{ end }}
     </header>
     <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
       {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "<ul") }}

layouts/partials/article-link.html

@@ -1,44 +1,68 @@
-<article>
-  <h3 class="flex items-center mt-6 text-xl font-semibold">
-    {{ with .Params.externalUrl }}
-      <div>
+<article class="flex flex-row mt-6 max-w-prose">
+  {{- $images := $.Resources.ByType "image" }}
+  {{- $thumbnail := $images.GetMatch "*thumb*" }}
+  {{- $feature := $images.GetMatch "*feature*" | default $thumbnail }}
+  {{- with $feature }}
+    <div class="flex-none pr-4 sm:pr-6 ">
+      <a
+        href="{{ with $.Params.externalUrl }}
+          {{ . }}
+        {{ else }}
+          {{ $.RelPermalink }}
+        {{ end }}"
+      >
+        <img
+          class="w-24 rounded-md sm:w-40"
+          srcset="
+          {{- (.Fill "160x120 smart").RelPermalink }} 160w,
+          {{- (.Fill "320x240 smart").RelPermalink }} 2x"
+          src="{{ (.Fill "160x120 smart").RelPermalink }}"
+        />
+      </a>
+    </div>
+  {{- end }}
+  <div>
+    <h3 class="flex items-center text-xl font-semibold">
+      {{ with .Params.externalUrl }}
+        <div>
+          <a
+            class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+            href="{{ . }}"
+            target="_blank"
+            rel="external"
+            >{{ $.Title | emojify }}</a
+          >
+          <span
+            class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500"
+            title="{{ i18n "list.externalurl_title" }}"
+          >
+            <span class="rtl:hidden">&#8599;</span>
+            <span class="ltr:hidden">&#8598;</span>
+          </span>
+        </div>
+      {{ else }}
         <a
           class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
-          href="{{ . }}"
-          target="_blank"
-          rel="external"
-          >{{ $.Title | emojify }}</a
+          href="{{ .RelPermalink }}"
+          >{{ .Title | emojify }}</a
         >
-        <span
-          class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500"
-          title="{{ i18n "list.externalurl_title" }}"
-        >
-          <span class="rtl:hidden">&#8599;</span>
-          <span class="ltr:hidden">&#8598;</span>
-        </span>
-      </div>
-    {{ else }}
-      <a
-        class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
-        href="{{ .RelPermalink }}"
-        >{{ .Title | emojify }}</a
-      >
-    {{ end }}
-    {{ if and .Draft .Site.Params.article.showDraftLabel }}
-      <div class=" ltr:ml-2 rtl:mr-2">
-        {{ partial "badge.html" (i18n "article.draft" | emojify) }}
-      </div>
-    {{ end }}
-    {{ if templates.Exists "partials/extend-article-link.html" }}
-      {{ partial "extend-article-link.html" . }}
-    {{ end }}
-  </h3>
-  <div class="text-sm text-neutral-500 dark:text-neutral-400">
-    {{ partial "article-meta.html" . }}
-  </div>
-  {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-    <div class="py-1 prose dark:prose-invert">
-      {{ .Summary | emojify }}
+      {{ end }}
+      {{ if and .Draft .Site.Params.article.showDraftLabel }}
+        <div class=" ltr:ml-2 rtl:mr-2">
+          {{ partial "badge.html" (i18n "article.draft" | emojify) }}
+        </div>
+      {{ end }}
+      {{ if templates.Exists "partials/extend-article-link.html" }}
+        {{ partial "extend-article-link.html" . }}
+      {{ end }}
+    </h3>
+    <div class="text-sm text-neutral-500 dark:text-neutral-400">
+      {{ partial "article-meta.html" . }}
     </div>
-  {{ end }}
+    {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
+      <div class="py-1 prose dark:prose-invert">
+        {{ .Summary | emojify }}
+      </div>
+    {{ end }}
+  </div>
 </article>

layouts/partials/article-meta.html

@@ -32,7 +32,6 @@
     {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
   {{ end }}
 
-
   <div class="flex flex-row flex-wrap items-center">
     {{/* Output partials */}}
     {{ with ($meta.Get "partials") }}