Deutsche Version

Back to overview

Sylius Media Alt Text: Storefront

This documentation always describes the latest published version.

Where the text appears

The plugin replaces five templates through Twig's bundle path override (templates/overrides/SyliusShopBundle and SyliusAdminBundle):

Without maintained text the output stays as before. A decorative image outputs alt="".

If your shop has overridden one of these templates itself under templates/bundles/SyliusShopBundle, your template wins. Output the text there with mmd_image_alt (see below).

Decorative images in links

The product gallery wraps its images in links. A decorative image would leave the link without an accessible name, so in that case the link gets an aria-label with the product name.

Outputting the text in your own template

Twig function

mmd_image_alt

<img src="{{ image.path|imagine_filter('sylius_shop_product_thumbnail') }}" alt="{{ mmd_image_alt(image, product.name) }}">

Signature: mmd_image_alt(image, fallback = null, locale = null).

• If image is empty or the output is turned off, fallback is returned (or an empty string)
• Otherwise the maintained text, or '' for a decorative image
• If there is no maintained text, your fallback applies first, and only without a fallback the fallback provider chain (see Extending)
• locale is optional and defaults to the current language

Partial for themes

A theme that must also render without the plugin must not call mmd_image_alt directly: an unknown Twig function fails already at compile time. Instead, include the partial together with a substitute template:

alt="{% include ['@MmdSyliusMediaAltTextPlugin/shop/image_alt.html.twig', 'my_fallback.html.twig'] with { image: image, fallback: product.name } only %}"

my_fallback.html.twig contains only {{ fallback }}. If the plugin is present, the partial outputs the text; otherwise the substitute template is used.

Additional Twig function