[Support request] Slider & Background Image Problems …

[Rod]

Hi!

I’ve been developing a site on my local computer (running Local By Flywheel), Generatepress Premium 1.4.3, and Elementor Pro (latest version) as a builder.

Everything looks find on the local computer when I check out the site in Elementor Pro.

To see what the site looks like on other systems recently I started using a linking option Flywheel offers that allows clients (or whoever) to click a link and visit the site (served off my development computer). Very convenient.

Visiting the site from other computers however reveals a surprising issue:

– Front page Hero-image Smart-Slider3 – shows all images one under the other (no slider actions);
– Swapping out Elementor’s Image Slider just shows colors where the photos should appear;
– background images on the front page sections are not displaying
– background images on pages on the site are missing as well.

Images Still working:

Featured post images;
Images contained in posts;
Images dragged into Elementor’s image widget.

The problem is with GeneratePress?
The problem is with ElementorPro?
The problem is with Local by Flywheel and their link?

Quite a mystery – especially since all the development work with Generatepress Premium and Elementor Pro never showed the problem …

Any suggestions appreciated!

[Leo]

Hi there,

Any chance you can test it on a live server?

I think that would be the way to test as there are no compatibility issues between GP, Elementor and Smart Slider 3

[Rod]

Hi Leo … I think this is the next thing I will have to try, hosting the site from a different server (ie away from my development local machine, maybe in a dev environment on the live site’s host) … however just to be clear, even forgetting about the slider, there is a problem with images used as background in any Elementor sections …

But otherwise, I agree – GP Elementor and SmartSlider on my development machine all play nicely together.

[Tom]

Definitely sounds strange – maybe some broken javascript? If you get it up on a live server and still have the issue, let us know the URL and we’ll take a look 🙂

[Rod]

ok so some more research has led to an issue I see being discussed on the Local by Flywheel forum.

Their product simplifies creating a local WP dev environment on my iMac and their .ngrok ‘client link’ feature allows me to create a tunnel between a client and the site running on my computer to visit the site before it goes live.

BUT … 

… on the forum there’s discussion of missing background images and absolute vs relative addressing. From what I can understand, Local does not properly translate the addressing to background images through their ‘tunneling’ technology resulting in the images going missing.

But the implication is that what I see on my dev machine is accurate and not a problem, it is only using Local’s tunnel functionality that is creating the problem. And that’s good news!

References I read …

http://local.getflywheel.com/community/t/background-images-in-beaver-builder-wp-site-not-showing/2830

http://local.getflywheel.com/community/t/issues-with-absolute-to-relative-urls-for-background-images-now-with-screenshots-to-explain/242

http://local.getflywheel.com/community/t/pictures-not-showing-in-preview/2822

[Tom]

So I assume that means once you move it off Local to a live server, the issue will resolve itself? If so, good news! 🙂

[Pascal]

Hi @rod

I have tha same issue and it’s not related to GeneratePress… but Elementor plugin because their background images of columns or section are hardcoded into CSS files BUT with the full path of the image.
So when you try to look at your dev website (using the Local Flywheel Tunnel > The Live Link) but not with you computer where Flywheel is running, but elswhere (your tablet, you phone, another computer) > all those background images do not show up.

I found a CSS file comming from Elementor within /wp-content/uploads/elementor/css and in this file I have changed all absolute path to relative path, the look at my site on my phone > and magic, all was ok!

Exemple:
> Before:
background-image: url(“http://test1.dev/wp-content/uploads/2017/10/itra-veille-maintenance-technique-immeuble-lyon.jpg”)

> After:
background-image:url(“/wp-content/uploads/2017/10/itra-veille-maintenance-technique-immeuble-lyon.jpg”);

The only solution we have is to create a support ticket to Elementor…

EDIT: I made it > https://wordpress.org/support/topic/issue-with-css-background-images-absolute-path/

[Rod]

… thanks for confirming the source of the issue Pascal. I found a number of CSS files containing full path references to bg images. I’m living without the bg images showing properly for the moment but may edit the files to adjust the references to relative paths once the site is finished development and I want to use the tunneling link.

Makes me wonder what happens after when you continue editing the site with Elementor: does it re-insert the full path references, does it operate as before if the references remain relative?

[Pascal]

Hi Rod

‘Makes me wonder what happens after when you continue editing the site with Elementor’
I do not have test it, but sure it will be a mess… however, use of absolute path within CSS files is a bad pratice, in my opinion, and I hope they will change the way they handle this…

[Author]

Posts