zola: How to embed an svg in a template from a local file (`include` and `load_data` don't seem to work for this)
Documentation issue
Summary
Hi, I’m trying to switch my blog over to using Zola, and something I was doing previously was directly embedding a few svgs (for social media icons) which I can’t figure out how to do currently with Tera’s include directive or via set data = load_data()
When I try to something like {% include "github.svg" %} (and trying lots of alternative locations for the svg) it seems to always report an error like:
Error: Reason: Failed to render 'post-page.html'
Error: Reason: Template '[github.svg]' not found
If I instead try something like:
{% set data = load_data(path="github.svg", format="xml") %}
<div class="icon">{{ data }}</div>
the generated output will just substitute [object] for that data.
It would be good if there were some documentation that could show how it’s possible include / embed xml/svg data within a template.
About this issue
- Original URL
- State: open
- Created 2 years ago
- Comments: 24 (5 by maintainers)
I’ve managed to do this for my personal site with
{{ load_data(path="path/to/svg.svg") | safe }}.You can check out the source code here: timharek/timharek.no:/layouts/templates/base/header.html
Maybe we can make the extensions configurable or just load everything in the templates directory? JS/SVG should not conflict with Tera syntax
Ah I was thinking as a Tera issue. We should probably include svg in the glob pattern as you say.
The issue is that load_data loads it as structured data. To work with svg that way, we’d need to load data as plain text.
thanks for the input + suggestions.
from what I can tell at the moment then macros may be the closest thing to what I was looking for but they aren’t really a practical solution here. The general assumption is that there’s a directory of pre-existing svg icons and it would be nice to be able to inline icons from their original
.svgfiles, ideally without needing to pre-process them into a library of macros first.