XF 2.0 Can someone help me figure out how to cycle through different banners in the header?


Active member
I want to display banners in my header that would randomly change, but I need them to automatically resize themselves depending on screen width, so that they always display next to the logo, instead of below it. Is there any code I could add to the built in advertising system to make that happen?

I found this, and it works great, I just need to add some code (if possible) that would make the banners automatically resize so as to display next to my logo.

<!doctype html>
        var banners = [];
        banners.push({src: "image1.png", alt: "Image 1"});
        banners.push({src: "image2.png", alt: "Image 2"});
        banners.push({src: "image3.png", alt: "Image 3"});
        banners.push({src: "image4.png", alt: "Image 4"});
        banners.push({src: "image5.png", alt: "Image 5"});

        window.onload = function() {
            var index = Math.floor(Math.random() * banners.length);
            var ad = document.getElementById("ad");
            ad.setAttribute("src", banners[index].src);
            ad.setAttribute("alt", banners[index].alt);
            ad.style.display = "block";
        #ad {
            display: none;
            #ad {
                display: block;
    <img id="ad" src="image1.png" alt="Image 1" />
Last edited: