Imagemap not responsive in Wordpress

Software GIMP
1

I have copied and pasted the page content from a Drupal page to a WordPress page. On this page, we have an imagemap created with Gimp.

On the Drupal version of the page, the imagemap is responsive. The coordinates for each different area with a hover link scales correctly at smaller screen widths.

The same exact code on the WordPress version of the page produces an imagemap where the coordinates do not scale. If you view the WordPress page on a mobile phone the areas with the hover links keep using the coordinates based on the image displaying at full screen width.

Any idea how to remedy this? This is very curious behavior that I can’t explain. Thanks for any assistance anyone can provide.

2

I’d copy the associated CSS from drupal to wordpress.

1 Like
3

There is no CSS specific to the imagemap to my recollection. I’m looking at it on the Drupal site and not seeing anything in our code for special CSS IDs or classes. It is possible that something is getting added on the Wordpress site though. I was thinking it may have something to do with Wordpress’ HTML filtering, but wanted to ask here first in case anyone else has experienced this already and has an easy fix. There is a Wordpress plugin called Raw HTML that prevents the Wordpress HTML filter from doing anything to your code. I’ll try that now. OK, I just tried that and it didn’t solve it.

Here is the Wordpress version of the page:

And here is the Drupal version of the same page:

I’m baffled by the difference here.

4

I am seeing that Wordpress is changing the image URL. Instead of using the image URL that is in my page code,

shop.fyccn.org/wp-content/uploads/2022/02/10-21_Region-Map-with-Coordinators.png

It is instead using:

i0.wp.com/shop.fyccn.org/wp-content/uploads/2022/02/10-21_Region-Map-with-Coordinators.png?resize=1056%2C816&ssl=1

Could this ?resize=1056%C816&ssl=1 part of the URL have anything to do with why the imagemap isn’t responsive here?

5

It seems that it’s doing some resizing. Can you disable it?

6

I’m finding ways to disable image resizing throughout the entire website, but I don’t know if doing that will have bad unintended consequences for other functionality/display on the site. I’d like to find a way to disable that only for this imagemap image, but I’m not finding that so far.

7

Note though that the dimensions it is using to resize the image are the correct dimensions for the image. So it actually isn’t resizing it. I’m just thinking whatever this process is that is adding that resizing code to the image URL might be what’s causing the imagemap to no longer be responsive somehow.