MODx Relative Links Broken - modx

I was having a lot of trouble getting relative links working in MODx. As soon as I made a container and put some pages one level above the root, nothing was linking correctly. Lots of missing images and broken links.

NOTE: This fix apparently will break all links linking to content identifiers.
I fixed it by putting the following at the top of the web template:
<base href="[[++site_url]]" />
You have to use that. If you hardcode it, it will screw up depending on which protocol you use, http or https.

StingyB's answer is correct. This tag should be in the head section of all MODX templates:
`<base href="[[++site_url]]" />`
Note that if you have multiple front-end contexts, the placeholder should be uncached:
`<base href="[[!++site_url]]" />`
Also, it must be a short tag. This will not work:
`<base href="[[!++site_url]]"></base>`
I'm not sure where comment about "breaking all links linking to content identifiers" is coming from. These tags are standard in all MODX installs.

Related

ModX wont work without absolute paths

I have built a site on Revo 2.1.3. All went well except for the site paths. Where I used to link to an image like:
assets/images/photo.jpg
It now wont work (appears as broken link) unless I put the complete path,e eg:
http://example.com/assets/images/photo.jpg
This isnt such a big deal changing the image paths, but it totally breaks Wayfinder.
Does anyone know a way to fix this?
My templates were missing:
<base href="[[++site_url]]" />

Why can the background page be an html file?

In manifest.json, we specify our background page and can put an html or a js file for it. Since it is only a script that executes what sense does it make to have an html file for it?
I mean where is UI going to get shown anyway?
Similarly the devtools_page property has to be an html file. What sense does that make?
It will not be shown anywhere (that's the essence of "background"), but some elements on it make sense.
You can have an <audio> tag, and if you play it, it will be heard.
You can have an <iframe> with some other page loaded invisibly.
..and so on
As for devtools_page, it would actually be visible in the interface (as an extra panel in the DevTools)
It is possible that devtools_page must be an HTML file just for legacy reasons: it was not updated when manifest version 2 rolled out with changes to how background pages are specified. Still, the same arguments as above apply.
background_page is a legacy feature from the initial support of extensions in Chrome. background.scripts was added in Chrome 18. I can't speak for Google's original intentions but I'd guess that in the original design using an page felt more natural and would be less likely to confuse developers. Once they realized how many background_pages were just being used to load JavaScript it made sense to explicitly support that.

How to reference layout images in express.js so that they can be found from nested directories?

I've got an express.js app currently using ejs (using jade for newer projects) and I'm trying to solve a problem in a clean and appropriate manner.
I've got a layout.ejs file with my header and footer in it. Most of my site so far has been one layer deep http://innovationbound.com/about or /services or /amy and so on....
I'm beginning to created online courses at http://innovationbound.com/courses/course-name and the issue I'm having is that these course pages can't reference the images the same way. <img src="images/linknedin.png" alt="LinkedIn Icon"> for instance.
From the course-name page it tries <img src="courses/images/LinkedIn.png" alt="LinkedIn Icon"> and obviously can't grab the image there.
Is there a setting in express, or something obvious I'm missing? I hope I don't have to use absolute urls, that just makes developing on the local machine insane.
Just use site root–relative paths. For example <img src="/images/linknedin.png" alt="LinkedIn Icon">. Note the / makes the difference.
There are three types of link paths:
Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
Document-relative paths (such as dreamweaver/contents.html).
Site root–relative paths (such as /support/dreamweaver/contents.html).
From Adobe.
You might consider it, but you can use "../images/link(n?)edin.png". However, I'd recommend to use absolute path, because images should be stored in /public (in general jade setup) and your path depth could be varied by your route rule.
As a tip, if you lost in relative path of image, right click on broken image and see a URL in properties on web browser. It'll give you a hint of where the image is.

disabling chrome translation for javascript

I am writing a Google Chrome extension. The targeted pages are written in Russian. Chrome translates to English. I can see some inconsistencies appear that seem to be linked to translation. For example, in the following code I check to see if I am in a particular folder:
if (searchResult[0].innerHTML.indexOf("Общая папка")!=-1) alert("You are in Shared Folder."); else (alert(searchResult[0].innerHTML));
If I reload the exact same page several times, the result is inconsistent. Sometimes it detects "Общая папка" but other times it does not. When it does not detect this phrase, the alert says I am in "Shared Folder" which is the translation for ""Общая папка." There appears to be no consistency here. Sometimes I am dealing with the original text (which is preferred) but sometimes I am dealing with crappy translations that are useless for my script because the translations change all the time.
Does anyone know how to fix this? Turning it off would probably fix it but actually the translations are useful and necessary for other aspects of the extension. I understand that the translation works with some secondary layer of the HTML (I have not researched this very well). Can I simply refer to the original in my script?
According to this answer, you can disable translation by placing the following element in the head portion of your web page:
Insert this to the head section of your web page.
<meta name="google" value="notranslate">
If you needed to programmatically disable translation, you could add that tag through JavaScript.
Not sure about disabling it, but looks like after a translation Chrome adds class="translated-ltr" to <html> element, so maybe you at least can detect when the page was translated and either warn a user that the extension might not work properly on this page or just disable it.

Htaccess Rewriterule virtual directories breaking all links

I think I've gone through a million articles and everyone's codes on this, but I just can't get it to work! Every code I try works but it shows the redirect url instead of the virtual one.
I would like mysite.com/company/client/ to actually show the results from mysite.com/company/client.php, but the files within client.php become broken unless I make absolute links.
For instance mysite.com/company/css/style.css is broken when viewing from http://mysite/company/client/, but is working fine when going to the real file mysite.com/company/client.php
I hope someone knows how to solve this problem without having to change all links in client.php to absolute!
Thanks!
Scott
You might want to consider the HTML BASE tag:
...
<head>
...
<base href="http://mysite/company" />
...
</head>
...
You put this in the client.php file, then any relative link & reference is automatically "converted" to an absolute one, starting from the right folder.
See the comments on possible issues with the BASE tag.
Another option would be to perform a redirect instead of a rewrite, by adding "[R]" to the RewriteRule. However, then your users will see the "client.php" in the URL.

Resources