marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🚸 Allow `figure` to revert to default behaviour

pull/100/head
James Panther 2022-02-03 11:37:09 +11:00
parent 0602108f56
commit 54d74316d3
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
2 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
exampleSite/content/docs/shortcodes/index.md
View File

@ -101,16 +101,17 @@ Congo includes a `figure` shortcode for adding images to content. The shortcode
Images included using `figure` will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions.
The `figure` shortcode accepts five parameters:
The `figure` shortcode accepts six parameters:
<!-- prettier-ignore-start -->
|Parameter|Description|
|---|---|
|`src`|**Required.** The filename of the image. This image must be a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page.|
|`alt`|[Alternative text description](https://moz.com/learn/seo/alt-text) for the image.|
|`caption`|Markdown for the image caption which will be displayed below the image.|
|`class`|Additional CSS classes to add to the image.|
`href`|URL that the image should be linked to.|
|`caption`|Markdown for the image caption, which will be displayed below the image.|
|`class`|Additional CSS classes to apply to the image.|
|`href`|URL that the image should be linked to.|
|`default`|Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure).|
<!-- prettier-ignore-end -->
Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:

46
layouts/shortcodes/figure.html
View File

@ -1,23 +1,27 @@
{{ $altText := .Get "alt" }}
{{ $caption := .Get "caption" }}
{{ $href := .Get "href" }}
{{ $class := .Get "class" }}
{{ with $.Page.Resources.GetMatch (.Get "src") }}
<figure {{ with $class }}class="{{ . }}"{{ end }}>
{{ with $href }}<a href="{{ . }}">{{ end }}
<img
class="my-0 rounded-md"
srcset="
{{ (.Resize "330x").RelPermalink }} 330w,
{{ (.Resize "660x").RelPermalink }} 660w,
{{ (.Resize "1024x").RelPermalink }} 1024w,
{{ (.Resize "1320x").RelPermalink }} 2x"
src="{{ (.Resize "660x").RelPermalink }}"
alt="{{ $altText }}"
/>
{{ if $href }}</a>{{ end }}
{{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{ if .Get "default" }}
{{ template "_internal/shortcodes/figure.html" . }}
{{ else }}
{{ errorf `[CONGO] Shortcode "figure" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (.Get "src") }}
{{ $altText := .Get "alt" }}
{{ $caption := .Get "caption" }}
{{ $href := .Get "href" }}
{{ $class := .Get "class" }}
{{ with $.Page.Resources.GetMatch (.Get "src") }}
<figure {{ with $class }}class="{{ . }}"{{ end }}>
{{ with $href }}<a href="{{ . }}">{{ end }}
<img
class="my-0 rounded-md"
srcset="
{{ (.Resize "330x").RelPermalink }} 330w,
{{ (.Resize "660x").RelPermalink }} 660w,
{{ (.Resize "1024x").RelPermalink }} 1024w,
{{ (.Resize "1320x").RelPermalink }} 2x"
src="{{ (.Resize "660x").RelPermalink }}"
alt="{{ $altText }}"
/>
{{ if $href }}</a>{{ end }}
{{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{ else }}
{{ errorf `[CONGO] Shortcode "figure" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (.Get "src") }}
{{ end }}
{{ end }}