I have an SVG that I want to customize for each content post. Something like this:
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="0" y="0" width="100" height="100" fill="red"></rect>
<text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">
Hello
</text>
</g>
</svg>
It produces an SVG image like this:
It’s easy enough to get that to display in my shortcode with an <img src="hello_world.svg"> tag.
However, I am trying to alter the message in each instance of the SVG based on Page data or Site data. So instead of the SVG code above which hard-codes “Hello”, I might create one “template” copy of the SVG (I’m not sure what folder makes the most sense; assets?) like this:
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="0" y="0" width="100" height="100" fill="red"></rect>
<text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">
{{$.Site.Data.stringlist.string1}}
</text>
</g>
</svg>
And then have that merged with data within my shortcode where that shortcode is referenced.
I think I need to use something like this:
{{ $originalSvgPath := "hello_world.svg" }}
{{ $originalSvg := resources.Get $originalSvgPath | resources.ExecuteAsTemplate $originalSvgPath .}}
<img src="{{$originalSvg.Permalink}}">
If I use static functions like {{add 3 5}}, it seems to be working. But if I try to reference variables from the shortcode context like $.Page.Params.mystring, the SVG gets populated with a blank value.
- Are there some examples I could follow to make this work?
- What directory(ies) should I be using to achieve this?
- Is there a way to generate the outputted SVG file to the content’s page bundle folder?
- Can someone explain the parameters for
resources.ExecuteAsTemplatefunction? The official docs say:
"The function takes three arguments: the resource target path, the template context, and the resource object.
But I’m struggling to understand what those conceptually represent, in part because the official example doesn’t show what the referenced main.scss looks like, nor what the output ultimately would look like based on the example parameters.
Thanks.