Only generates one images size and source

[renestalder]

I installed the plugin and setup a test case with the same code from the readme. Interesting enough, it only generates the first size (width: 1440, height: 460). It feels like using the getUrl with the resize filter somehow memorizes the given options and then applies them to all other occurrences of getUrl | Filter.

That's what the output looks like:

<picture>
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x" media="(min-width: 640px)">
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x">
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x" media="(min-width: 640px)">
    <img class="articleHero-image" srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x" alt="Die in rot gestrichene Bar des Wartsaal Kaffee's">
</picture>

@luwes Can you confirm that the example in the readme works the way you think it should?

[renestalder]

Also, because the format in the img tag is a webp (which isn't defined in the source from the readme) kind of confirms my assumption that there is some problem with memorizing/reusing an old instance.

[renestalder]

Here's another test case that shows how the instance is reused in a wrong way. See where I use the image2 instance and how the output looks correctly for that part:

{% set image = "src/static/images/wartsaal_bar.jpg" | sharp %}
{% set image2 = "src/static/images/wartsaal_bar.jpg" | sharp %}

<picture>
    <source srcset="{% getUrl image | resize({ width: 1440, height: 460 }) | webp %} 1x, {% getUrl image2 | resize({ width: 2560, height: 800 }) | webp %} 2x" media="(min-width: 640px)">
    <source srcset="{% getUrl image | resize({ width: 640, height: 320 }) | webp %} 1x, {% getUrl image | resize({ width: 1280, height: 640 }) | webp %} 2x">
    <source srcset="{% getUrl image | resize({ width: 1440, height: 460 }) %} 1x, {% getUrl image | resize({ width: 2560, height: 800 }) %} 2x" media="(min-width: 640px)">
    <img class="articleHero-image" srcset="{% getUrl image | resize({ width: 640, height: 320 }) %} 1x, {% getUrl image | resize({ width: 1280, height: 640 }) %} 2x" alt="Die in rot gestrichene Bar des Wartsaal Kaffee's">
</picture>

Output:

<picture>
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-2560x800.webp 2x" media="(min-width: 640px)">
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x">
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x" media="(min-width: 640px)">
    <img class="articleHero-image" srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x" alt="Die in rot gestrichene Bar des Wartsaal Kaffee's">
</picture>