search

ErikHen / PictureRenderer.Optimizely

PictureRenderer for Optimizely CMS (former Episerver)
MIT License
13 stars 4 forks source link

[Request] Different Aspect Ratios per media query for Art Direction #21

Closed milanvogels closed 1 month ago

milanvogels commented 7 months ago

Feature request: I would like to use different aspectratios or fixedheight per mediaquery when using the picture element for art-direction https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction

For example if you want to have a portrait crop for mobile and a landscape crop for larget screens.

Example: 

<picture>
<source media="(min-width: 1280px)" srcset="image.jpg?width=1920&height=800"/> // Desktop Landscape
<source media="(min-width: 768px)" srcset="image.jpg?width=1280&height=640"/> 
<source media="(min-width: 480px)" srcset="image.jpg?width=768&height=350"/>
<img src="image.jpg?width=320&height=640" alt="" width="1920" height="800 "/> // Mobile Portrait Image
</picture>

with MultiImageMediaConditions we can define widths for multiple media conditions, but we cant assign different heights or aspectratios.

ErikHen commented 7 months ago

Hi. This could probably be done. You are welcome to try solving it yourself. You can fork the PicureRenderer project (https://github.com/ErikHen/PictureRenderer) and make a pull request. I'm happy do assist in any way. You can probably also solve this by render two different picture elements with different picture profiles, and show one for mobile sized screens, and one for desktop size.

ErikHen commented 1 month ago

Closing this. Planning to remove multi-image support in next major version.