Whitespace Issue with adding CSS class conditionally based on front matter

In front matter I’d like to occasionally specify the page to use a different layout style and therefore add a CSS class to the main element.

However, doing this seems to produce two issues:

  • whitespace isn’t respected before the conditional
  • the content is added to both the opening and the closing tag in the rendered site

Front matter:

[...]
wideLayout = true
[...]

_default/single.html page template:

<main {{- with .Params.wideLayout -}}class="wide"{{- end -}}>
{{- partial "title.html" . -}}
{{- .Content -}}
</main>

Outputted HTML in the browser:

<mainclass="wide">
[...]
</mainclass="wide">

Is there something wrong with the conditional call? Any help much appreciated.

Simply remove the first hyphen after the curly brackets i.e <main {{ with...

Also see:

1 Like

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