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.
This commit is contained in:
Robert Kaussow 2024-04-07 21:54:12 +02:00 committed by GitHub
parent 7b52c98f17
commit 6eb576575e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 134 additions and 25 deletions

View File

@ -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 -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

View File

@ -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

View File

@ -2,7 +2,7 @@
properties: properties:
- name: name - name: name
type: string 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 required: true
- name: alt - name: alt
type: string type: string
@ -10,7 +10,7 @@ properties:
required: false required: false
- name: size - name: size
type: string 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 required: false
- name: lazy - name: lazy
type: bool type: bool

View File

@ -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 }}

View File

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