Applying HTML Attributes

[CreateSean]

I'm having trouble applying html attributes to the img tag inside the picture element according to the docs https://github.com/craft-snippets/Craft-image-toolbox#applying-html-attributes

What I have that works and adds attributes to the picture tag is:

{% set screenshot = item.screenshot.one() %}
{% set transforms = {
    '(max-width: 600px)': {
        width: 100,
    height:100,
        mode: 'crop',
        quality: 80,
        position: 'top-center',
        format: 'png',
    },
    '(min-width: 601px)': {
        width: 600,
    height:200,
        mode: 'crop',
        quality: 80,
        position: 'top-center',
        format: 'png',
    },
} %}
{{ craft.images.pictureMedia(screenshot, transforms)|attr({class:'foobar'}) }}

however if I want to use the method recommended in the docs, to apply attributes to the img tag, I get errors in my template. Code is as follows

{% set screenshot = item.screenshot.one() %}
{% set attributes = {
    class: [
        'single-block',
    ],
    style: {
        'color':'#cc4422',
        'background-color': '#444',
    },
    data: {
        'animation': 'green',
        'something': 'blue',
    },
} %}
{{ craft.images.pictureMedia(screenshot, transformSettings, attr(attributes)) }}

Error is:

1. in /var/www/html/vendor/craftsnippets/craft-image-toolbox/src/variables/ImageToolboxVariable.phpat line 51```

If you could update the docs with an explicit example of how to do this rather than linking off to an article that would be great.

[CreateSean]

so read the docs more and saw transform layouts example has for parameters like this:

{{craft.images.pictureMedia(someAsset, transforms, null, attributes)}}

The third parameter is null and the fourth contains the attributes. Once I updated my code to work with this everything works as expected.

The docs for applying html attributes should include an example with all 4 parameters and also explain what the null parameter is.

[piotrpog]

@CreateSean Thanks for docs suggestion - will do. And by the way, I will probably migrate all the docs to vuepress soon.