How to call snippets in image alt and title in twig template

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:

  TWIGCopy

  {% 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:
  YAMLCopy

  ---
  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:
  HTMLCopy

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

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