Include a svg file from static folder to a template

support
1

Hi,
I want to inlcude/import a svg-file from static folder in to a template(navbar), so that the code looks cleaner. It is working, when the svg-code is in the template, but they are so big/large.

At the moment I have got the svg-files in the partial folder and include it from there, but I want to access them from the static folder.

My navbar want to include it here:

<nav>
  <!-- Logo and Brand -->
  <div class="logo-brand-wrapper">
    <a href="{{ .Site.BaseURL | relLangURL }}">
        {{ partial "logo.html" . }} ---> want inlcude from static
    </a>
    <h1 id="brand-headline">
      <a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
          <span class="brand-name">Ketten</span>beil
      </a>
    </h1>

  <!-- Burger Menu -->
    <a href="#" id="burgerMenu" class="icon">
      {{ partial "burger-menu.html" . }} ---> want to include from static
    </a>
  </div>

  <!-- Top Navigation Menu -->
  <ul class="topnav" id="myTopnav">
    {{ range site.Menus.main }}
      <li class="nav-item">
        <a class="nav-link" href="{{ .URL }}">
          {{ partial "menu-arrow.html" . }} ---> want to include from static
          {{ .Name }}
        </a>
      </li>
    {{ end }}
  </ul>
</nav>

As I said, I do not want them include/import from partial.
And a second questions, why are the html comments not shown in the inspector/browser?

Thanks

2

https://gohugo.io/templates/introduction/#comments

3

Are you talking about the template code, or the published HTML?

4

about the template code :slight_smile:
If the svg is in the template code it is hard to read.

want them from the static folder, if it works.

5

Sorry, I don’t understand. This looks clean to me:

{{ partial "logo.html" . }}
6

this is in the {{ partial "logo.html" . }}

<svg
    class="brand-logo"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    id="svg3489"
    viewBox="0 0 299.99999 300.00001"
    height="28px"
    width="28px">
    <g transform="translate(0,-752.36214)" id="layer1">
    <g style="fill:#ffffff" id="g80" transform="matrix(1.25,0,0,-1.25,-125.74979,1526.7507)">
    <g style="fill:#ffffff" clip-path="url(#clipPath84)" id="g82">
    <g style="fill:#ffffff" transform="translate(268.4277,517.2104)" id="g88">
        <path id="path90" style="fill:#ffffff;fill-opacity:0;stroke:#ffffff;stroke-width:12;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c 0,0 29.621,-14.659 37.722,-13.469 5.156,0.757 10.116,-23.64 -5.366,-33.928 -10.319,-6.859 -76.583,21.185 -166.17,83.082 0,0 -2.714,69.646 33.38,58.013 0,0 7.635227,-5.65029 17.879707,-14.278048 C -62.243415,62.314415 -31.676163,33.505141 -30.021,13.822 c 4.526,-53.848 -15.717,-120.649 1.745,-138.572 26.102,-26.794 -194.062,49.479 -45.48,39.361 0,0 64.125,93.404 73.756,85.389 z" />
    </g>
    </g>
    </g>
    </g>
</svg>

Dont want them in partial… is there no way to include them from the static folder?

7

I would do this:

assets/
└── images/
    └── svg/
        └── foo.svg

layouts/partials/svg.html

{{- $path := printf "images/svg/%s.svg" . }}
{{- with resources.Get $path }}
  {{ .Content | safeHTML }}
{{- else }}
  {{- errorf "The 'svg' partial was unable to find %s" $path }}
{{- end }}

The call it from a template like this:

{{ partial "svg.html" "foo" }}
8

Revised: cache it.

{{ partialCached "svg.html" "foo" }}
9

Shall I use this:

instead of this:

? :smiley:

10

Yes, use the first one.

11

thanks

12

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