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

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/about/index.md

@@ -1,8 +1,8 @@
 ---
 title: About Me
 resources:
-  - name: profile
+  - name: avatar
-    src: "images/profile.jpg"
+    src: "images/avatar.jpg"
     params:
       credits: "[Angelina Litvin](https://unsplash.com/@linalitvina) on [Unsplash](https://unsplash.com/s/photos/writing)"
 ---
@@ -11,7 +11,7 @@ resources:
 
 {{< columns size=small >}}
 
-{{< img name=profile lazy=false size=profile >}}
+{{< avatar name=avatar size=tiny >}}
 
 <--->
 

exampleSite/content/posts/advanced/includes.md

@@ -14,6 +14,8 @@ Include shortcode can include files of different types. By specifying a language
 
 {{< toc >}}
 
+## Usage
+
 <!-- prettier-ignore-start -->
 ```tpl
 {{</* include file="relative/path/from/hugo/root" language="go" */>}}
@@ -22,16 +24,15 @@ Include shortcode can include files of different types. By specifying a language
 
 ## Attributes
 
-| Name     | Description                                                                                                                         | default                          |
+<!-- prettier-ignore-start -->
-| -------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+<!-- spellchecker-disable -->
-| file     | path to the included file relative to the Hugo root                                                                                 | undefined                        |
+{{< propertylist name=shortcode-includes sort=name order=asc >}}
-| language | language for [syntax highlighting](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages) | undefined                        |
+<!-- spellchecker-enable -->
-| type     | special include type (`html,page`)                                                                                                  | undefined (rendered as markdown) |
+<!-- prettier-ignore-end -->
-| options  | highlighting [options](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode)                               | `linenos=table`                  |
 
-## Usage
+## Examples
 
-## Markdown file (default)
+### Markdown files (default)
 
 If no other options are specified, files will be rendered as Markdown using the `RenderString` [function](https://gohugo.io/functions/renderstring/).
 
@@ -51,7 +52,7 @@ If you include markdown files that should not get a menu entry, place them outsi
 <!-- spellchecker-enable -->
 <!-- prettier-ignore-end -->
 
-## Language files
+### Language files
 
 This method can be used to include source code files and keep them automatically up to date.
 
@@ -83,7 +84,7 @@ HTML content will be filtered by the `safeHTML` filter and added to the rendered
 
 ### Pages
 
-In some situations, it can be helpful to include Markdown files that also contain shortcodes. While the [default method](#markdown-file-default) works fine to render plain Markdown, shortcodes are not parsed. The only way to get this to work is to use Hugo pages. There are several ways to structure these include pages, so whatever you do, keep in mind that Hugo needs to be able to render and serve these files as regular pages! How it works:
+In some situations, it can be helpful to include Markdown files that also contain shortcodes. While the [default method](#markdown-files-default) works fine to render plain Markdown, shortcodes are not parsed. The only way to get this to work is to use Hugo pages. There are several ways to structure these include pages, so whatever you do, keep in mind that Hugo needs to be able to render and serve these files as regular pages! How it works:
 
 1. First you need to create a directory **within** your content directory. For this example site `_includes` is used.
 2. Place your Markdown files within the `_includes` folder e.g. `/_includes/include-page.md`. Make sure to name it `*.md`.

exampleSite/content/posts/avatar-images/index.md

@@ -0,0 +1,52 @@
+---
+title: Avatar Images
+date: 2024-04-27T21:00:00+02:00
+authors:
+  - john-doe
+tags:
+  - Documentation
+  - Shortcodes
+resources:
+  - name: avatar
+    src: "images/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/content/posts/post-with-images/index.md

@@ -1,5 +1,5 @@
 ---
-title: Post with images
+title: Advanced Images
 date: 2020-06-22T20:00:00+02:00
 authors:
   - john-doe
@@ -58,16 +58,6 @@ If you need more flexibility for your embedded images, you could use the `img` s
 
 <!--more-->
 
-## Attributes
-
-| Name   | Description                                                                      | default           |
-| ------ | -------------------------------------------------------------------------------- | ----------------- |
-| name   | name of the image resource defined in your front matter                          | empty             |
-| alt    | description for displayed image                                                  | resource `.Title` |
-| size   | Thumbnail size (origin\|profile\|tiny\|small\|medium\|large)                     | empty             |
-| lazy   | enable or disable image lazy loading                                             | true              |
-| anchor | anchor to determine the placement of the crop box (only used for `profile` size) | smart             |
-
 ## Usage
 
 Define your resources in the page front matter, custom parameter `params.credits` is optional.
@@ -89,6 +79,14 @@ resources:
 
 <!-- spellchecker-enable -->
 
+## Attributes
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< propertylist name=shortcode-images sort=name order=asc >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
 ## Example
 
 <!-- spellchecker-disable -->

exampleSite/content/posts/usage/getting-started.md

@@ -269,6 +269,7 @@ There are a lot more things to discover. To get the most out of the Theme we hav
   - [Authors](/posts/features/authors/)
   - [Sticky Posts](/posts/features/sticky/)
 - [Shortcodes](/posts/advanced/shortcodes/)
+  - [Avatar Images](/posts/avatar-images/)
   - [Advanced Images](/posts/post-with-images/)
   - [Includes](/posts/advanced/includes/)
   - [Table of Content](/posts/advanced/toc/)

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

@@ -0,0 +1,19 @@
+---
+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: lazy
+    type: bool
+    description: Enable/disable lazy loading for the image.
+    required: false
+    defaultValue: true

exampleSite/data/properties/shortcode-includes.yaml

@@ -0,0 +1,19 @@
+---
+properties:
+  - name: file
+    type: string
+    description: Path of the file (relative to the Hugo root) to include.
+    required: true
+  - name: language
+    type: string
+    description: Language for [syntax highlighting](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages).
+    required: false
+  - name: type
+    type: string
+    description: Special include type. Supported values are `html|page`. If not set the included file is rendered as markdown.
+    required: false
+  - name: options
+    type: bool
+    description: highlighting [options](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode).
+    required: false
+    defaultValue: linenos=table

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="gblog-post__figure gblog-post__figure--round">
+      <a class="gblog-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

@@ -1,63 +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 }}
 {{- $lazyLoad := default (default true $.Site.Params.geekblogImageLazyLoading) (.Get "lazy") }}
 {{- $data := newScratch }}
 
 {{- with $source }}
   {{- $caption := default .Title $customAlt }}
   {{- $isSVG := (eq .MediaType.SubType "svg") }}
+  {{- $origin := . }}
 
-  {{- $origin := .Permalink }}
   {{- 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" (.Fill (printf "180x180 %s" $customAnchor)).Permalink }}
+    {{- $data.SetInMap "size" "tiny" "320x"}}
-    {{- $data.SetInMap "size" "tiny" (.Resize "320x").Permalink }}
+    {{- $data.SetInMap "size" "small" "600x" }}
-    {{- $data.SetInMap "size" "small" (.Resize "600x").Permalink }}
+    {{- $data.SetInMap "size" "medium" "1200x" }}
-    {{- $data.SetInMap "size" "medium" (.Resize "1200x").Permalink }}
+    {{- $data.SetInMap "size" "large" "1800x" }}
-    {{- $data.SetInMap "size" "large" (.Resize "1800x").Permalink }}
+  {{- end -}}
-  {{- end }}
-
 
   <div class="flex justify-center">
-    <figure
+    <figure class="gblog-post__figure">
-      class="gblog-post__figure
-      {{- if eq $customSize "profile" }}{{ print " gblog-post__figure--round" }}{{ end }}"
-    >
       <a class="gblog-markdown__link--raw" href="{{ .Permalink }}">
         <picture>
           {{- $size := $data.Get "size" }}
           {{- if not $isSVG }}
+            {{- if ne $customSize "origin" }}
             <source
-              {{- with $customSize }}
+              {{- if $customSize }}
-                srcset="{{ index $size $customSize }}"
+                srcset="{{ ($origin.Resize (index $size $customSize)).Permalink }}"
               {{- else }}
-                srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
+                srcset="{{ ($origin.Resize (index $size "small")).Permalink }} 600w, {{ ($origin.Resize (index $size "medium")).Permalink }} 1200w" sizes="100vw"
               {{- end }}
             />
             {{- end }}
+          {{- end }}
           <img
             {{- if $isSVG }}
-              src="{{ $origin }}" width="{{ index $size (default "medium" $customSize) }}"
+              src="{{ $origin.Permalink }}" width="{{ index $size (default "medium" $customSize) }}"
             {{- else }}
               {{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
               {{- if eq $customSize "origin" }}
-                src="{{ $origin }}"
+                src="{{ $origin.Permalink }}"
               {{- else }}
-                src="{{ $size.large }}"
+                src="{{ ($origin.Resize (index $size "large")).Permalink }}"
               {{- end }}
               alt="{{ $caption }}"
             {{- end }}
           />
         </picture>
       </a>
-      {{- if not (eq $customSize "profile") }}
       {{- with $caption }}
         <figcaption>
           {{ . }}
@@ -66,7 +60,6 @@
           {{- end }}
         </figcaption>
       {{- end }}
-      {{- end }}
     </figure>
   </div>
 {{- end }}