✨ Add image resizing and srcset generation

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Multilingual support
 - Right-to-left (RTL) language support
+- Automatic Markdown image resizing and srcset generation
 - Performance and Accessibility improvements to achieve perfect Lighthouse scores
 - Author `headline` parameter
 
@@ -19,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Inline Javascript moved to external files
 - Author images are now Hugo assets
 - Required Hugo version is now 0.87.0 or later
+- Overhauled `figure` shortcode which now resizes images
 - Minor style and layout improvements
 
 ## [1.6.2] - 2022-01-07

assets/css/compiled/main.css

@@ -1826,6 +1826,11 @@ body a, body button {
   margin-right: 0.25rem;
 }
 
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }

exampleSite/content/_index.md

@@ -26,4 +26,4 @@ This is a demo site built entirely using Congo. It also contains a complete set
 
 Explore the [sample pages]({{< ref "samples" >}}) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/congo) or read the [Installation guide]({{< ref "docs/installation" >}}) to get started.
 
-{{< figure src="mountains.jpg" width="1200" height="800" caption="Photo by [Anna Scarfiello](https://unsplash.com/@little_anne?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)." >}}
+![A stylised photograph of a purple squid on a pink backdrop.](squid.jpg "Photo by [Jippe Joosten](https://unsplash.com/@jippe_joosten?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/vibrant-purple?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).")

exampleSite/content/docs/_index.md

@@ -11,7 +11,7 @@ cascade:
 Simple, yet powerful. Learn how to use Congo and its features.
 {{< /lead >}}
 
-{{< figure src="screenshot.png" >}}
+![Screenshots of Congo on an iPhone, iPad and MacBook](screenshot.png)
 
 This section contains everything you need to know about Congo. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Congo can do.
 

exampleSite/content/docs/homepage-layout/index.md

@@ -15,7 +15,7 @@ The layout of the homepage is controlled by the `homepage.layout` setting in the
 
 The default layout is the page layout. It's simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
 
-![Profile layout](home-page.jpg)
+![Screenshot of homepage layout](home-page.jpg)
 
 To enable the page layout, set `homepage.layout = "page"` in the `params.toml` configuration file.
 
@@ -23,7 +23,7 @@ To enable the page layout, set `homepage.layout = "page"` in the `params.toml` c
 
 The profile layout is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles.
 
-![Profile layout](home-profile.jpg)
+![Screenshot of profile layout](home-profile.jpg)
 
 The author information is provided in the `config.toml` configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Site Configuration]({{< ref "configuration#site-configuration" >}}) sections for parameter details.
 

layouts/_default/_markup/render-image.html

@@ -0,0 +1,19 @@
+{{ $altText := .Text }}
+{{ $caption := .Title }}
+{{ with $.Page.Resources.GetMatch (.Destination) }}
+  <figure>
+    <img
+      class="my-0"
+      srcset="
+        {{ (.Resize "320x").RelPermalink }} 320w,
+        {{ (.Resize "635x").RelPermalink }} 635w,
+        {{ (.Resize "1024x").RelPermalink }} 1024w,
+        {{ (.Resize "1270x").RelPermalink }} 2x"
+      src="{{ (.Resize "635x").RelPermalink }}"
+      alt="{{ $altText }}"
+    />
+    <figcaption>{{ $caption | markdownify }}</figcaption>
+  </figure>
+{{ else }}
+  {{ errorf `[CONGO] Markdown image error in "%s": Resource "%s" not found. Check the path is correct or remove the image from the content.` .Page.Path .Destination }}
+{{ end }}

layouts/shortcodes/figure.html

@@ -1,27 +1,23 @@
-{{ if .Get "src" }}
-  {{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
-  <figure{{ with .Get "class" }} class="{{ . }}"{{ end -}}>
-  {{- if .Get "link" -}}
-    <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
-  {{- end -}}
-  <img src="{{ $image.RelPermalink }}"
-    {{- if or (.Get "alt") (.Get "caption") }}
-    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
-    {{- end -}}
-    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
-    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
-  />
-  {{- if .Get "link" }}</a>{{ end -}}
-  {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-    <figcaption>
-      {{ with (.Get "title") -}}<h4>{{ . }}</h4>{{- end -}}
-      {{- if or (.Get "caption") (.Get "attr") -}}<p>
-        {{- .Get "caption" | markdownify -}}
-        {{- with .Get "attrlink" }}<a href="{{ . }}">{{- end -}}
-          {{- .Get "attr" | markdownify -}}
-        {{- if .Get "attrlink" }}</a>{{ end }}</p>
-      {{- end }}
-    </figcaption>
-  {{- end }}
+{{ $altText := .Get "alt" }}
+{{ $caption := .Get "caption" }}
+{{ $href := .Get "href" }}
+{{ $class := .Get "class" }}
+{{ with $.Page.Resources.GetMatch (.Get "src") }}
+  <figure {{ with $class }}class="{{ . }}"{{ end }}>
+    {{ with $href }}<a href="{{ . }}">{{ end }}
+      <img
+        class="my-0"
+        srcset="
+        {{ (.Resize "320x").RelPermalink }} 320w,
+        {{ (.Resize "635x").RelPermalink }} 635w,
+        {{ (.Resize "1024x").RelPermalink }} 1024w,
+        {{ (.Resize "1270x").RelPermalink }} 2x"
+        src="{{ (.Resize "635x").RelPermalink }}"
+        alt="{{ $altText }}"
+      />
+    {{ if $href }}</a>{{ end }}
+    {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
   </figure>
+{{ else }}
+  {{ errorf `[CONGO] Shortcode "figure" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (.Get "src") }}
 {{ end }}

layouts/shortcodes/screenshot.html

@@ -1,35 +1,22 @@
 {{ if .Get "src" }}
   {{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
   <figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
-      {{- if .Get "link" -}}
-          <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- if .Get "href" -}}
+      <a href="{{ .Get "href" }}">
+    {{- end -}}
+    <img src="{{ $image.RelPermalink }}"
+      {{- if or (.Get "alt") (.Get "caption") }}
+        alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
       {{- end -}}
-      <img src="{{ $image.RelPermalink }}"
-          {{- if or (.Get "alt") (.Get "caption") }}
-          alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
-          {{- end -}}
-          width="100%"
-        height="auto"
-        style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"
-      /><!-- Closing img tag -->
-      {{- if .Get "link" }}</a>{{ end -}}
-      {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-          <figcaption>
-              {{ with (.Get "title") -}}
-                  <h4>{{ . }}</h4>
-              {{- end -}}
-              {{- if or (.Get "caption") (.Get "attr") -}}<p>
-                  {{- .Get "caption" | markdownify -}}
-                  {{- with .Get "attrlink" }}
-                      <a href="{{ . }}">
-                  {{- end -}}
-                  {{- .Get "attr" | markdownify -}}
-                  {{- if .Get "attrlink" }}</a>{{ end }}</p>
-              {{- end }}
-          </figcaption>
-      {{- end }}
+      width="100%"
+      height="auto"
+      style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"
+    />
+    {{- if .Get "href" }}</a>{{ end -}}
+    {{- if .Get "caption" -}}
+      <figcaption>
+        {{- .Get "caption" | markdownify -}}
+      </figcaption>
+    {{- end }}
   </figure>
 {{ end }}
-
-
-