html_attr_type

Added in version 3.24: The html_attr_type filter was added in Twig 3.24.

The html_attr_type filter converts arrays into specialized attribute value objects that implement custom rendering logic. It is designed for use with the html_attr function for attributes where the attribute value follows special formatting rules.

<img {{ html_attr({
    srcset: ['small.jpg 480w', 'large.jpg 1200w']|html_attr_type('cst')
}) }}>

{# Output: <img srcset="small.jpg 480w, large.jpg 1200w"> #}

Available Types

Space-Separated Token List (sst)

Used for attributes that expect space-separated values, like class or aria-labelledby:

{% set classes = ['btn', 'btn-primary']|html_attr_type('sst') %}

<button {{ html_attr({class: classes}) }}>
    Click me
</button>

{# Output: <button class="btn btn-primary">Click me</button> #}

This is the default type used when the html_attr function encounters an array value (except for style attributes).

Comma-Separated Token List (cst)

Used for attributes that expect comma-separated values, like srcset or sizes:

<img {{ html_attr({
    srcset: ['image-1x.jpg 1x', 'image-2x.jpg 2x', 'image-3x.jpg 3x']|html_attr_type('cst'),
    sizes: ['(max-width: 600px) 100vw', '50vw']|html_attr_type('cst')
}) }}>

{# Output: <img srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" sizes="(max-width: 600px) 100vw, 50vw"> #}

Inline Style (style)

Used for style attributes. Handles both maps (property - value pairs) and sequences (CSS declarations):

{# Associative array #}
{% set styles = {color: 'red', 'font-size': '14px'}|html_attr_type('style') %}

<div {{ html_attr({style: styles}) }}>
    Styled content
</div>

{# Output: <div style="color: red; font-size: 14px;">Styled content</div> #}

{# Numeric array #}
{% set styles = ['color: red', 'font-size: 14px']|html_attr_type('style') %}

<div {{ html_attr({style: styles}) }}>
    Styled content
</div>

{# Output: <div style="color: red; font-size: 14px;">Styled content</div> #}

The style type is automatically applied by the html_attr function when it encounters an array value for the style attribute.

Note

The html_attr_type filter is part of the HtmlExtension which is not installed by default. Install it first:

$ composer require twig/html-extra

Then, on Symfony projects, install the twig/extra-bundle:

$ composer require twig/extra-bundle

Otherwise, add the extension explicitly on the Twig environment:

use Twig\Extra\Html\HtmlExtension;

$twig = new \Twig\Environment(...);
$twig->addExtension(new HtmlExtension());

Arguments

  • value: The sequence of attributes to convert

  • type: The attribute type. One of:

    • sst (default): Space-separated token list

    • cst: Comma-separated token list

    • style: Inline CSS styles

See also

html_attr, html_attr_merge