One image, twice (or more) on page, same resize width, different clip settings -> first loaded image wins for all

[tpinne]

If you have the same image one or multiple times on the page with different clip settings and want to resize them to the same width, then the clip settings for the first loaded image by the browser will be used for all variants of this image.

Use case
You have one content block which shows an image in landscape. And another content block which shows an image in portrait. And you want to use a portrait portion of the same image. Or you create <picture> elements with art direction where you choose the same image multiple times but with different clip settings to get different aspect ratios for different viewports.
Because you are on a tablet you want both variants resized to 768px.
Then the first image which the browser tries to load generates the json file inside .jobs directory for the 768px image width with its clip settings.
When then the other image gets loaded, it will be loaded with the clip settings from the previous one, because the job files only account for width (and height) but not for the clip settings.

Ideally the clip settings would be somehow encoded into the job filenames because the clipping creates a different instance of the same image at the same width. But I don't know if that's possible. Fairly new to Kirby. It might be an error on my end that I'm missing something. But I don't think so, yet.

[mullema]

Hi @tpinne
Can you please provide an example blueprint/code snippet which shows the problem? I am not able to reproduce it.

[tpinne]

I try to provide you with a more specific example + explanation in the coming days.