search

plone / plone.outputfilters

Provides a framework for registering filters that get applied to text as it is rendered.
6 stars 15 forks source link

Add image sourcesets filter #49

Closed MrTango closed 2 years ago

MrTango commented 2 years ago

Add's support for srcset, by converting imgages into srcset's as defined in the srcset field in the imaging-controlpanel. This needs the follwing PR to be merged to make sense:

mister-roboto commented 2 years ago

@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 commented 2 years ago

@jenkins-plone-org please run jobs

MrTango commented 2 years ago

still needs some unit tests

mauritsvanrees commented 2 years ago

I have added branches of plone.base and plone.outputfilters: maurits-sizes, based on your current code. It adds support for sizes. With this in the sourceset:

   {
    "scale": "large",
    "sizes": "50vw"
   },

it generates a source tag like this:

<source ... 
 sizes="50vw"
 srcset=".../@@images/bdfe3d43-99ea-47ff-9cc6-67f65cc22063.jpeg 800w">

I am still a bit hazy on how to properly use this. Maik thinks it does not do much else than what you can do with the current code with media queries. And it seems to interfere with doing some of this in css instead. For those who want to try it it, the branches can be useful. It is best to try this on a fresh Plone Site, otherwise you need to reload the IImagingSchema and add sizes to the allowed html attributes.

The w800 that is added in the srcset attribute may be needed in other cases as well. Can be taken from commit 89b177d07a7397342abcdcc355c7962252bc48cd.