Only include the original image in the Image component if the image does not have all the scales present. Fixed and update tests.

[sneridagh]

Follow up: #7486 (Seven PR):

• Add a default scale size which is large enough to serve full-width images on a large high-DPI monitor -> Add 2k and 4k scale sizes plone.volto#205
• Fix the image field serializer in plone.restapi to include the same scales as the code which creates image_scales for the catalog (so that we aren't generating scales larger than the original). -> Limit image scales to those smaller than the original plone.restapi#1992
• Always set sizes appropriately when we use the Image component (so that we don't end up with the largest scale when a smaller one would be sufficient)

[davisagli]

The presence of the original image didn't force the browser to choose it. But we set width and height to the original size and in most cases didn't set sizes, so the browser didn't have any way to know it could use a smaller scale.

I think setting sizes appropriately would allow the browser's scale selection to work better even if we did always include the original image. I have a slight preference for leaving the original image there, because if we remove it then it takes extra work to use it in the use cases where it's really what you need (i.e. full-width on a large monitor)

[davisagli]

Ideally we should use a smaller size when there are multiple columns.

I don't love hardcoding the default width, but I don't have a better suggestion. We can't use CSS properties because the whole point of sizes is to give the browser enough information to pick the right image before CSS has loaded.

[sneridagh]

@stevepiercy I accepted all the suggestions, but David is working in the backend side, and we might amend them a bit the next days. Thanks!

[stevepiercy]

@sneridagh @davisagli please ping me again for a review when it's done cooking.

[stevepiercy]

Can someone else fix the broken links? I'm swamped.

https://github.com/plone/volto/actions/runs/19663404467/job/56314471303?pr=7655

[sneridagh]

@stevepiercy it seems medium added some antibot measures... we cannot do anything about it. How do we proceed with this use cases?

[stevepiercy]

@sneridagh for Medium, ignore the entire domain with a regex in conf.py. There are existing examples. It also needs to be applied to the upstream plone/documentation conf.py.

For the others, fix the links that redirect.

[sneridagh]

@davisagli once plone/plone.volto#205 is merged and released, we can go for this one. We might want to amend the docs with the released p.volto version.

@stevepiercy I amended the docs to reflect the latest changes.

[wesleybl]

It would be better if this were a configuration. Different themes may have different sizes.

[davisagli]

@sneridagh I took another look at this. I still think it would be nice to make the following improvements:

1. Add a config setting for the widths, instead of hardcoding 940px. (Also ideally inject them from the config setting into the CSS properties to avoid duplication, but we can live without that.)
2. Give the teaser block contextual information about how many columns there are, so it can use smaller sizes when there are multiple columns.

But, I would be okay with merging this and adding those improvements incrementally.

[erral]

I would say that for the srcset attribute we need to always show the original image URL with its original width set. We have been seen this also in classic and have just prepared a PR in plone.namedfile.

Our usecase was the following:

The srcset attribute was showing only the URLs of scales that are smaller than the original url. In our example, the user uploaded a 500px image, so the srcset showed the 400px one as the first scale. The sizes attribute was setting a 500px wide space, so the browser was rendering the 400px scale, when the original image would fit perfectly.

[davisagli]

@erral This still includes the original image in the srcset unless it is enormous (width greater than the largest defined scale size, which is 4000 pixels in Plone 6.2)