set sizes for picture-tags, fixes #179

[MrTango]

also: allow to set lazy to false, to suppress the loading="lazy" attribute
this needs to be merged together:
plone/plone.outputfilters#86
plone/plone.base#80

[mister-roboto]

@MrTango thanks for creating this Pull Request and helping to improve Plone!

TL;DR: Finish pushing changes, pass all other checks, then paste a comment:

@jenkins-plone-org please run jobs

To ensure that these changes do not break other parts of Plone, the Plone test suite matrix needs to pass, but it takes 30-60 min. Other CI checks are usually much faster and the Plone Jenkins resources are limited, so when done pushing changes and all other checks pass either start all Jenkins PR jobs yourself, or simply add the comment above in this PR to start all the jobs automatically.

Happy hacking!

[MrTango]

@jenkins-plone-org please run jobs

[erral]

The only thing I see here is that if I request to create the picture tag without requesting any picture_variant but I request an explicit sizes, the generated img tag lacks the srcset and returns the original image in its src.

I understand not requesting any picture_variant and passing an explicit sizes as a way to render the full picture tag with the source with its srcset but passing a custom sizes instead of relying on predefined picture variants, which gives the template developer full control over the rendered HTML code.

This is what I wanted to achieve also in #170 but rendering a single img instead of a full picture.

[erral]

Moreover, I have a question:

If after these changes we are just rendering one source tag, why do we calculate different srcset for each source depending on the picture_variant? We can use the picture_variant to render a different sizes and leave the srcset always the same (rendered with all scales).

This way the code is much simpler and also is the configuration of picture variants.

[MrTango]

The idea is, that the picture variants are defines, as they needed by a designer/integrator or Developer. Calling the picture method without a picture variant does not make sense in my world.
I wanted to avoid that developers have a different way of doing it. Because that leads to templates or code which has to be overridden to customize, when we could just define it all in the control panel or via XML.

Maybe let's have a short call these days on discord.

[MrTango]

I'll give a talk about the picture variants at the German Plone-Tagung and will probably also hold again in English, maybe at PloneConf if i can make it.

[erral]

The idea is, that the picture variants are defines, as they needed by a designer/integrator or Developer. Calling the picture method without a picture variant does not make sense in my world. I wanted to avoid that developers have a different way of doing it. Because that leads to templates or code which has to be overridden to customize, when we could just define it all in the control panel or via XML.

Maybe let's have a short call these days on discord.

I see your point, but that requires developers to predefine the picture variants in the controlpanel, while, as I see, just calling the method and passing the required sizes attribute, would make rendering the HTML tag pretty automatic: always all scales in the srcset and custom sizes.

Anyway, we can talk durinng the Beethoven sprint also :)

[mauritsvanrees]

I have not really looked at this and the related PRs, and it has been a while since I dove in the whole responsive images area. But having a sizes attribute seems good. MDN recommends it.

Have people talked meanwhile to discuss this online or on a sprint?
Is there anything fundamental to discuss here about the approach and goal? Or do we just need to focus on technical details to get this finished?

Are the PRs still up to date, now that PR #170 was merged?
It looks like some tests need fixing.

[erral]

I think that these changes are useful. In #170 I created a new method in the @@images view to have the full srcset automatically rendered with a custom passed sizes. These changes add the sizes attribute to the source tag in picture which is also fine.

[MrTango]

Yes that's all still valid, i have to get back to it after Plone-Tagung is now over ;).
We discussed the topic in Bonn and came to the conclusion to merge both but recommend the picture variants over using the Python method. @erral has the special case that they would need a lot of picture variants, because they have a lot of different variants of pictures, but that's not very common. So in all other cases it recommended to configure your picture variants including sizes and use them, instead of creating code with sizes. This way you can use that setup for multiple projects and just need to change configuration, no need to override code to change sizes.