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.
This commit is contained in:
Robert Kaussow 2024-04-07 21:46:31 +02:00 committed by GitHub
parent ad05a077ff
commit 2f01b4b903
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 211 additions and 53 deletions

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

@ -1,8 +1,8 @@
---
title: About Me
resources:
- name: profile
src: "images/profile.jpg"
- name: avatar
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 >}}
<--->

View File

@ -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 |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| file | path to the included file relative to the Hugo root | undefined |
| language | language for [syntax highlighting](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages) | undefined |
| type | special include type (`html,page`) | undefined (rendered as markdown) |
| options | highlighting [options](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode) | `linenos=table` |
<!-- prettier-ignore-start -->
<!-- spellchecker-disable -->
{{< propertylist name=shortcode-includes sort=name order=asc >}}
<!-- spellchecker-enable -->
<!-- prettier-ignore-end -->
## 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`.

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

View File

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

View File

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

View File

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

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

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

View File

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

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="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 }}

View File

@ -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" (.Resize "320x").Permalink }}
{{- $data.SetInMap "size" "small" (.Resize "600x").Permalink }}
{{- $data.SetInMap "size" "medium" (.Resize "1200x").Permalink }}
{{- $data.SetInMap "size" "large" (.Resize "1800x").Permalink }}
{{- end }}
{{- $data.SetInMap "size" "tiny" "320x"}}
{{- $data.SetInMap "size" "small" "600x" }}
{{- $data.SetInMap "size" "medium" "1200x" }}
{{- $data.SetInMap "size" "large" "1800x" }}
{{- end -}}
<div class="flex justify-center">
<figure
class="gblog-post__figure
{{- if eq $customSize "profile" }}{{ print " gblog-post__figure--round" }}{{ end }}"
>
<figure class="gblog-post__figure">
<a class="gblog-markdown__link--raw" href="{{ .Permalink }}">
<picture>
{{- $size := $data.Get "size" }}
{{- if not $isSVG }}
{{- if ne $customSize "origin" }}
<source
{{- with $customSize }}
srcset="{{ index $size $customSize }}"
{{- if $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 }}