Adding css style to image shortcode

support
1

I don’t really need all options of built-in figure shortcode, but need simple as 1-2-3 images formatting and sometimes with ugly direct css style="..." that built-in shortcode doesn’t handle. So I wrote own shortcode

<figure>
  <img src="{{.Get 0}}" alt="{{.Get 1 | plainify}}"{{ with .Get 2 }} style="{{ . }}" {{ end }}>
  <figcaption>{{.Get 1 | safeHTML }}</figcaption>
</figure>
<div class="debug">{{ .Get 2 }}</div>

used it in markdown publication:

{{< image "testphoto.jpg" "Test" "max-width: 400px;" >}}

and got this html

<figure>
  <img src="testphoto.jpg" alt="Test" style="ZgotmplZ">
  <figcaption>Test</figcaption>
</figure>
<div class="debug">max-width: 400px;</div>

Neither plainify nor safeHTML pipes have effect on strange css appearance. What’s wrong?

2

Change:

<img src="{{.Get 0}}" alt="{{.Get 1 | plainify}}"{{ with .Get 2 }} style="{{ . }}" {{ end }}>

To:

<img src="{{.Get 0}}" alt="{{.Get 1 | plainify}}"{{ with .Get 2 }} style="{{ . | safeCSS }}" {{ end }}>

See:

1 Like
3

Seems Hugo already has answers on all my questions :slight_smile: Thank you.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.