Custom homepage: build error when including an image/figure

[strauhmanis]

Hello,

I would like to render a figure in layouts/partials/home/custom.html
{{< figure src="image.svg" >}}

The image is located in the assets/

But, when building, I am getting an error:
parse failed: template: partials/home/custom.html:16: unexpected "<" in command

May I have a suggestion how to fix this, please.
Thank you very much!

[wolfspyre]

Hiya!

shortcodes are designed to be called from content components, (ie your markdown pages)
they’re not intended to be used from within partial templates, really…

https://discourse.gohugo.io/t/can-i-call-a-shortcode-from-a-partial/39043

hope this helps!

[strauhmanis]

Thank you for the information @wolfspyre !

If you would, and be so kind, may I have your suggestion, how to achieve an effect that I hoped to obtain by using the following custom homepage (custom.html) layout, please.

<div class="grid grid-cols-5 gap-4">
  <div class="col-span-3">
    <p>{{ i18n "my.home_hero_tagline" | emojify }}</p>
    <p>{{ i18n "my.home_hero_description" | emojify }}</p>
  </div>
  <div class="col-span-2">
    {{< figure src="image.svg" >}}
  </div>
</div>

<div class="grid grid-cols-3 grid-rows-4 gap-4">
    <div><p>{{ i18n "my.home_feat_1" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_2" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_3" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_4" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_5" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_6" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_7" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_8" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_9" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_10" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_11" | emojify }}</p></div>
    <div><p>{{ i18n "my.home_feat_12" | emojify }}</p></div>
</div>

Thank you!

[wolfspyre]

well, essentially you’re trying to do this:
https://github.com/jpanther/congo/blob/dev/layouts/partials/icon.html

(or something similar)
right?

there’s a few different ways to present an svg depending on what outcome you want.

i have a few partials i’ve made (not that i think this is the BEST way to do it, but…
here¹ is how i add an svg as an inline element.

then there’s also this² which emits permalinks that can be used as a background element for a parent html element
and this³ wrapper calls the pattern partial to modify the svg and include it into the collection of resources placed into the public directory by hugo.

there’s also the picture partial in congo, which supports svgs, and is used by the logo partial..

does that help?

Footnotes

1. (https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/blob/wpl_main/layouts/partials/util/baresvg.html) ↩

2. (https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/blob/wpl_main/layouts/partials/util/pattern.html) ↩

3. (https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/blob/wpl_main/layouts/partials/util/pattern-broker.html) ↩