refactor: move profile size from img to degicated avatar shortcode (#817

)

BREAKING CHANGE: The `size=profile` option was removed from the `img` shortcode. To create avatar images the new `avatar` shortcode can be used.

exampleSite/content/en/shortcodes/avatar/_index.md

@@ -0,0 +1,46 @@
+---
+title: Avatar
+resources:
+  - name: avatar
+    src: "avatar.jpg"
+    title: "Avatar"
+---
+
+The avatar shortcode is another custom image shortcode.
+
+<!--more-->
+
+## Usage
+
+Define a resource in the page front matter.
+
+<!-- spellchecker-disable -->
+
+```md
+---
+resources:
+  - name: avatar
+    src: "images/avatar.jpg"
+    title: "Avatar"
+---
+
+{{</* avatar name="avatar" */>}}
+```
+
+<!-- spellchecker-enable -->
+
+## Attributes
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< propertylist name=shortcode-avatar sort=name order=asc >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
+## Example
+
+<!-- spellchecker-disable -->
+
+{{< avatar name=avatar size="small" >}}
+
+<!-- spellchecker-enable -->

exampleSite/data/properties/shortcode-avatar.yaml

@@ -0,0 +1,18 @@
+---
+properties:
+  - name: name
+    type: string
+    description: Name of the image resource defined in page front matter.
+    required: true
+  - name: alt
+    type: string
+    description: Description text for the image.
+    required: false
+  - name: size
+    type: string
+    description: Thumbnail size. Supported values are `origin|tiny|small|medium|large`.
+    required: false
+  - name: anchor
+    type: string
+    description: "[Anchor](https://gohugo.io/content-management/image-processing/#anchor) to determine the placement of the crop box."
+    required: false

exampleSite/data/properties/shortcode-images.yaml

@@ -2,15 +2,15 @@
 properties:
   - name: name
     type: string
-    description: Mame of the image resource defined in page front matter.
+    description: Name of the image resource defined in page front matter.
     required: true
   - name: alt
     type: string
     description: Description text for the image.
     required: false
   - name: size
     type: string
-    description: Thumbnail size. Supported values are `origin|profile|tiny|small|medium|large`.
+    description: Thumbnail size. Supported values are `origin|tiny|small|medium|large`.
     required: false
   - name: lazy
     type: bool

layouts/shortcodes/avatar.html

@@ -0,0 +1,57 @@
+{{- $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }}
+{{- $customAlt := .Get "alt" }}
+{{- $customSize := .Get "size" | lower }}
+{{- $customAnchor := default "smart" (.Get "anchor") | title }}
+{{- $data := newScratch }}
+
+{{- with $source }}
+  {{- $caption := default .Title $customAlt }}
+  {{- $isSVG := (eq .MediaType.SubType "svg") }}
+  {{- $origin := . -}}
+
+  {{- if $isSVG }}
+    {{- $data.SetInMap "size" "tiny" "160" }}
+    {{- $data.SetInMap "size" "small" "300" }}
+    {{- $data.SetInMap "size" "medium" "600" }}
+    {{- $data.SetInMap "size" "large" "900" }}
+  {{- else }}
+    {{- $data.SetInMap "size" "tiny" (printf "160x160 %s" $customAnchor) }}
+    {{- $data.SetInMap "size" "small" (printf "300x300 %s" $customAnchor) }}
+    {{- $data.SetInMap "size" "medium" (printf "600x600 %s" $customAnchor) }}
+    {{- $data.SetInMap "size" "large" (printf "900x900 %s" $customAnchor) }}
+  {{- end -}}
+
+  <div class="flex justify-center">
+    <figure
+      class="gdoc-markdown__figure gdoc-markdown__figure--round">
+      <a class="gdoc-markdown__link--raw" href="{{ .Permalink }}">
+        <picture>
+          {{- $size := $data.Get "size" }}
+          {{- if not $isSVG }}
+            {{- if ne $customSize "origin" }}
+            <source
+              {{- if $customSize }}
+                srcset="{{ ($origin.Fill (index $size $customSize)).Permalink }}"
+              {{- else }}
+                srcset="{{ ($origin.Fill (index $size "small")).Permalink }} 600w, {{ ($origin.Fill (index $size "medium")).Permalink }} 1200w" sizes="100vw"
+              {{- end }}
+            />
+            {{- end }}
+          {{- end }}
+          <img
+          {{- if $isSVG }}
+            src="{{ $origin.Permalink }}" width="{{ index $size (default "medium" $customSize) }}"
+          {{- else }}
+            {{- if eq $customSize "origin" }}
+              src="{{ $origin.Permalink }}"
+            {{- else }}
+              src="{{ ($origin.Fill (index $size "large")).Permalink }}"
+            {{- end }}
+            alt="{{ $caption }}"
+          {{- end }}
+          />
+        </picture>
+      </a>
+    </figure>
+  </div>
+{{- end }}

layouts/shortcodes/img.html

@@ -7,40 +7,30 @@
 {{- with $source }}
   {{- $caption := default .Title $customAlt }}
   {{- $isSVG := (eq .MediaType.SubType "svg") }}
-
   {{- $origin := . }}
+
   {{- if $isSVG }}
-    {{- $data.SetInMap "size" "profile" "180" }}
     {{- $data.SetInMap "size" "tiny" "320" }}
     {{- $data.SetInMap "size" "small" "600" }}
     {{- $data.SetInMap "size" "medium" "1200" }}
     {{- $data.SetInMap "size" "large" "1800" }}
   {{- else }}
-    {{- $data.SetInMap "size" "profile" "180x180 Center" }}
     {{- $data.SetInMap "size" "tiny" "320x"}}
     {{- $data.SetInMap "size" "small" "600x" }}
     {{- $data.SetInMap "size" "medium" "1200x" }}
     {{- $data.SetInMap "size" "large" "1800x" }}
-  {{- end }}
-
+  {{- end -}}
 
   <div class="flex justify-center">
-    <figure
-      class="gdoc-markdown__figure
-      {{- if eq $customSize "profile" }}{{ print " gdoc-markdown__figure--round" }}{{ end }}"
-    >
+    <figure class="gdoc-markdown__figure">
       <a class="gdoc-markdown__link--raw" href="{{ .Permalink }}">
         <picture>
           {{- $size := $data.Get "size" }}
           {{- if not $isSVG }}
             {{- if ne $customSize "origin" }}
             <source
-              {{- with $customSize }}
-                {{- if eq $customSize "profile" }}
-                srcset="{{ ($origin.Fill (index $size $customSize)).Permalink }}"
-                {{- else}}
+              {{- if $customSize }}
                 srcset="{{ ($origin.Resize (index $size $customSize)).Permalink }}"
-                {{- end}}
               {{- else }}
                 srcset="{{ ($origin.Resize (index $size "small")).Permalink }} 600w, {{ ($origin.Resize (index $size "medium")).Permalink }} 1200w" sizes="100vw"
               {{- end }}
@@ -62,15 +52,13 @@
           />
         </picture>
       </a>
-      {{- if not (eq $customSize "profile") }}
-        {{- with $caption }}
-          <figcaption>
-            {{ . }}
-            {{- with $source.Params.credits }}
-              {{ printf " (%s)" . | $.Page.RenderString }}
-            {{- end }}
-          </figcaption>
-        {{- end }}
+      {{- with $caption }}
+        <figcaption>
+          {{ . }}
+          {{- with $source.Params.credits }}
+            {{ printf " (%s)" . | $.Page.RenderString }}
+          {{- end }}
+        </figcaption>
       {{- end }}
     </figure>
   </div>