diff --git a/exampleSite/content/about/images/profile.jpg b/exampleSite/content/about/images/avatar.jpg similarity index 100% rename from exampleSite/content/about/images/profile.jpg rename to exampleSite/content/about/images/avatar.jpg diff --git a/exampleSite/content/about/index.md b/exampleSite/content/about/index.md index 301d20a..6ff0234 100644 --- a/exampleSite/content/about/index.md +++ b/exampleSite/content/about/index.md @@ -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 >}} <---> diff --git a/exampleSite/content/posts/advanced/includes.md b/exampleSite/content/posts/advanced/includes.md index fd05ea2..e77e0ab 100644 --- a/exampleSite/content/posts/advanced/includes.md +++ b/exampleSite/content/posts/advanced/includes.md @@ -14,6 +14,8 @@ Include shortcode can include files of different types. By specifying a language {{< toc >}} +## Usage + ```tpl {{}} @@ -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` | + + +{{< propertylist name=shortcode-includes sort=name order=asc >}} + + -## 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 -## 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`. diff --git a/exampleSite/content/posts/avatar-images/images/avatar.jpg b/exampleSite/content/posts/avatar-images/images/avatar.jpg new file mode 100644 index 0000000..d0fc747 Binary files /dev/null and b/exampleSite/content/posts/avatar-images/images/avatar.jpg differ diff --git a/exampleSite/content/posts/avatar-images/index.md b/exampleSite/content/posts/avatar-images/index.md new file mode 100644 index 0000000..f270a9d --- /dev/null +++ b/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. + + + +## Usage + +Define a resource in the page front matter. + + + +```md +--- +resources: + - name: avatar + src: "images/avatar.jpg" + title: "Avatar" +--- + +{{}} +``` + + + +## Attributes + + + +{{< propertylist name=shortcode-avatar sort=name order=asc >}} + + + +## Example + + + +{{< avatar name=avatar size="small" >}} + + diff --git a/exampleSite/content/posts/post-with-images/index.md b/exampleSite/content/posts/post-with-images/index.md index 17d02a5..83fd6a9 100644 --- a/exampleSite/content/posts/post-with-images/index.md +++ b/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 -## 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: +## Attributes + + + +{{< propertylist name=shortcode-images sort=name order=asc >}} + + + ## Example diff --git a/exampleSite/content/posts/usage/getting-started.md b/exampleSite/content/posts/usage/getting-started.md index 39a51ea..28f0f79 100644 --- a/exampleSite/content/posts/usage/getting-started.md +++ b/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/) diff --git a/exampleSite/data/properties/shortcode-avatar.yaml b/exampleSite/data/properties/shortcode-avatar.yaml new file mode 100644 index 0000000..1224783 --- /dev/null +++ b/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 diff --git a/exampleSite/data/properties/shortcode-images.yaml b/exampleSite/data/properties/shortcode-images.yaml new file mode 100644 index 0000000..a3d3f15 --- /dev/null +++ b/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 diff --git a/exampleSite/data/properties/shortcode-includes.yaml b/exampleSite/data/properties/shortcode-includes.yaml new file mode 100644 index 0000000..d5dc58d --- /dev/null +++ b/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 diff --git a/layouts/shortcodes/avatar.html b/layouts/shortcodes/avatar.html new file mode 100644 index 0000000..59f7d14 --- /dev/null +++ b/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 -}} + +
+
+ + + {{- $size := $data.Get "size" }} + {{- if not $isSVG }} + {{- if ne $customSize "origin" }} + + {{- end }} + {{- end }} + {{ $caption }} + + +
+
+{{- end }} diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html index f6dcbd8..bacde12 100644 --- a/layouts/shortcodes/img.html +++ b/layouts/shortcodes/img.html @@ -1,71 +1,64 @@ {{- $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 -}}
-
+
{{- $size := $data.Get "size" }} {{- if not $isSVG }} + {{- if ne $customSize "origin" }} + {{- end }} {{- end }} {{ $caption }} - {{- if not (eq $customSize "profile") }} - {{- with $caption }} -
- {{ . }} - {{- with $source.Params.credits }} - {{ printf " (%s)" . | $.Page.RenderString }} - {{- end }} -
- {{- end }} + {{- with $caption }} +
+ {{ . }} + {{- with $source.Params.credits }} + {{ printf " (%s)" . | $.Page.RenderString }} + {{- end }} +
{{- end }}