I want to use a snippet inside a twig template that corresponds with it’s modular block (.md)
So im using the x-corporation theme, i setup a banner block with 2 responsive banners, i call the banner images through my twig template, everything works fine but the output for the alt and title text needs to be dynamic (hense using a snippet corresponding to the input in the modular .md file).
My snippet (i tried several inputs for alt and title tags):
{{ page.media.images[banner.image].html(’{{ banner.title }}’, ‘{{ banner.title }}’, ‘home-banner’) }}
Html output:
There are several topics on this but none are closed/solved.
@aristotletalks I suggested in our PM to remove the curly braces around banner.title
. But that appears not to work…
Would you mind sharing the definition of ‘banner’?
Banner is the content (title, description, url) defined in the module banners.en.md >>
@aristotletalks I’m not using ‘x-corporate’ but instead use a theme inheriting from Quark.
I tried to mimic your template and page definitions as you mailed me as close as possible.
- I created the template ‘/users/themes/mytheme/templates/modular/banner.html.twig’ containing:
{% extends 'partials/base.html.twig' %}
{% block body %}
{% for banner in page.header.banners %}
<a href="{{ banner.url }}">
{{ page.media.images[banner.image].html('', banner.title) }}
</a>
{% endfor %}
{% endblock %}
- I create a page '‘user/pages/01.home/05._banner/banner.md’ containing:
---
title: Banner
banners:
-
title: 'Start met balans in je leven'
url: '#'
image: header.jpg
-
title: 'Aan de slag'
url: '#'
image: header.jpg
---
# My banner page
- It resulted in the following html:
<a href="#">
<img alt="Start met balans in je leven" src="/site-modular/user/pages/01.home/05._banner/header.jpg">
</a>
<a href="#">
<img alt="Aan de slag" src="/site-modular/user/pages/01.home/05._banner/header.jpg">
</a>
This seems to be what you are looking for. Would you mind trying the same code your site?
1 Like
Ergh… i gave you the wrong code, this code gives me the title and alt tags:
{{ page.media.images[banner.image].html('{{ banner.title }}', '{{ banner.title }}',
So adding your snippet, works, but it didn’t give me a class, so this is the snippet i used:
{{ page.media.images[banner.image].html(’’, banner.title, ‘home-banner’) }}
Result:
But now i want to add two more tags:
- title tag
- aria-describedby
How to proceed?
@aristotletalks Luckily there are more ways… The good old ‘manual’ way…
<a href="{{ banner.url }}">
{# {{ page.media.images[banner.image].html('', banner.title) }} #}
<img src="{{ page.media[banner.image].url }}"
title="{{ banner.title }}"
alt="{{ 'variable-containing-alt' }}"
class="home-banner"
aria-describedby="{{ 'variable-containing-aria-describedby' }}">
</a>
@aristotletalks Just wondering if you have been successful with setting the attributes ‘alt’, ‘title’ and custom ‘aria-describedby’ during image creating…