Skip to content

Instantly share code, notes, and snippets.

@pmacMaps
Last active October 22, 2019 15:41
Show Gist options
  • Save pmacMaps/5d50a947107ac920354a9d3cf3c060c0 to your computer and use it in GitHub Desktop.
Save pmacMaps/5d50a947107ac920354a9d3cf3c060c0 to your computer and use it in GitHub Desktop.
Add Alt Attribute to Images in Esri Map Tour StoryMap (Classic Series)
require(["dojo/topic"], function(topic) {
// default alt text to apply to images
const defaultAltText = 'a view along the Yellow Breeches Creek';
// function to set alt attribute for images
function setAltText(title,img) {
// use grouped text if slide title text exists
if (title) {
// grouped text
const groupedAltText = `${defaultAltText}; map tour stop: ${title}`;
// set grouped alt text
img.setAttribute('alt', groupedAltText);
} else {
// set default alt text
img.setAttribute('alt', defaultAltText);
}
}
// The application is ready
topic.subscribe("maptour-ready", function(){
// colorbox element - container for modal image
const colorboxElement = document.getElementById('colorbox');
// options for mutation observer
const colorboxObserveOptions = {
childList: true,
subtree: true
};
// create mutation observer of colorbox div element
// console logs an error, but alt text is still set
const imgModalObserver = new MutationObserver(function() {
// title text
const titleText = document.getElementById('cboxTitle').innerHTML;
// img element
const imgElement = document.querySelectorAll('div#cboxLoadedContent > img.cboxPhoto')[0];
// set the alt text attribute
setAltText(titleText,imgElement);
});
// run observe method
imgModalObserver.observe(colorboxElement, colorboxObserveOptions);
// element containing thumbnail images
const thumbImgContainer = document.querySelectorAll('div.carousel-item-div > span');
// loop through span elements and add alt attribute to images
thumbImgContainer.forEach(function(element) {
// child img element - adding alt attribute to this
const imgElement = element.getElementsByTagName('img')[0];
// next sibling element - div with name of tour stop text
const siblingElementText = element.nextElementSibling.innerHTML;
// set the alt text attribute
setAltText(siblingElementText,imgElement);
});
}); // end maptour-ready
// After the new point is displayed
topic.subscribe("maptour-point-change-after", function(){
// featured image for map-tour
const featImg = document.querySelectorAll('div.member-image.current > img')[0];
// title text for image card
const titleText = document.querySelectorAll('div#placard > div.name')[0].innerHTML;
// set alt attribute text
setAltText(titleText, featImg);
}); // end maptour-point-change-after
});
@pmacMaps
Copy link
Author

This code represents my attempt to add the alt attribute to the various slide images that load on the Esri Map Tour StoryMap application. I am receptive to people improving my solution.

Here are the places where the slide images appear:

  • carousel on the bottom of the map
  • within the "featured image" section. This location changes based upon the layout option you're using
  • within a pop-out modal

map-tour-screnshot-1
map-tour-screnshot-2

@pmacMaps
Copy link
Author

If you need to support Microsoft Internet Explorer, please see this Gist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment