Line Breaks in Shortcode

tips & tricks
1

Here’s how to enter an image caption once and output it twice as an alt attribute and as an html element with line breaks.

Specify your line breaks in your img shortcode in every post.
Then in the Shortcode template call plainify to strip the html from the image’s alt attribute.
And finally use safeHTML to render the line breaks inside an element

Example Shortcode template

`< img src=“{{ $.Page.Site.BaseURL }}{{ .Get “src” }}” alt=“{{ with .Get “caption”}}{{ . | plainify }}{{ end }}”/>

{{ with .Get "caption"}}{{ . | safeHTML }}{{ end }}

`

Example Shortcode usage in .md files

{{< img src="/images/mi3_800x398.jpg" caption="Untitled,<br> oil on canvas,<br> 142.5 x 70 cm, 2010" >}}

Profit! :sunglasses:

2 Likes
2

Nice, thanks for sharing !

1 Like
3

Hi, in a somewhat related question, Sorry to bring this post back, but it is a useful tip.

Would I need to make a Shortcode template to enable two figures to stay in the same line (no line break)?

{{< figure src="/img/postimages/2018-01-01/wrapbootstrap™.jpg" height= "50px" width="auto" >}} {{< figure src="/img/postimages/2018-01-01/hugo.png" height= "50px" width="auto" >}}

The above puts one image bellow the other I would like them left and right.

4

That is a CSS question.

1 Like