add image procesing shortcode

CHANGELOG.md

@@ -1,6 +1,6 @@
-- BREAKING
-  - rename description and keyword variables
-  - rename logo variable
-  - rename subtitle variable
+- FEATURE
+  - add feature image handling for blog posts
+  - add image processing shortcode
 - ENHANCEMENT
-  - add partial for json-ld structured data
+  - simplify image handling in json-ld schema
+  - cleanup thumbnail selection

exampleSite/content/posts/post-with-images/index.md

@@ -1,5 +1,5 @@
 ---
-title: "Post with image"
+title: "Post with images"
 date: 2020-06-22T20:00:00+02:00
 authors:
   - richard-roe
@@ -8,8 +8,16 @@ tags:
   - Open Source
   - Development
   - DevOps
+resources:
+  - name: testimage
+    src: 'images/testimage.jpg'
+    title: This is a test image
+    params:
+      credits: "[David Pennington](https://unsplash.com/@dtpennington) on [Unsplash](https://unsplash.com/s/photos/test)"
 ---
 
 Amalia id per in minimum facility, quid facet modifier ea ma. Ill um select ma ad, en ferric patine sentient vim. Per expendable foreordained interpretations cu, maxim sole pertinacity in ram. Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.
 
+{{< img name="testimage" size="small" >}}
+
 Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

layouts/_default/single.html

@@ -3,14 +3,16 @@
         <header class="gblog-post__header">
             {{ $source := ($.Resources.ByType "image").GetMatch "{*feature*,*cover*,*thumbnail*}" }}
             {{ with $source }}
-                <picture class="gblog-post__figure">
-                    {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") }}
-                    <source srcset="{{ .Permalink }}" type="image/webp">
-                    {{ end }}
-                    {{ $featured := .Fill (printf "950x285 %s" (default "Smart" .Params.anchor)) }}
+            <div class="gblog-post__feature">
+                <picture>
+                    {{ $featured := .Fill (printf "910x280 %s" (default "Smart" .Params.anchor)) }}
                     <source srcset="{{ $featured.Permalink }}">
                     <img src="{{ $featured.Permalink }}" alt="{{ default $.Title .Params.description }}" >
                 </picture>
+                {{ with $source.Params.credits }}
+                <span>Credits: {{ . | markdownify | safeHTML }}</span>
+                {{ end }}
+            </div>
             {{ end }}
 
             <h1>{{ partial "title" . }}</h1>
@@ -18,13 +20,6 @@
 
         <section class="gblog-markdown">
             {{ partial "content" . }}
-            {{ with $source }}
-            {{ if .Params.credits }}
-            <ul class="gblog-post__credits">
-                <li>{{ . | humanize }} image: {{ .Params.credits | safeHTML }}</li>
-            </ul>
-            {{ end }}
-            {{ end }}
         </section>
     </article>
 {{ end }}

layouts/shortcodes/img.html

@@ -0,0 +1,38 @@
+{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "name")) }}
+{{ $customAlt := .Get "alt" }}
+{{ $customSize := .Get "size" }}
+
+{{ with $source }}
+{{ $caption := default .Title $customAlt }}
+
+{{ $tiny := (.Resize "320x").RelPermalink }}
+{{ $small := (.Resize "600x").RelPermalink }}
+{{ $medium := (.Resize "1200x").RelPermalink }}
+{{ $large := (.Resize "1800x").RelPermalink }}
+
+{{ $size := dict "tiny" $tiny "small" $small "medium" $medium "large" $large }}
+
+<div class="flex justify-center">
+<figure class="gblog-post__figure">
+    <a href="{{ .RelPermalink }}">
+        <img
+            {{ with $customSize }}
+            src="{{ index $size $customSize }}" alt="{{ $caption }}"
+            {{ else }}
+            srcset="{{ $size.tiny }} 320w,
+                    {{ $size.small }} 600w,
+                    {{ $size.medium }} 1200w,
+                    {{ $size.large }} 2x"
+            sizes="(max-width: 320px) 320w,
+                   (max-width: 600px) 600w,
+                   (max-width: 1200px) 1200w,
+                   2x"
+            src="{{ $size.large }}" alt="{{ $caption }}"
+            {{ end }}/>
+    </a>
+    {{ with $caption }}
+    <figcaption>{{ . }}{{ with $source.Params.credits }} ({{ . | markdownify }}){{ end }}</figcaption>
+    {{ end }}
+</figure>
+</div>
+{{ end }}

src/sass/_base.scss

@@ -261,12 +261,50 @@ img {
     }
   }
 
-  &__figure {
+  &__feature {
+    position: relative;
+    margin-bottom: $padding-32;
+
     img {
       width: 100%;
-      height: auto;
-      margin-bottom: $padding-32;
+      min-height: 180px;
       object-fit: cover;
+      overflow: hidden;
+    }
+
+    span {
+      background: rgba($gray-900, 0.7);
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      padding: $padding-4;
+      font-size: 0.9em;
+      color: $gray-300;
+    }
+
+    a:hover,
+    a:visited {
+      color: $gray-300!important;
+    }
+  }
+
+  &__figure {
+    padding: $padding-4 $padding-4 0 $padding-4;
+    margin: $padding-16 0;
+    background-color: $gray-300;
+    display: table;
+
+    figcaption {
+      display: table-caption;
+      caption-side: bottom;
+      background-color: $gray-300;
+      padding: $padding-4;
+      text-align: center;
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
     }
   }
 
@@ -430,11 +468,6 @@ img {
     }
   }
 
-  .gblog-post__figure,
-  .gblog-post__credits {
-    display: none;
-  }
-
   .gblog-error {
     padding: $padding-16 * 6 $padding-16;