Add Image Maps

FAQ

Installation Instructions

1. Unzip add-img-maps.zip into the /wp-content/plugins/ directory, or simply install through the WordPress plugins screen.
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Go to Settings for Image Maps to turn on the features you want.

How does it work with responsive images?

HTML Image Maps don’t play well with responsive images; their dimensions are absolute, and they don’t scale up or down when CSS resizes the image. This is a problem with the image maps themselves.

WordPress 4.4 onwards includes srcset and sizes attributes to make all images responsive. So this plugin takes a couple of steps to solve this, both of which can be turned off or on in the plugin settings page.

Firstly, it optionally turns off the responsiveness for images with maps, by deleting their srcset and sizes attributes.

Secondly, it incorporates David Bradshaw’s Image Map Resizer script to keep image maps the same size as their images. This is useful not just for responsive images, but for every image that is displayed in other than full size.

Why isn’t my image map working?

Add Image Maps doesn’t search the page HTML to find every image (which would slow the plugin down). Instead, it asks WordPress which images are attached to the post/page (or featured, or the header). Unfortunately, depending on the editor you use, it’s possible to add an image to post or page content bypassing the WordPress paperwork that this plugin relies on.

These are the things to check:

Did you add the Image Map to the right instance of the image?

When you add images to a theme, as a header or an icon, WordPress sometimes creates a new cropped or shrunk image. Those copies do not appear in the media library grid screen, so they’re easy to miss. They are listed in the Add Image Maps box on the attachment edit screen, with a link to their attachment edit screen.

Is the image attached to the post/page in the WordPress database?

(Skip this if it’s the featured image or the header, which are checked separately.)

The Add Image Maps box tells you which post/page (if any) the image is attached to.

You can change which images are attached to which pages if, as an admin, you go to the Media Library and choose the list view.

 
Attached?

“Attached”, in this context, doesn’t quite mean exactly the same thing as appearing on the page.

By default, the images “attached” to the post are the ones uploaded whilst editing it, which is why they are listed as “uploaded to this page” in the post edit screen. Depending which editor you use, you can easily end up putting an image on a post without “attaching” it. And if you upload an image to a page, and then remove the image, it will still be “attached”.

You can see which images are attached to what quite clearly on the Media Library screen in List mode (jpg).

 

Does the site theme include the image ID in its markup?

Unfortunately, solving this involves writing something on the Text tab of the post editing screen.

Most themes, when the insert images into pages, include the image’s WordPress ID somewhere in the HTML. (The number on the edit screen address after post =). The most popular ways are as the value of an attribute called data-attachment-id or a series of CSS classes of the form wp-image-1234, ending in the id number.

If your theme doesn’t have those, then Add Image Maps will try to recognise it by filename, but that’s not guaranteed, and you might have to manually add one of those to the HTML. If you aren’t familiar with the text tab, this is how to do it:

1. Go to the image edit screen, and copy the image ID number from after post= in the web address
2. Go to the page/post edit screen
3. Go to the text tab, and find the start of the <img tag.
4. After <img, paste data-attachment-id="XXX", replacing XXX with the ID number