Using svg instead of img src

support
1

I have the following working part of code :

<ul class="list-unstyled">
  {{ range (where .Site.RegularPages "Section" "news") }}
  <li class="ink--text">
    <a href="#{{ cond (in (.Title|anchorize) "%") (.Title | base64Encode) (.Title) | anchorize }}">
      {{ with .Params.cover }}<img src="{{ . }}" alt="">{{ . }}{{ end }}
      <span>{{ .Title }}</span>
      <span>{{ .Description }}</span>
    </a>
  </li>
  {{ end }}
</ul>

I would like to transform the line {{ with .Params.cover }}<img src="{{ . }}" alt="">{{ . }}{{ end }} by a new one in order to use svg instead of img and src, having in mind that the frontmatter Params cover is : “images/news.svg”
How to use directly svg instead as img src, meaning the html result should be <a href="#news"><svg>.....</svg></a> instead of <a href="#news"><img src="images/news.svg" alt=""></a>

2

Are aware of the readFile function?

readFile | Hugo (gohugo.io)

You will probably also need:

path.Join | Hugo (gohugo.io)

since you only have a partial path in the param

3

Thanks for the swift answer.
I ran through the recommended docs but my skills (if any) are too limited to transform the above lines in a working bit of code.
Any suggested examples in order to better understand the rational when using the two proposed functions ?

4

If you put the images in e.g. /src/images/news.svg
and that news.svg has the<svg> tags this might work (untested):

<ul class="list-unstyled">
  {{ range (where .Site.RegularPages "Section" "news") }}
  <li class="ink--text">
    <a href="#{{ cond (in (.Title|anchorize) "%") (.Title | base64Encode) (.Title) | anchorize }}">
      {{ with .Params.cover }}{{ readFile (path.Join /src/ .) }}{{ end }}
      <span>{{ .Title }}</span>
      <span>{{ .Description }}</span>
    </a>
  </li>
  {{ end }}
</ul>
5

Your proposed code isn’t working as my svg file is located in the page directory (as a page bundle).
I tested a relative path (.RelPermalink) without success.
I still continue to find a way to solve the issue.

6

Ah, so it is a page resource. In that case, rather than readFile you can try:

<ul class="list-unstyled">
  {{ range (where .Site.RegularPages "Section" "news") }}
  <li class="ink--text">
    <a href="#{{ cond (in (.Title|anchorize) "%") (.Title | base64Encode) (.Title) | anchorize }}">
      {{ with .Params.cover }}{{ (.Resources.GetMatch .).Content | safeHTML }}{{ end }}
      <span>{{ .Title }}</span>
      <span>{{ .Description }}</span>
    </a>
  </li>
  {{ end }}
</ul>

Assuming of course that images/news.svg is in the page bundle directory (must be a leaf bundle in that case, else you can’t use the images subdir).

7

I would recommend using resources.Get instead of readFile – you can inline SVGs by doing .Content on the resource.

1 Like
8

Thanks, it works ! I still have some difficulties to make a clear difference when using page .Resource (page bundle vs leaf bundle vs regular page)
{{ with .Params.cover }}{{ . | safeHTML }}{{ end }}

9

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