github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-21 20:50:40 +00:00
Code Issues Projects Releases Wiki Activity

feat: add origin size to image shortcode (#306)

Browse Source
This commit is contained in:
Robert Kaussow 2022-09-02 11:22:48 +02:00 committed by GitHub
parent e4781b6eb7
commit c95851d0a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
exampleSite/content/posts/post-with-images/index.md
View File

@ -55,12 +55,12 @@ 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 (profile\|tiny\|small\|medium\|large) | empty |
| lazy | enable or disable image lazy loading | true |
| 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 |
## Usage

9
layouts/shortcodes/img.html
View File

@ -6,13 +6,14 @@
{{- with $source }}
{{- $caption := default .Title $customAlt }}
{{- $origin := .Permalink }}
{{- $profile := (.Fill "180x180 Center").Permalink }}
{{- $tiny := (.Resize "320x").Permalink }}
{{- $small := (.Resize "600x").Permalink }}
{{- $medium := (.Resize "1200x").Permalink }}
{{- $large := (.Resize "1800x").Permalink }}
{{- $size := dict "profile" $profile "tiny" $tiny "small" $small "medium" $medium "large" $large }}
{{- $size := dict "origin" $origin "profile" $profile "tiny" $tiny "small" $small "medium" $medium "large" $large }}
<div class="flex justify-center">
@ -31,7 +32,11 @@
/>
<img
{{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
src="{{ $size.large }}"
{{- if eq $customSize "origin" }}
src="{{ $size.origin }}"
{{- else }}
src="{{ $size.large }}"
{{- end }}
alt="{{ $caption }}"
/>
</picture>