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 can I modify the html outputted from the html filter?

Started by William Saxton 9 years ago · 4 replies · 647 views
9 years ago

Creating a slider using the following code:

TWIG
<ul>
{% for slide in page.header.slides %}
<li>{{ page.media.images[slide.image].html('', slide.description) }}</li>
{% endfor %}
</ul>

I'd like to add a style to the img tags. Is there documentation on how to do this?

9 years ago

Just target it with CSS: ul li img, optionally adding a class to the unordered list like <ul class="mylist"> and target it with .mylist li img.

9 years ago

I'm actually already doing that. I considered it a workaround, though, and wondered if I was missing something obvious.

So this really is the best way?

9 years ago

You can't modify the .html output, but you can create your own HTML tag and simply use the .url method for the URL part.

9 years ago

If your goal is to style the images with CSS, then targeting them with CSS-specificity is the way to go. It is not a workaround, but could be semantically "clearer" if you were to assign a class to the image itself and target that. The end result is the same, though.

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 90 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 449 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 44 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 123 3 months ago