Upload different image versions for responsive devices in CMS multi-images?

Hi there! I wanted to know if it’s possible to upload an image for desktop and then an alternate image for tablets/mobile devices.

I know this is possible when you are uploading a background image (easy peasy!) but is there a way to make that happen when you are using a CMS multi-image field?

Thanks in advance!

Absolutely. Simply toggle the visibility conditions of the image’s parent.

For example:

Have two elements that you are going to use, and have the image element itself as the child. Let’s call the two parents image-wrap and mob-image-wrap.

Then you just need to use the Display settings for each element to show or hide as appropriate for each viewport.

image

You could also use a single element class (e.g. image-wrap) and apply a mobile combo class to it, to achieve the same outcome.

Does that make sense?

It makes total sense! I created a new field in my collection to add the new mobile images, but for some reason, I can’t seem to add them to link them to the new image-wrap.

Am I missing something?

Captura de pantalla 2020-03-04 a las 15.52.53

Captura de pantalla 2020-03-04 a las 15.53.05

Open link to PREVIEW site

That’s a beautiful site!

Could you tell me exactly what page/collection we’re talking about here, so I can make sure I’m looking at the right one?

Thanks, Andy!
I’m working with the “projects” collection, using the “Projects Template” collection page.

Just to be clear - hiding images only does that, hiding them. They are still downloaded and rendered to the site. Same for any divs that are hidden.

1 Like

Absolutely. I made the assumption that OP simply wanted a different image - I should have checked if it was for performance reasons etc, in which case my solution is not the best one to use.