github/hugo-geekdoc
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekdoc.git synced 2024-11-22 04:40:40 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Robert Kaussow 2022-09-02 10:58:44 +02:00 committed by GitHub
parent 2e1098d3e3
commit b9876a8640
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
exampleSite/content/en/shortcodes/images/_index.md
View File

@ -44,10 +44,10 @@ If you need more flexibility for your embedded images, you could use the `img` s
## Attributes ## Attributes
| Name | Description | default | | Name | Description | default |
| ---- | ------------------------------------------------------- | ----------------- | | ---- | ------------------------------------------------------------ | ----------------- |
| name | name of the image resource defined in your front matter | empty | | name | name of the image resource defined in your front matter | empty |
| alt | description for displayed image | resource `.Title` | | alt | description for displayed image | resource `.Title` |
| size | Thumbnail size (profile\|tiny\|small\|medium\|large) | empty | | size | Thumbnail size (origin\|profile\|tiny\|small\|medium\|large) | empty |
| lazy | enable or disable image lazy loading | true | | lazy | enable or disable image lazy loading | true |
## Usage ## Usage

9
layouts/shortcodes/img.html
View File

@ -6,18 +6,19 @@
{{- with $source }} {{- with $source }}
{{- $caption := default .Title $customAlt }} {{- $caption := default .Title $customAlt }}
{{- $origin := .Permalink }}
{{- $profile := (.Fill "180x180 Center").Permalink }} {{- $profile := (.Fill "180x180 Center").Permalink }}
{{- $tiny := (.Resize "320x").Permalink }} {{- $tiny := (.Resize "320x").Permalink }}
{{- $small := (.Resize "600x").Permalink }} {{- $small := (.Resize "600x").Permalink }}
{{- $medium := (.Resize "1200x").Permalink }} {{- $medium := (.Resize "1200x").Permalink }}
{{- $large := (.Resize "1800x").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"> <div class="flex justify-center">
<figure <figure
class="gdoc-post__figure class="gdoc-markdown__figure
{{- if eq $customSize "profile" }}{{ print " gdoc-post__figure--round" }}{{ end }}" {{- if eq $customSize "profile" }}{{ print " gdoc-post__figure--round" }}{{ end }}"
> >
<a class="gdoc-markdown__link--raw" href="{{ .Permalink }}"> <a class="gdoc-markdown__link--raw" href="{{ .Permalink }}">
@ -31,7 +32,11 @@
/> />
<img <img
{{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }} {{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
{{- if eq $customSize "origin" }}
src="{{ $size.origin }}"
{{- else }}
src="{{ $size.large }}" src="{{ $size.large }}"
{{- end }}
alt="{{ $caption }}" alt="{{ $caption }}"
/> />
</picture> </picture>