[Feature] Picture Tag Component

[Baroshem]

The library currently supports CldImage giving developers a simple way to use cloudinary assets.

An alternative image-related element is the picture element which allows for different capabilities.

Having this would allow developers to use Cloudinary in a way that makes more sense for Picture-related usage.

Describe the solution you'd like A basic usage pulled from MDN is:

<picture>
    <source
        srcset="/media/cc0-images/surfer-240-200.jpg"
        media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="">
</picture>

Theoretically, it would make sense that the <img above would be the <CldImg, where <picture becomes a wrapper with an additional <source element, leaving something along hte lines of:

<CldPicture>
    <CldSource
        srcset={[{ src: 'cc0-images/surfer', width: 240, height: 200 }]}
        media="(min-width: 800px)"
    />
    <CldImg width="298" height="332" src="cc0-images/painted-hand" alt="" />
</CldPicture>

This is just an idea and am open to ideas and suggestions.

[Baroshem]

https://github.com/cloudinary-community/svelte-cloudinary/issues/59#issuecomment-1742893822

[Yasir761]

I want to work on this issue, can you please assign it to me ?

[Baroshem]

Sure @Yasir761 go on!

If you need any help, just let me know :)

[Yasir761]

@Baroshem, I want to know that, can I make a different Component or refactor CldImage component.

[Baroshem]

@Yasir761

Create another component please. Lets leave CldImage safe :)

[Yasir761]

@Baroshem, can u review my PR

[Baroshem]

@Yasir761

I have requested changes in your PR to adjust it to how the module works now and how it should behave with your change :)

[Baroshem]

Hey,

I decided to close this issue. The usage of CldPicture in that form would be just a wrapper around browser native tags which does not make much sense to me. Users can still use something like this:

<picture>
    <source
        srcset="/media/cc0-images/surfer-240-200.jpg"
        media="(min-width: 800px)">
    <CldImg width="298" height="332" src="cc0-images/painted-hand" alt="" />
</picture>

And they will get the same result while for us it is much easier to maintain. I understand the reasoning for having this idea in the first place but after a longer investigation, I think there is no need for that.

Thanks @Yasir761 for your work. I really appreciate it :)