pictureMultiple - errors

[CreateSean]

Craft 4.4.15 Image Toolbox 2.1.2

      {% set image = block.icon.one() %}
      {% set thumb = {
          mode: 'crop',
          width: 250,
          quality: 75,
          position: 'center-center',
      } %}
      {% set attributes = {
        class: [
            'max-w-full',
        ],
        loading:'lazy',
        alt: image.altText ?? image.title ?? null,
      } %}
      {{craft.images.picture(image, thumb, attributes) }}

When I update the code above to use pictureMultiple (last line) I get the following twig errors. which is what my deprecation errors were telling me.

Also deprecation errors for below give the same error when updated

    {% set transforms = {
      '(max-width: 767.9px)': {
        width: 800,
        height:350,
        mode: 'crop',
        quality: 80,
      },
      '(min-width:768px) and (max-width: 1023.9px)': {
        width: 150,
        height:400,
        mode: 'crop',
        quality: 80,
      },
      '(min-width:1024px) and (max-width: 1279.9px)': {
        width: 1310,
        height:500,
        mode: 'crop',
        quality: 80,
      },
      '(min-width: 1280px)': {
        width: 1600,
        height:500,
        mode: 'crop',
        quality: 80,
      },
    } %}
    {% set attributes = {
        class: [
            'object-cover h-full w-full absolute top-0 left-0 z-0',
        ],
        loading:'lazy',
        alt: bgImage.altText ?? bgImage.title ?? null,
    } %}
    {{ craft.images.pictureMedia(bgImage, transforms, null, attributes) }}

TypeError craftsnippets\imagetoolbox\variables\ImageToolboxVariable::pictureMultiple(): Argument #1 ($sources) must be of type array, craft\elements\Asset given, called in /var/www/html/vendor/twig/twig/src/Extension/CoreExtension.php on line 1607

Please advise

[piotrpog]

@CreateSean pictureMultiple requires the new syntaxt. To take your first example, proper syntaxt would be like this:

{% set image = block.icon.one() %}
{% set attributes = {
  class: [
      'max-w-full',
  ],
  loading:'lazy',
  alt: image.altText ?? image.title ?? null,
} %}

{% set sources = [
  {
    asset: image,
    transform: {
      mode: 'crop',
      width: 250,
      quality: 75,
      position: 'center-center',            
    },
  },
] %}

{{craft.images.pictureMultiple(sources, attributes) }}

The second example should look like this:

{% set transforms = {
  '(max-width: 767.9px)': {
    width: 800,
    height:350,
    mode: 'crop',
    quality: 80,
  },
  '(min-width:768px) and (max-width: 1023.9px)': {
    width: 150,
    height:400,
    mode: 'crop',
    quality: 80,
  },
  '(min-width:1024px) and (max-width: 1279.9px)': {
    width: 1310,
    height:500,
    mode: 'crop',
    quality: 80,
  },
  '(min-width: 1280px)': {
    width: 1600,
    height:500,
    mode: 'crop',
    quality: 80,
  },
} %}

{% set sources = [
  {
    asset: bgImage,
    media: '(max-width: 767.9px)',
    transform: {
      width: 800,
      height:350,
      mode: 'crop',
      quality: 80,          
    },
  },
  {
    asset: bgImage,
    media: '(min-width:768px) and (max-width: 1023.9px)',
    transform: {
      width: 150,
      height:400,
      mode: 'crop',
      quality: 80,        
    },
  },
  {
    asset: bgImage,
    media: '(min-width:1024px) and (max-width: 1279.9px)',
    transform: {
      width: 1310,
      height:500,
      mode: 'crop',
      quality: 80,       
    },
  },
  {
    asset: bgImage,
    media: '(min-width: 1280px)',
    transform: {
      width: 1600,
      height:500,
      mode: 'crop',
      quality: 80,    
    },
  },                  
] %}

{% set attributes = {
    class: [
        'object-cover h-full w-full absolute top-0 left-0 z-0',
    ],
    loading:'lazy',
    alt: bgImage.altText ?? bgImage.title ?? null,
} %}
{{ craft.images.pictureMultiple(sources, attributes) }}

[CreateSean]

@piotrpog Thank you - the deprecation error didn't mention the new syntax just to change the method.

[piotrpog]

@CreateSean Good catch, i think i will add mention about new syntax in deprecation message.