Created
October 22, 2019 15:38
-
-
Save pmacMaps/082e61006f6f3996cad67ff22b764e53 to your computer and use it in GitHub Desktop.
Add Alt Attribute to Images in Esri Map Tour StoryMap (Classic Series). Code is supported in IE11
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 = "".concat(defaultAltText, "; map tour stop: ").concat(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 | |
for (let i = 0; i < thumbImgContainer.length; i++) { | |
// child img element - adding alt attribute to this | |
const imgElement = thumbImgContainer[i].getElementsByTagName('img')[0]; | |
// next sibling element - div with name of tour stop text | |
const siblingElementText = thumbImgContainer[i].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 | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a Microsoft Internet Explorer 11 supported version of another Gist.
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