// This function adds images to location containers based on their categoryIds function addImages() { // Select all locationItem_container elements const locationContainers = document.querySelector( ".listmaplocator__container" ); // Loop through each location container let allChildren = [...locationContainers.children]; allChildren.forEach((container) => { // Get the categoryIds value of the container's input element (if it exists) const categoryIds = container.querySelector( 'input[name="categoryIds"]' )?.value; // If the container has categoryIds if (categoryIds) { // Create a new div element to hold the image(s) const imageDiv = document.createElement("div"); imageDiv.classList.add("category-img-container"); // If the container's categoryIds include '109126' if (categoryIds.includes("36689")) { // Create a new img element and set its attributes const imageService = document.createElement("img"); imageService.classList.add("p-1"); imageService.src = "https://images.contentstack.io/v3/assets/blt504d36ed00347088/blt93ca45207abb5f8d/638468d632130110b279cf02/black_diamond.svg"; // Append the image to the imageDiv imageService.id = "Image_Category_Service"; imageDiv.appendChild(imageService); const imageFloor = document.createElement("img"); imageFloor.classList.add("p-1"); imageFloor.src = "https://images.contentstack.io/v3/assets/blt504d36ed00347088/blt93ca45207abb5f8d/638468d632130110b279cf02/black_diamond.svg"; // Append the image to the imageDiv imageFloor.id = "Image_Category_Floor"; imageDiv.appendChild(imageFloor); const buttonContainer = container.querySelector( ".locationInformation__container" ); if (buttonContainer) { // Append the imageDiv to the container buttonContainer.appendChild(imageDiv); } } } }); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter