How can I modify the html outputted from the html filter?

Support Themes & Styling
1

Creating a slider using the following code:

<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?

2

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.

3

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?

4

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.

5

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.