Multiple partial SVGs loading the same svg

support
1

Hello!

I am having a strange issue when it comes to loading svgs in my code.

I am trying to use

<div>
... other content
{{ partial "svg/Tools-v2.svg"}}
</div>
<div>
... other content
{{ partial "svg/Optimization.svg"}}
</div>
<div>
... other content
{{ partial "svg/Gameplay-v2.svg"}}
</div>

to load icons to my page however whenever I run the site it loads the first icon inside all the partials instead of the correct icon in each partial. I thought it was a syntax error at first but after thoroughly checking im not sure what could be causing this issue.

Here is my code:

<div class="row row-removewidth justify-content-center">
      <div class="col-fluid serviceitem serviceitem-left">
        <div class="row">{{ partial "svg/Tools-v2.svg"}}
        </div>
        <div class="row rowpadded"><h3>TOOLS</h3></div>
        <div class="row rowpadded">
          <ul>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Tortor netus lectus nulla etiam pellentesque libero.</li>
            <li>Enim accumsan convallis porttitor faucibus sociis laoreet.</li>
          </ul>
        </div>
      </div>
      <div class="col-fluid serviceitem serviceitem-center">
        <div class="row rowmargin">{{ partial "svg/Optimization.svg"}}</div>
        <div class="row rowpadded"><h3>OPTIMIZATION</h3></div>
        <div class="row rowpadded">
          <ul>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Tortor netus lectus nulla etiam pellentesque libero.</li>
            <li>Enim accumsan convallis porttitor faucibus sociis laoreet.</li>
          </ul>
        </div>
      </div>
      <div class="col-fluid serviceitem serviceitem-center">
        <div class="row">{{ partial "svg/Gameplay-v2.svg"}}</div>
        <div class="row rowpadded"><h3>GAMEPLAY</h3></div>
        <div class="row rowpadded">
          <ul>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Tortor netus lectus nulla etiam pellentesque libero.</li>
            <li>Enim accumsan convallis porttitor faucibus sociis laoreet.</li>
          </ul>
        </div>
      </div>
      <div class="col-fluid serviceitem serviceitem-right">
        <div class="row">{{ partial "svg/engine-icon.svg"}}</div>
        <div class="row rowpadded"><h3>ENGINE</h3></div>
        <div class="row rowpadded">
          <ul>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Tortor netus lectus nulla etiam pellentesque libero.</li>
            <li>Enim accumsan convallis porttitor faucibus sociis laoreet.</li>
          </ul>
        </div>
      </div>
    </div>
2

Without seeing your partial, my first guess is that you need to pass the current context (or perhaps the Page context) when you call the partial.

{{< partial "foo.html" . >}}

But again, we’d need to see the partial.

3

I’m using a similar partial multiple times on the same page, like this:

{{ partial "ico" "download" }}
{{ partial "ico" "play" }}

Here is the source code

4

When passing parameters to a partial, you pass a map using the dict (dictionary) function

{{< partial "foo.html" (dict "name" "John" "age" "28") >}}

or with vars

{{< partial "foo.html" (dict "name" $name "age" $age) >}}
5

As long as I’m using a single parameter, and as it’s working with {{ partial "ico" "download" }}, can I keep on using this syntax (which is easier to remember) or should I move to dict?

6

In my previous response I was replying to @DevDanielFromIT. I’m not sure what they need to pass in the partial, so I provided syntax in case they need to pass multiple things.

The important thing to remember when calling a partial is that you can pass it one thing. So if you want to pass multiple things, put them in a map.

Your syntax, for what you’re doing, is fine.

1 Like
7

Hey!

This might sound silly but thank you for asking me to check the partial, after going through it i realised the partial i was given is one file containing all of the svg’s and so even though i was loading the optimzation.svg it was loading the first logo inside the partial which was the tools one. I’ve fixed them so that they only save each individual image now.

Thanks for the help!

8

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