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