Failed to load resource in the admin Laytheme + Laygridder
-
I have noticed that for Laytheme aswell as for Laygridder, on certain modules and functionnality, the gridder doesn't use the right URL in the backend (editor page). So images, doesn't show.
To me this happend with the row background-image and row background-video on laygridder, and the carousel plugin on laytheme. (I didn't test it extensively, just came accross it).
Both with the layGridder and with the layTheme had in common that I wasn't using a "standard" url.
For laytheme because website is still in development, I put wordpress in a sub-folder
http://website.com/wpsubfolder/[imagepath]
In the console I get failed to load resource error and the URL without the
"/wpsubfolder/"
part.Failed to load resource: the server responded with a status of 404 (Not Found)
.For laygridder the error was pretty similar except I was running the website on localhost.
I'm guessing this might be due to the use of relative path instead of absolute url to load the media ?On the front-end, the content shows perfectly.
-
Dear @rsepierre
in the Gridder it also shows the relative path of the images.
You do not see any image in the Gridder when you are logged in to Wordpress?
Best!
Marius
-
in the front end of the gridder it's not relative (it's a full uri : protocole, www, subdomain, domain, extension, folders, files),
in the back-end, "background-image" in the gridder : paths are relative ( exemple url(/wp-content/uploads/2018/12/RED-STAR_DOCUMENTARY24-1024x1195.jpg);" and don't use the absolute url.see screenshot :
Like I said, it does this with background-images, with the carrousel plugins, with background-video and maybe other things. I did not test extensively. But once I saw it did not work on every current project with laytheme/gridder I decided to post here because I think that being able to see what you are building is one of the best feature of the lay family and it should not be too hard to fix.
This will happend with every setup for which the wordpress folder isn't the domain root folder.
-
Dear @rsepierre
we will test if this is a common issue when you install Wordpress on a sub-folder.Will get back to you.
Best!
Marius
-
There is no doubt it will happend 100% of the time. This screenshot joined with the wordpress documentation holds all the information we need.
The background-image url for the gridder's back-end in the inspector is
url(/wp-content/etc)
.I did not write that url, layTheme did and layGridder does the same.
Obversations/Statements :
1 - So we can first state that in the backend, layTheme and layGridder are using relative url.
2 - Looking through the documentation we can see that wordpress mostly returns absolute urls.
3 - layThemeGridder is most likely using a custom solution to build that url.
4 - One other point to make is that wordpress has no native way to return the missing part between the domain and wordpress folder.Problem :
Because the relative URL starts with a/
it uses the domain as a starting point. Without the first/
it would start with the current folder as a starting point. Since oversation n°4 states that wordpress is not able to provide you the difference between domain root and wordpress root : If wordpress root is not the same as the domain root, the relative URL will fail 100% of the time.Solutions :
There is two solutions. One that keeps using the relative url (if that is important for some reason) and one that is using the absolute url (the easiest one).With relative path :
The problem is the use of the first/
that uses the domain as a starting point.
if instead we use the current page as a starting point (which is in wp-admin) the fix is to add../
at the begining of the url :../wp-content/etcetc
. This will go up one folder from "wp-admin" essentialy landing you in the wordpress's root, than add the relative path to the url.Howerver, it might still be an issue with some very edge cases. Some plugins allows you to restructure wordpresses urls. changing the login url, wp-admin urls, etc etc. Because relative URL are not talking at all to wordpress, and are only using their own logic. It is still possible that "something is different"
This is why I would recommend using the stantard following solution
With absolute path :
Just fetch the image url with a wordpress function, it will return the absolute url to the image. Whether you did some weird things to your wordpress or just put wordpress in a subfolder.
I'm actually amazed that this issue wasn't brought up before as it is pretty common to put wordpress in a subfolder. Though maybe, because it works in the front-end, people either don't understand it's an issue or those who do are fine with it.
Now if that is a high priority issue or not is up to the team to decide. I actually don't mind that much (hense what I just said).
And you may need testing to fix the issue : How many different blocks and functionnality use those relative urls in both layTheme and layGridder. For exemple it's not working for background-video, background-images and the carousel plugin. I think "plain images" elements (the ones you drag and drop) are fine ?But if I can avoid you some testing to determine if it's an edge case : it's not.
There is no way it will work with the current configuration on a wordpress located in a subfolder. -
Hey, thanks for this. We're taking a look!
-
Hey @rsepierre
We solved this issue and would like to test the new version on your server. Can you send your login url and credentials to armin.unruh@gmail.com?
Best,
Felix -
Hey @rsepierre,
We solved the bugs and rolling out a new version soon. Can you update and confirm that everything is working now?
Best
Felix -
It is working on layTheme !
I don't know if you did roll out the same fix for layGridder because I'm don't have a subfolder in the url anymore. But I did update layGridder plugin and it now shows a absolute url in the code instead of the relative url. So I'm guessing it's working there too. -
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it