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?
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.
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.
We had this issue with a client project as well and created a script that allows you to show or hide any desired element based on the device, OS or browser being used by the site visitor.
Here is a link to the tutorial video that goes through the problem as well as walking you through the solution.
If there are any questions please feel free to tag me!
Happy Friday!