Set image source filename in Javascript to swap/switch for responsive images

Just one more thing, Mike. Can you please tell me why there is that blue stripe underneath my new experimental Color Section that also shrinks responsively as I decrease the browser window’s width, and then disappears around 1005px wide–before the responsive 964px width. It’s not part of the original background graphic, but it also doesn’t show if I don’t display the background image on the wider screens. Thanks, Gary

• This reply was modified 1 year, 6 months ago by garysch37.
• This reply was modified 1 year, 6 months ago by garysch37.

Thank you very much, Mike. That did the trick: I didn’t realize I could access the srcset field in img like that, doh! So now I know how to do that, for the situations I need it.

And the situation came up immediately, as I ended up changing my method of doing this home page banner, to use the second method I mentioned, putting my background graphic into the Color Section, and my happy couple image in an Image media element in that Color Section, and then making it all responsive, including using your querySelector with src & srcset to swap out the happy couple images responsively at certain breakpoints, and using it again with backgroundImage to swap out my background graphic at the same breakpoints. Yes, it may seem weird that I’m swapping images manually instead of using srcset, but it was all necessary at these breakpoints (or I’m just not experienced enough to have figured it out). It all worked out nicely.

I even answered my own question about that blue bar under the banner: I totally forgot that WordPress makes background images default to repeating, so I just had to turn repeat off.

Thanks again for all your help! You can close this thread if you wish. /gary

Here’s the final code in case others are interested:

In child theme’s function.php:

function displayHomeBanner() {
    
   if (window.matchMedia("(min-width: 1px) and (max-width: 579px)").matches) {
        // BG GRAPHIC:
        document.querySelector(".seniorCoupleContainer").style.backgroundImage="none";
        // COUPLES PIC:
        document.querySelector(".seniorCouple img").src="...happy-senior-couple-5-556x313px.png";
        document.querySelector(".seniorCouple img").srcset="...happy-senior-couple-5-556x313px.png";
    }
    
    if (window.matchMedia("(min-width: 580px) and (max-width: 819px)").matches) {
        // BG GRAPHIC:
        document.querySelector(".seniorCoupleContainer").style.backgroundImage="url('...home-page-banner-background-4-1079x300px.png')";
        document.querySelector(".seniorCoupleContainer").style.backgroundSize="1079px 300px";
        document.querySelector(".seniorCoupleContainer").style.backgroundRepeat = "no-repeat";
        // COUPLES PIC:
        document.querySelector(".seniorCouple img").src="...happy-senior-couple-4-510x287px.png";
        document.querySelector(".seniorCouple img").srcset="...happy-senior-couple-4-510x287px.png";
    }
    
    if (window.matchMedia("(min-width: 820px) and (max-width: 989px)").matches) {
        // BG GRAPHIC:
        document.querySelector(".seniorCoupleContainer").style.backgroundImage="url('...home-page-banner-background-3-1439x400px.png')";
        document.querySelector(".seniorCoupleContainer").style.backgroundSize="1439px 400px";
        document.querySelector(".seniorCoupleContainer").style.backgroundRepeat = "no-repeat";
        // COUPLES PIC:
        document.querySelector(".seniorCouple img").src="...happy-senior-couple-3-700x394px.png";
        document.querySelector(".seniorCouple img").srcset="...happy-senior-couple-3-700x394px.png";
    }
    
    if (window.matchMedia("(min-width: 990px) and (max-width: 1199px)").matches) {
        // BG GRAPHIC:
        document.querySelector(".seniorCoupleContainer").style.backgroundImage="url('...home-page-banner-background-2-1778x500px.png')";
        document.querySelector(".seniorCoupleContainer").style.backgroundSize="1778px 500px";
        document.querySelector(".seniorCoupleContainer").style.backgroundRepeat = "no-repeat";
        // COUPLES PIC:
        document.querySelector(".seniorCouple img").src="...happy-senior-couple-2-871x490px.png";
        document.querySelector(".seniorCouple img").srcset="...happy-senior-couple-2-871x490px.png";
    }
    
    if (window.matchMedia("(min-width: 2000px)").matches) {
        // BG GRAPHIC:
        document.querySelector(".seniorCoupleContainer").style.backgroundImage="url('...home-page-banner-background.png')";
        document.querySelector(".seniorCoupleContainer").style.backgroundRepeat = "no-repeat";
        document.querySelector(".seniorCoupleContainer").style.backgroundSize="2881px 601px";
        // COUPLES PIC:
        document.querySelector(".seniorCouple img").src="...happy-senior-couple.png";
        document.querySelector(".seniorCouple img").srcset="...happy-senior-couple.png";
    }
}

