Insert .svg through front matter

support
1

Hi!

I would like to utilize svg in my Hugo website, however, I need to pass it through front matter parameter.
I read through and tried solutions from related topics, e.g. [SOLVED] Inject an SVG file into my HTML - #10 by rdwatters.

I need to remake function around .image parameter, however, nothing seems to work and it either renders blank or shows URL. I am still new to Hugo.

Any help is appreciated. THANKS!

UPD: I figured out that the template was broken and I changed it (updated below), so it could work with .png and .gif. However, I still cannot make anything viable that would allow me to pass .svg through front matter variable just like pic.

Template part I think I need to change:

      <div class="rounded shadow bg-white p-5 tab-content" id="pills-tabContent">
          {{range $i, $t := .tablist}}
          <div class="tab-pane fade {{if eq $i 0}}show active{{end}}" id="pills-{{.title | lower | urlize}}" role="tabpanel" aria-labelledby="pills-{{.title | lower | urlize}}-tab">
            <div class="row align-items-center">
              <div class="col-md-8 order-1 order-md-0">
                <div class="content-block">
                  <h3 class="mb-4">{{ .title }}</h3>
                  <div class="content">{{ .description | markdownify }}</div>
                </div>
              </div>
              <div class="col-md-6 order-0 order-md-1 mb-5 mt-md-0">
                <div class="image-block text-center">
                  {{ if .image }}
                  {{ if fileExists (add `assets/` .image) }}
                  {{$img:= resources.Get (.image) }}
                  <img loading="lazy" decoding="async" src="{{$img.RelPermalink}}" alt="{{.title}}" class="img-fluid" width="{{$img.Width}}" height="{{$img.Height}}">
                  {{ end }}
                  {{ end }}
                </div>
              </div>
              </div>

Front matter block

  - title: " "
    description: " "
    image: "/images/my-svg.svg"
2

Fixed issue by adding condition to process raster images and svgs.
Here’s update template:

                  {{ if .image }}
                  {{ if fileExists (add `assets/` .image) }}
                  {{$img := resources.Get (.image) }}
                  {{ if eq .MediaType.SubType "svg" }} 
                  <img loading="lazy" decoding="async" src="{{$img.RelPermalink}}" alt="{{.title}}" class="img-fluid" width="{{$img.Width}}" height="{{$img.Height}}">
                  {{ else }}
                  <img loading="lazy" decoding="async" src="{{$img.RelPermalink}}" alt="{{.title}}" class="img-fluid" width="1000px">
                  {{ end }}
                  {{ end }}
                  {{ end }}

Not sure if that’s correct way of doing things, however, it works.

3

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