modernmakes

That is correct. It's not really a case of 'swapping' them, the URLs for the images in the header code just need to be updated. They can be hosted anywhere, I just chose to host them on my own site on an unlinked page.

Hello, I just wanted to share a method of displaying ads that I just implemented on my site. I place my own ads that direct readers to my affiliate offers. I also sell this ad space to interested parties. I have square ads placed in my sidebar and banner ads placed in the blog posts. I wanted a way of controlling the images used for the ads as well as the links without having to manually edit every page that the ads are on. After talking with Squarespace support and being told that there isn't built-in functionality for this, I came up with this.... This process involves placing code in the header, code in the footer, and then some code in a code block that is placed on the page where you want your ad. The header code contains the URL where you want to link to and the URL of where the image is hosted. I created an unlinked page and placed all of the ads I wanted to use on this page. Then I get the URL for each image and put them in this list. The footer code waits for the webpage to finish loading. Once the page is ready, it looks for any sections marked as places to show ads. For each ad container, it checks if there's specific ad information available, like where the ad should link to and what image it should show. If this information is present and complete, the script creates a clickable image inside the ad container. The clickable image will open the ad's link in a new browser tab when clicked. If the ad information isn't ready or is missing, the script just makes a note in the background logs for us to check later. Optionally, I've made my ad container invisible if the ad isn't ready. This HTML snippet in the code block creates an empty container marked for displaying an advertisement, identified by data-ad-key="ad1". The JavaScript script uses this identifier to dynamically insert the specified ad's clickable image and link into the container based on the predefined list of ads. Header Code: <script> var globalAdLinks = { ad1: { url: "https://thesiteyouwantolinkto.com", img:"https://thisiswheretheimageishosted.com/image.jpg" }, ad2:{ url: "https://thesiteyouwantolinkto.com", img:"https://thisiswheretheimageishosted.com/image.jpg" }, ad3:{ url: "https://thesiteyouwantolinkto.com", img:"https://thisiswheretheimageishosted.com/image.jpg" }, ad4:{ url: "https://thesiteyouwantolinkto.com", img:"https://thisiswheretheimageishosted.com/image.jpg" }, ad5:{ url: "https://thesiteyouwantolinkto.com", img:"https://thisiswheretheimageishosted.com/image.jpg" }, ad6:{ url: "https://thesiteyouwantolinkto.com", img:"https://thisiswheretheimageishosted.com/image.jpg" }, }; </script> Footer Code: <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".ad-container").forEach(function(container) { var adKey = container.dataset.adKey; var adData = globalAdLinks[adKey]; // Check if adData exists, and both url and img are not empty if (adData && adData.url !== "" && adData.img !== "") { var anchorTag = document.createElement('a'); anchorTag.href = adData.url; anchorTag.target = '_blank'; anchorTag.rel = 'noopener noreferrer'; var imgElement = document.createElement('img'); imgElement.src = adData.img; imgElement.alt = 'Advertisement'; // Provide a meaningful alt attribute anchorTag.appendChild(imgElement); container.appendChild(anchorTag); } else { // Optionally, log a message or handle the absence of ad data differently console.log('Ad data for', adKey, 'is not ready.'); // If you want to remove the container or make it invisible when ad data is not ready: // container.style.display = 'none'; // Hide the container } }); }); </script> Code Block: <div class="ad-container" data-ad-key="ad1"></div> When I want to update an ad, I just take the created ad and place it on the unlinked page where all of the ads are hosted. Then I update the ad URL and image in the header for the corresponding ad number. I hope this helps someone. Also, if anyone knows of a simpler way to achieve this, please let me know.