In child theme’s style.css:

.seniorCoupleContainer {
    background-image: url(https://www.clearlightcomputing.com/denture6/wp-content/uploads/2023/05/home-page-banner-background.png);
    background-repeat: no-repeat;
    background-size: 2881px 601px;
    max-height: 591px; /* Without this there is an inexplicable bottom padding (zeroing margin and padding does nothing): height of senior pic 576 + reset top 35 = 611, but this still leaves a 20px bottom padding. */
}
.seniorCouple {
    top: -35px;
}

/* Get rid of the bottom padding at all these breakpoints because it accummulates between the breakpoints, so this code sort of does a reset of 0 padding: */
@media only screen and (min-width: 1px) and (max-width: 349px) {
    .seniorCoupleContainer {
        max-height: 171px;
    }
}
@media only screen and (min-width: 350px) and (max-width: 369px) {
    .seniorCoupleContainer {
        max-height: 185px;
    }
}
@media only screen and (min-width: 370px) and (max-width: 389px) {
    .seniorCoupleContainer {
        max-height: 199px;
    }
}
@media only screen and (min-width: 390px) and (max-width: 409px) {
    .seniorCoupleContainer {
        max-height: 213px;
    }
}
@media only screen and (min-width: 410px) and (max-width: 429px) {
    .seniorCoupleContainer {
        max-height: 227px;
    }
}
@media only screen and (min-width: 430px) and (max-width: 449px) {
    .seniorCoupleContainer {
        max-height: 241px;
    }
}
@media only screen and (min-width: 450px) and (max-width: 469px) {
    .seniorCoupleContainer {
        max-height: 255px;
    }
}
@media only screen and (min-width: 470px) and (max-width: 489px) {
    .seniorCoupleContainer {
        max-height: 267px;
    }
}
@media only screen and (min-width: 490px) and (max-width: 519px) {
    .seniorCoupleContainer {
        max-height: 284px;
    }
}
@media only screen and (min-width: 520px) and (max-width: 549px) {
    .seniorCoupleContainer {
        max-height: 299px;
    }
}
@media only screen and (min-width: 550px) and (max-width: 579px) {
    .seniorCoupleContainer {
        max-height: 313px;
    }
}

@media only screen and (min-width: 1px) and (max-width: 579px) {
    .seniorCouple {
        top: -50px;
        width: 564px; /* without this it's smaller for some reason */
    }
}
@media only screen and (min-width: 580px) and (max-width: 819px) {
    .seniorCoupleContainer {
        max-height: 302px; /* Get rid of bottom padding. */
    }
    .seniorCouple {
        width: 510px; /* without this it's smaller for some reason */
    }
}
@media only screen and (min-width: 820px) and (max-width: 989px) {
    .seniorCoupleContainer {
        max-height: 409px; /* Get rid of bottom padding. */
    }
    .seniorCouple {
        width: 700px; /* without this it's smaller for some reason */
    }
}
@media only screen and (min-width: 990px) and (max-width: 1199px) {
    .seniorCoupleContainer {
        max-height: 505px; /* Get rid of bottom padding. */
    }
    .seniorCouple {
        width: 871px; /* without this it's smaller for some reason */
    }
}
@media only screen and (min-width:2000px) {
    .seniorCoupleContainer {
        width: 100% !important;
        height: 591px;
        max-height: 591px; /* Get rid of bottom padding. */
    }
    .seniorCouple {
        width: 1024px;
    }
}

• This reply was modified 1 year, 6 months ago by garysch37.
• This reply was modified 1 year, 6 months ago by garysch37.