Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

How to iterate through SVG logos?

Started by amdival 9 years ago · 1 replies · 956 views
9 years ago

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.

last edited 12/19/17 by amdival
8 years ago

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

TWIG
{% 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

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 91 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 451 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 45 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 125 3 months ago