<prismic-image> and srcSet

Developing with Prismic
1

Hi,

I'm struggling to understand how I can use <prismic-image> with multiple image sizes.

I've created the cuts in the image library and the different cuts are being supplied in the JSON response - but how do I get <prismic-image> to accept and change the src at the defined browser sizes/resolutions?

Thanks.

5

Hi Aidan,

Sorry about the delayed response, we had some public holidays falling over the last few days. When you talk about the "different cuts", are they being supplied to the same image field in the Prismic editor as different "Responsive views" in the Custom Type?

You only need to supply the name of the image field as shown here:

7

Hi Phil, no problem - thanks for getting back to me.

My use case for this is two-fold:

With one image:

  • Use a mobile crop for mobile devices (shifting focal points)
  • Use full image for tablet and up

I also need to factor in pixel density so that mobile devices are served the 2x images.

This would theoretically mean 4 different variations:

  • mobile@1x
  • mobile@2x
  • desktop@1x
  • desktop@2x

Is there a way to feed all this into one <prismic-image> component and tell it to select the 2x image on 2x displays?

Cheers,
A

8

Can you show me how you're configuring this in the Custom Type?