Responsive Image Map on WordPress?
November 3, 2016 12:11 PM Subscribe
I want to create a responsive image map for a website running on the WordPress platform. What is the best method for doing so?
The image map is a photo of a display with 30-40 items arranged in four rows. I would like for each item to be clickable, opening a close-up image of that item - ideally in a scrollable lightbox (but an attachment page would do). Captions, tooltips, and other annotations would be nice as well.
I tried making one using standard HTML [map] and [area] tags but that did not work.
I've tried most of the plugins that come up in a search on Wordpress.org for "responsive" and "image map" and none have worked.
The image map is a photo of a display with 30-40 items arranged in four rows. I would like for each item to be clickable, opening a close-up image of that item - ideally in a scrollable lightbox (but an attachment page would do). Captions, tooltips, and other annotations would be nice as well.
I tried making one using standard HTML [map] and [area] tags but that did not work.
I've tried most of the plugins that come up in a search on Wordpress.org for "responsive" and "image map" and none have worked.
Your image is a representation of a grid, so use a grid. I'd snip the image up into blocks and then arrange the grid using unordered lists and CSS. Each item is it's own element and you then do what you want with each individually.
posted by humboldt32 at 3:07 PM on November 3, 2016
posted by humboldt32 at 3:07 PM on November 3, 2016
Seconding SansPoint re imagemaps and accessibility/load time good practices.
The real problem is scaling. On a mobile/smaller screen, even if you just tell the image itself to scale appropriately to the viewer's screen width [single image "responsive" behavior], it's going to be difficult to designate large enough distinct "tappable" or "clickable" areas for each of the items in the photo. If you don't scale it down, the image probably won't fit on smaller screens and the viewer will have to scroll and/or need cues to scroll appropriately.
Humboldt32's thinking more along the lines of what I would do, snipping the large image up into smaller images and treating them as individual elements [except I would use flexbox CSS, but unordered lists can also work well; it really depends on what else you're doing in context]. In either case, once coded properly, the item-images would rearrange themselves to display more appropriately on various screen sizes, relative to the size and proportion of each screen [multiple images "responsive" behavior]. For example, if you have 40 items, and each item is 50 px wide, with a 300 px [mobile-typical] wide screen, you'll have [modulo margin, border, padding] 6 rows with 6 items and a 7th row with 4 items, and probably some vertical scrolling to see all the items. If your screen is 1300px wide [more typical of desktop], you'll have 1 row of 26 items and 1 row of 14 items [unless you set an appropriate max-width], and will be less likely to need to vertically scroll to see all the items.
posted by Pandora Kouti at 8:19 AM on November 4, 2016
The real problem is scaling. On a mobile/smaller screen, even if you just tell the image itself to scale appropriately to the viewer's screen width [single image "responsive" behavior], it's going to be difficult to designate large enough distinct "tappable" or "clickable" areas for each of the items in the photo. If you don't scale it down, the image probably won't fit on smaller screens and the viewer will have to scroll and/or need cues to scroll appropriately.
Humboldt32's thinking more along the lines of what I would do, snipping the large image up into smaller images and treating them as individual elements [except I would use flexbox CSS, but unordered lists can also work well; it really depends on what else you're doing in context]. In either case, once coded properly, the item-images would rearrange themselves to display more appropriately on various screen sizes, relative to the size and proportion of each screen [multiple images "responsive" behavior]. For example, if you have 40 items, and each item is 50 px wide, with a 300 px [mobile-typical] wide screen, you'll have [modulo margin, border, padding] 6 rows with 6 items and a 7th row with 4 items, and probably some vertical scrolling to see all the items. If your screen is 1300px wide [more typical of desktop], you'll have 1 row of 26 items and 1 row of 14 items [unless you set an appropriate max-width], and will be less likely to need to vertically scroll to see all the items.
posted by Pandora Kouti at 8:19 AM on November 4, 2016
Response by poster: Thank you for the responses and ideas. I very much appreciate the accessibility issue SansPoint addressed and had been thinking it myself.
The grid idea won't work because the items are not distributed evenly and all have irregular shapes.
It does not seem possible to do this well but it is better to know that than vaguely suspect it.
posted by jammy at 7:54 AM on November 14, 2016
The grid idea won't work because the items are not distributed evenly and all have irregular shapes.
It does not seem possible to do this well but it is better to know that than vaguely suspect it.
posted by jammy at 7:54 AM on November 14, 2016
« Older Supportive NYC tax expert needed to help sort out... | Suggestions for better understanding my sexuality. Newer »
This thread is closed to new comments.
What you want is an image gallery/lightbox plugin. It's more flexible, works on mobile, and it'll be easier to swap stuff in and out.
posted by SansPoint at 12:45 PM on November 3, 2016 [4 favorites]