How to iterate through SVG logos?

Support Themes & Styling
1

I want to create a “Our Happy Clients” section on a website. I want to put several SVG logos in a folder and iterate through them. I’ll probably put them in pages/images/clients. I’m not sure what the TWIG should look like. Any tips would be appreciated.

In the meantime, I’ll likely reference them in the YAML and iterate over the list I create there. I feel like that is not the best solution, but I don’t know how to do it otherwise.

EDIT: Nevermind, now that I’m working on this more, I think that putting the information in the YAML is actually the best way. In doing that, I can add alt information to the logos. I would delete this post if I could, but I do not see a way to do that. I’ll leave it here, maybe someone might find this insightful.

2

Hi, just in case you find it useful elsewhere there are ways to iterate over svgs in twig here are two options. The important bit is the media.all because svg are considered files not images.

This will output an image tag

{% for image in page.header.svgname %}
  {{ page.media.all[ page.svgname ].html("#{ page.title }", "#{ page.alt }", "myclass") }
{% endfor %}

This will output an object tag

{% for image in page.header.svgname %}
<object type="image/svg+xml" data="{{ (page.media.all[ page.svgname ]).url }}" class="myclass"></object>
{% endfor %}

1 Like