Created a CldPitcure Component as suggested in isssue description

Yasir761 commented 12 months ago

Created a CldPitcure Component as suggested in isssue description, Fixes #160

netlify[bot] commented 12 months ago

Deploy Preview for nuxt-cloudinary-module ready!

Name	Link
Latest commit	2a2a9448f85c49f181950965fb3b538447eb9f7f
Latest deploy log	https://app.netlify.com/sites/nuxt-cloudinary-module/deploys/6522655e86a620000882a36b
Deploy Preview	https://deploy-preview-161--nuxt-cloudinary-module.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

colbyfayock commented 12 months ago

quick thought on implementation here that I'd love to get both of your thoughts on

a lot of patterns I'm seeing in different frameworks and with Nuxt itself is not to generate <source> tags from a top level prop, rather allow someone to define those as they wish from within the component, just as you would with native HTML

For instance:

Nuxt Picture appears to be a drop-in replacement - it doesn't offer a prop for sources, and I assume the expectation is to pass your own source? https://image.nuxt.com/usage/nuxt-picture also worth skimming this https://github.com/nuxt/image/issues/309
Next.js exposes helper functions instead of components, i think components can be a bit cleaner, but worth pointing out, as they still use: https://nextjs.org/blog/next-13-5#nextimage-improvements
Unpic is actually not creating a Picture tag and only creates Source tags: https://dev.to/ascorbic/level-up-your-web-images-with-unpic-picture-tags-4jh1

so with that in mind, and not from a sense of "everyone else is doing it", but I'm wondering if creating an API that's closer to HTML standards, but also seems to be the pattern Nuxt is following as well (correct me if i'm wrong, im skimming docs/google here)

perhaps something like what was in the original issue would make more sense?

<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>

Baroshem commented 12 months ago

Your comment @colbyfayock is really reasonable.

But at this point I wonder what the user will actually get when he will need to use CldPicture and CldSource that works almost the same as normal html tags.

This is a code that must be maintained while it does not provide any significant value as it can be 1:1 replaced with natvie html.

Dont get me wrong. We can try with the implementation of it as it was innthe original description but it could not be as useful as CldImage, CldVideoPlayer, CldOgImage, etc

colbyfayock commented 12 months ago

ill defer to your judgement but i would expect the biggest reason is to remain closer to HTML standards for the picture API. it also might give additional flexibility in how they compose the source? i'm not sure

nuxt-modules / cloudinary