igy
commented
3 years ago Hi Ryan,
I'm not aware of any current plans to change how the picture() method works and I believe we currently only support the min_width and max_width selectors , but I'd be happy to forward this to the SDK team for consideration as a feature request.
That said, I may be missing something about your requirements and have a follow-up question if you don't mind?
In your example, are you intending to load a completely different image (or different transformation options) on screens with higher device pixel ratios, or just to use larger dimensions with larger DPR screens either by explicitly changing the width and height, adding the dpr transformation to multiply the existing width and height provided?
I ask because if the same image is used each time and only the dimensions will change, my understanding is that browsers will automatically take the device's pixel ratio into consideration when looking at a simple srcset, and will implicitly multiply the 'normal' CSS dimensions by the DPR when choosing which image to use - am I not correct about that, or is there another reason to be more explicit with the media query?
Or to ask another way, is there a practical difference between :
<source
media="(max-width: 600px) and (min-resolution: 2dppx)"
srcset="https://res.cloudinary.com/mycloud/image/upload/q_auto/f_auto/dpr_2,w_500/v1/example-image">
<source
media="(max-width: 600px)"
srcset="https://res.cloudinary.com/mycloud/image/upload/q_auto/f_auto/w_500/v1/example-image">
....and
<source
media="(max-width: 600px)
srcset="https://res.cloudinary.com/mycloud/image/upload/q_auto/f_auto/w_500/v1/example-image">
<source
media="(max-width: 1200px)"
srcset="https://res.cloudinary.com/mycloud/image/upload/q_auto/f_auto/dpr_2,w_500/v1/example-image">
<source?
ryanmeador
Feature request for Cloudinary_NPM SDK
Explain your use case
I'd like to be able to automatically generate
sourcevariants based on DPR inside apicturetag. Currently, we can usecloudinary.picture()to generate apicturetag, but there doesn't seem to be a way to factor DPR into either thesrcsetURLs nor the media query.Describe the problem you’re trying to solve
High-resolution screens, such as those on many Apple products, require higher-resolution images to display at full quality than the size in CSS pixels would suggest. There are (at least) two mechanisms in HTML and CSS to solve this: the
srcsetattribute ofsource(orimg) tags can specify multiple URLs (each tagged with the pixel density), or you can use themin-resolutionCSS media query. I'd like to be able to generatepicturetags that look like these:srcset example
media query example
As far as I can tell, neither of these are possible to generate using the options to the picture function, invoked like this on my Node backend:
Do you have a proposed solution?
I propose we could generate the first one with a new attribute like this:
Or generate the second one with something like this:
The second proposal more closely matches the existing interface of the
picturefunction, is more flexible, and is probably easier to implement, but it requires repeating the DPR twice in each source specification (once asmin_resolutionand once asdprin the transformation). In my mind, the entire point of this library is to save us from tedious and error-prone boilerplate, so I don't like having to repeat that. Thus, I think the first proposal is probably the better choice.Is there any plan to implement a solution like this? If not, would you accept a PR that implements one of these? Thanks!