Need Help with Implementing Responsive Images in Grav CMS

Support
1

Hello,
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:

  1. Display ‘horizontal.jpg’ for desktop devices with appropriate coordinates.
  2. 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:

<img loading="lazy" title="image title" usemap="#image-map" alt="my alt" src="{{ theme_url }}/images/001-full.jpg" style="object-fit: contain;width: 100%;height: 100%;display: block;">
         
<map name="image-map">
    <area target="" href="#" coords="529,511,4,0" shape="rect">
    <area target="" href="#" coords="1064,512,535,3" shape="rect">
    <area target="" href="#" coords="1072,512,1599,1" shape="rect">
</map>

Or, maybe it’s not possible to achieve the desired results with built-in Grav functionality?

2

@01K, I’m afraid Grav won’t help you with this…

  • Grav can help you with presenting images (<img>) with different resolutions, but not with art direction (eg. horizontal vs vertical cropped images).
  • Nor does Grav help you with maps (<map>).
3

Understood,
probably I need a CSS code, which will replace the horizontal image with vertical on mobile device and JS code to inject map code…

4

@01K

probably I need a CSS code, which will replace the horizontal image with vertical on mobile device

I’m afraid that won’t work. Using css you can only set the background image of an element and <map> will only work together with <img src="..." usemap="...">

You might try adding two maps using Twig and use js to inject/update an <img> with the proper src and usemap attributes depending on the dimensions of the viewport.

5

Thank you!
I did it in that way and it seems, that now I have a working solution!

6

BTW: why are you using so old methods? I haven’t been using maps for decades. I guess using a SVG would resolve lots of your troubles, including these with responsiveness.

7

Because it was the first solution which I have googled and it was working from the beginning :slight_smile:
Have you seen such examples on stack overflow or somewhere else?

8

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.

9

blazejs, understood, thanks!