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 2 years, 10 months ago by garysch37.
• This reply was modified 2 years, 10 months ago by garysch37.

Hi Ismael,

I used the fix from this post: https://kriesi.at/support/reply/1396490/

I couldn’t even find a reference to the above filter:

grep -R avf_load_google_map_api *
framework/php/class-gmaps.php:           * true if loading of google script was canceled with filter 'avf_load_google_map_api_prohibited'
framework/php/class-gmaps.php:           * true if loading of google script was canceled with filter 'avf_load_google_map_api_prohibited'
framework/php/class-gmaps.php:                          $loading_prohibited = apply_filters( 'avf_load_google_map_api_prohibited', false );
framework/php/class-gmaps.php:                                  apply_filters_deprecated( 'avf_load_google_map_api_prohibited', array( false ),'4.5.7.1', false, __( 'Filter was replaced by theme option', 'avia_framework' ) );

This does appear to be a bug – unless there is some other reason we would load the gmaps scripts on the backend when you’ve disabled it in the theme.

What’s the best way to make this fix permanent, I’m assuming a functions.php gets overwritten at some stage?

Thanks

Hi,

So I wanted to open this back up as im having the same issue again. I can not get the page builder to load on bigger pages. They work just fine on smaller pages but like my page “home” the builder will not load. admin-ajax.php fails to load.

I have disabled all the plugins and I still get the same error.

I also see the theme is causing some PHP errors that probably need to be looked at.

[17-May-2023 06:38:57 UTC] PHP Warning: Undefined property: stdClass::$theme_location in /home/xcal/public_html/wp-content/themes/enfold/functions-enfold.php on line 157
[17-May-2023 06:39:00 UTC] PHP Warning: Undefined array key “width” in /home/xcal/public_html/wp-includes/media.php on line 1191
[17-May-2023 06:39:00 UTC] PHP Warning: Undefined array key “height” in /home/xcal/public_html/wp-includes/media.php on line 1192
[17-May-2023 06:39:00 UTC] PHP Warning: Array to string conversion in /home/xcal/public_html/wp-includes/taxonomy.php on line 3667
[17-May-2023 06:39:00 UTC] PHP Warning: Array to string conversion in /home/xcal/public_html/wp-includes/category-template.php on line 1301

I just have found a solution FOR THE POST at Stackexchange and it is quite simple and works, my shortcode just needs a bit more CSS, that’s all.

The snippet is:

function my_caption_shortcode($atts) {
  if (isset($atts['caption'])) {
    // avoid endless loop
    remove_filter( current_filter(), __FUNCTION__);
    // apply shortcodes
    $atts['caption'] = do_shortcode($atts['caption']);
    // restore filter
    add_filter(current_filter(), __FUNCTION__);
  }
  return $atts;
}

add_filter("shortcode_atts_caption", "my_caption_shortcode");

Source

But for the copyright field in media liberary image it works NOT.
Do you have a suggestion based on this snippet for this?

Thanks for your advice. It has worked. It has stopped creating files. Unfortunately, the website is not working optimally yet. I think there is still an error looping. The log says this kind of messages:
Error on sending request(GET /wp-content/uploads/dynamic_avia/avia-merged-styles-c9edd31fc63a9322c577ad214782385b.css HTTP/1.1); uri(/index.php) content-length(0): ReceiveAckHdr: nothing to read from backend (LVE ID 932), check http://docs.cloudlinux.com/mod_lsapi_troubleshooting.html

ok – i edited the postslider.php – and for what i like to have i only added just before output article this:
( on Enfold 5.6 in postslider.php just before line 937 )

if( get_post_type( $the_id ) == 'attachment' ){
  $post_class .= 'posttype-attachment ';
}

or more common – if you like to add any post-type as class on articles:

$posttype = get_post_type( $the_id );
$post_class .= 'posttype-'.$posttype. ' ';

so if the post_type is attachment this will be found as class to slide_entry. After that it is easy to change the link behavior to not open the attachment page but to open directly a lightbox.