I’m looking for assistance with implementing responsive images in my Grav CMS site. I have two versions of images: ‘horizontal.jpg’ for desktop and ‘vertical.jpg’ for mobile devices.
Additionally, I’m using the image map where coordinates differ depending on which image to display.
I want to use Grav’s built-in functionality to achieve the following:
Display ‘horizontal.jpg’ for desktop devices with appropriate coordinates.
Display ‘vertical.jpg’ for mobile devices with appropriate coordinates.
Here is the original code of the image with coordinates which is displayed on all devices:
I’m sorry, I wasn’t examining such a case close enough as I wasn’t in need to build something like that. I’ve seen an example of interactive Europe map, long time ago, that was doing the same, but without the old tag. It was using CSS and JS. Unfortunately it’s already gone, but lots of things can be now made with SVG, just remember you need this SVG to be set inside HTML file to have the full control over it.