mirror of https://github.com/jpanther/congo.git
🚸 Allow `figure` to revert to default behaviour
parent
0602108f56
commit
54d74316d3
|
@ -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.
|
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 -->
|
<!-- prettier-ignore-start -->
|
||||||
|Parameter|Description|
|
|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.|
|
|`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.|
|
|`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.|
|
|`caption`|Markdown for the image caption, which will be displayed below the image.|
|
||||||
|`class`|Additional CSS classes to add to the image.|
|
|`class`|Additional CSS classes to apply to the image.|
|
||||||
`href`|URL that the image should be linked to.|
|
|`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 -->
|
<!-- 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:
|
Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
|
||||||
|
|
|
@ -1,23 +1,27 @@
|
||||||
{{ $altText := .Get "alt" }}
|
{{ if .Get "default" }}
|
||||||
{{ $caption := .Get "caption" }}
|
{{ template "_internal/shortcodes/figure.html" . }}
|
||||||
{{ $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 }}
|
{{ 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 }}
|
{{ end }}
|
Loading…
Reference in New Issue