🚸 Add support for article images in front matter

Ref #381

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Front matter support for specifying article thumbnails, covers and featured image details (including filename pattern, alt text and caption)
 - Front matter keywords support on a per article basis
 - Indonesian translation ([#398](https://github.com/jpanther/congo/pull/398))
 - Mastodon sharing links ([#405](https://github.com/jpanther/congo/pull/405))

assets/css/compiled/main.css

@@ -1798,6 +1798,10 @@ body:has(#menu-controller:checked) {
   margin-top: -1rem;
 }
 
+.-mt-3 {
+  margin-top: -0.75rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }

exampleSite/content/docs/front-matter.md

@@ -16,6 +16,13 @@ Front matter parameter default values are inherited from the theme's [base confi
 |---|---|---|
 |`title`|_Not set_|The name of the article.|
 |`description`|_Not set_|The text description for the article. It is used in the HTML metadata.|
+|`feature`|`"*feature*"`|The text pattern to match the feature image filename for this article.|
+|`featureAlt`|`""`|The alternative text description for the feature image.|
+|`cover`|`"*cover*"`|The text pattern to match the cover image filename for this article.|
+|`coverAlt`|`featureAlt`|The alternative text description for the cover image.|
+|`coverCaption`|_Not set_|The figure caption text to be displayed beneath the cover image.|
+|`thumbnail`|`"*thumb*"`_|The text pattern to match the thumbnail image filename for this article.|
+|`thumbnailAlt`|`featureAlt`|The alternative text description for the thumbnail image.|
 |`externalUrl`|_Not set_|If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.|
 |`editURL`|`article.editURL`|When `showEdit` is active, the URL for the edit link.|
 |`editAppendPath`|`article.editAppendPath`|When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.|

exampleSite/content/samples/rich-content/index.md

@@ -3,6 +3,8 @@ title: "Rich Content"
 date: 2019-03-10
 description: "A brief description of Hugo Shortcodes"
 summary: "This is an _example_ of a **rich** content summary."
+coverAlt: "An example cover image depicting icons of some popular media organisations."
+coverCaption: "This is an example cover image with a caption."
 tags: ["shortcodes", "privacy", "sample", "gist", "twitter", "youtube", "vimeo"]
 ---
 

layouts/_default/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
   {{- $images := .Resources.ByType "image" }}
-  {{- $cover := $images.GetMatch "*cover*" }}
+  {{- $cover := $images.GetMatch (.Params.cover | default "*cover*") }}
-  {{- $feature := $images.GetMatch "*feature*" | default $cover }}
+  {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $cover }}
   <article>
     <header class="max-w-prose">
       {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
@@ -14,15 +14,21 @@
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       </div>
       {{ with $feature }}
-        <img
+        <div class="prose">
-          class="mb-6 -mt-4 rounded-md"
+          <img
-          srcset="
+            class="mb-6 -mt-4 rounded-md"
-                {{- (.Resize "330x").RelPermalink }} 330w,
+            srcset="
-                {{- (.Resize "660x").RelPermalink }} 660w,
+          {{- (.Resize "330x").RelPermalink }} 330w,
-                {{- (.Resize "1024x").RelPermalink }} 1024w,
+          {{- (.Resize "660x").RelPermalink }} 660w,
-                {{- (.Resize "1320x").RelPermalink }} 2x"
+          {{- (.Resize "1024x").RelPermalink }} 1024w,
-          src="{{ (.Resize "660x").RelPermalink }}"
+          {{- (.Resize "1320x").RelPermalink }} 2x"
-        />
+            src="{{ (.Resize "660x").RelPermalink }}"
+            alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
+          />
+          {{ with $.Params.coverCaption }}
+            <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
+          {{ end }}
+        </div>
       {{ end }}
     </header>
     <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">

layouts/partials/article-link.html

@@ -1,7 +1,7 @@
 <article class="flex flex-row mt-6 max-w-prose">
   {{- $images := $.Resources.ByType "image" }}
-  {{- $thumbnail := $images.GetMatch "*thumb*" }}
+  {{- $thumbnail := $images.GetMatch (.Params.thumbnail | default "*thumb*") }}
-  {{- $feature := $images.GetMatch "*feature*" | default $thumbnail }}
+  {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $thumbnail }}
   {{- with $feature }}
     <div class="flex-none pr-4 sm:pr-6 ">
       <a
@@ -18,7 +18,7 @@
           {{- (.Fill "160x120 smart").RelPermalink }} 160w,
           {{- (.Fill "320x240 smart").RelPermalink }} 2x"
           src="{{ (.Fill "160x120 smart").RelPermalink }}"
-          alt=""
+          alt="{{ $.Params.featureAlt | default $.Params.thumbnailAlt | default "" }}"
         />
       </a>
     </div>