Background images not loading through Ngrok

[scottcole]

Afternoon

I’d love a little help figuring out this problem with background images not loading please.

Currently building a client site with BB Pro, BB Theme and BB Themer (WooCommerce too). The site itself is set up in MAMP currently until I get closer to live site time. To gather feedback from my client, I expose the site via Ngrok (also handy for directly testing on devices).

The problem: On mobile via Ngrok, it seems everything but background images are loading. Then tried loading it on desktop via Ngrok (rather than directly via localhost:), and on desktop several assets aren’t loading (background images, and it looks like general layout styles aren’t loading either (some styles, such as buttons etc. are loading).

When loading on desktop via Ngrok, I can see two scripts aren’t loading (looks like because their urls haven’t been altered to relative for some reason). Here’s a screenshot of the two scripts that aren’t loading:

Things I’ve tried:
I have a Relative URLS plugin installed to get round the usual issue of assets not loading.
I’ve used the cache clearing in BB settings, as well as manually emptying the BB cache folder in Uploads.
Checked in Media that the url for those background images is now indeed relative.
Cleared the browser caches on both laptop and mobile.
Closed and restarted the ngrok connection (just in case).
Edited a page with BB and saved (wondering whether it’d prompt something to be regenerated?).
Hit the save button in Permalinks (because why not try it )

When building sites and exposing via Ngrok before, installing a Relative URL plugin has been enough to get things working correctly. My next thought was using Better Search Replace and just entering the ngrok URL everywhere so I can gather feedback from the client, but I’d prefer not to have to do that every time if it can be helped.

Because those two scripts I mentioned aren’t loading, I imagine it must have something to do with that. I’m just all out of ideas… I’m sure one of you bright people will know of something simple I may have overlooked!

[pross (Pross With Spaces)]

Hi Scott.

You just need to filter the compiled CSS and change the urls

Rewrite urls in CSS for CDN/Bucket

Add the following to functions.php For CSS add_filter( 'fl_builder_render_css', function( $css, $nodes, $global_settings, $include_global ) { $site_url = 'https://example.com'; $cdn_url = 'https://123456abcdef.cloudfront.net'; $css = str_replace( $site_url, $cdn_url, $css ); return $css; }, 10, 4 ); For JS add_filter( 'fl_builder_render_js', function( $js, $nodes, $global_settings, $include_global ) { $site_url = 'https://example.com'; $cdn_url = 'https://123456abcdef.cloudfront.net…

[scottcole]

Hi

Thanks so much! I didn’t know this filter existed; this is certainly one for me to remember!

It’s loading through Ngrok now on desktop now which is ideal, which means I can get my client’s feedback.

On mobile, it’s still not loading any background images though; however, when I select Desktop Site in Chrome for Android, it does load the background images. That suggests this might be a slightly different problem than the original issue…

I cleared the cache with the BB Clear Cache tool, and have also cleared the cache on the mobile device (also, the Ngrok connection is a new connection and so far as I’m aware that should mean there’s nothing the browser had cached anyway for this new address).

Given the background images on mobile might be a different issue, if you’d like me to post a separate question and confirm this one is resolved I’d be happy to (sorry if that’s what I’m meant to do).

Thanks again

[pross (Pross With Spaces)]

Mobile ISPs cache the crap out of the internet… they might be charging you for unlimited usage but they have to save money some how

[scottcole]

That’s good to know! Yeah they certainly do like to charge me… extra data cost is exhorbitant.

Thanks again for your help with this