Products.cmfplone: Support for modern image scales (Plone 6)

[tisto]

PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Timo Stollenwerk

Seconder: Victor Fernandez de Alba, Asko Soukka

Abstract

Modernize the default image scales that Plone 6 uses by default.

Motivation

Modern websites and web design heavily rely on large-scale and high-resolution images. Supporting retina image scales was a step in the right direction. Though, Plone's current image scales currently uses 768px as maximum image scale. It is fair to assume that every Plone integrator adds larger image scales for every project and that the smaller image scales are barely used.

Assumptions

Plone Classic would gain from new default image scales as much as Volto. Therefore it makes sense to PLIP this for Plone core and not outsource that to the new Volto policy product. It would certainly be possible to use the new scales for Volto only and not to touch the Plone default scales.

Proposal & Implementation

Plone 5.2 Image Scales

large 768:768 preview 400:400 mini 200:200 humb 128:128 tile 64:64 icon 32:32 listing 16:16

https://github.com/plone/Products.CMFPlone/blob/5.2.x/Products/CMFPlone/interfaces/controlpanel.py#L1479

Add new image scales to Plone core profile:

huge 1600:65536
great 1200:65536
large 800:65536
preview 400:65536
mini 200:65536
thumb 128:128
tile 64:64
icon 32:32
listing 16:16

Source: https://github.com/datakurre/my-volto-app/commit/89c86ba93db2ad404f45a7dfc5fc9dde686390e6

We tried to keep the old scales (listing, icon, tile, thumb, mini, preview, large) and only slightly amend them to fit scales that can easily be calculated (this is important for srcset calculations).

We added new scales (large, great, huge) to reflect the requirements of modern image-heavy websites.

We use 65536 as maximum height for the major of the scales to allow downscaling only by width. This is required to make it easy to use Plone image scales in responsive img tags with src-set and sizes -attributes (see the example). Otherwise image widths could vary, making it unnecessary complex to properly use sizes-attribute (or face upscaled images on some screen sizes).

The current proposal is a compromise to keep some kind of backward compatibility. It would certainly be possible to drop all old scales and start from scratch. Though, that would possibly cause more issues when upgrading.

Deliverables

Add new image scales to Plone core.

Risks

• Database size might grow since we store more image scales. Since image scales are still created on the fly this risk is pretty low. If integrators do not use those image scales, there will be no difference.
• Upgrading from Plone 5 to Plone 6 and keeping the old scales only will slightly amend the scales that are created. Though, since we only slightly amended the image sizes (e.g. 768 -> 800), the risk is bearable.

Participants

• Timo Stollenwerk
• Victor Fernandez de Alba
• Asko Soukka

[ale-rt]

I like the idea.
There was already an attempt by @MrTango https://github.com/plone/Products.CMFPlone/pull/2085/commits, with this scales https://github.com/plone/Products.CMFPlone/pull/2085/commits/063b9f5e7023dab2aa2ab8103101373443e6b3f0

Instead of having 65536, IMO it would be cooler have the scale code understand something like:

huge 1600:-1
whatever -1:120

Where -1 means "scale according to the other dimensions".
Instead of -1 something else can be used (e.g. inf, x or just an empty string).

[MrTango]

In general I'm all in and it's long over due.
But for thumb 128:128 i would definitely go for 200:200, plonetheme.barceloneta was always expecting the scale anyway, at least in the album view, so this view was always look broken.

I would prefer this matrix:

huge 1600:-1
large 1200:-1
preview 800:-1
mini 400:-1
thumb 200:-1
tile 64:64
icon 32:32
listing 16:16

[MrTango]

@agitator @thet ideas?

[agitator]

No more ideas, just finally do it ;-)
Including the bigger thumb scale.
No upgrade step, just the default for new sites.

[tisto]

@MrTango @ale-rt @agitator sorry for the noise and my complaints. I investigated this and saw that this was just a PR that hasn't been merged yet.

[tisto]

@ale-rt @MrTango did you try using "-1" as a value for the scales? Does that work and is properly interpreted by Pillow?

cc @sneridagh @datakurre.