I'm loading a background-image with a url like this:
background-image: url(../../images/folder/imageName.png);
For certain pages, this works fine, but on others, it only works if I put a slash at the front like this:
background-image: url(/../../images/folder/imageName.png);
Its bizarre to me that this would work sometimes and not others. Also, my gut feeling is telling me that starting these urls with a slash is just plain wrong.
Does anyone have any insight on this?
Starting urls without a protocol (http://, etc) means it is relative to the current document. If the different pages are in different folders then the file that relative URL points to will change, which is probably your problem.
Starting a URL with a slash makes it relative to the entire domain/subdomain the page is on. I consider this a good practice so would encourage you to use it.
In your example however you are following it with ../../, which are "directory above" hints, which are ignored because you are already at the base of the domain.
I think I figured it out. My stylesheet is at an address like this:
http://localhost/rootDirectory//pageName/stylesheet.css
Note the two slashes between rootDirectory and pageName. It seems that when my images used the .. to go back directories, it treated the empty space between those slashes as a directory itself (while loading the stylesheet did not treat it as its own directory and had no affect on the path loaded).
So this is why for some stylesheets, ../../ seemd to work, and for others it didn't (as a matter of fact, ../../../ worked instead)
Related
I started to work with mautic (open source email marketing automation).
Im trying to build a template for a landing page and therefore I'm editing "*.html.twig" files. At least I could find out that twig is a PHP engine by Symfony. What I could not find out yet though is something actually totally simple, at least in css/html.
All I want to do is specify the correct file path to an image file as a background-image:url(''); within the style attribute of the body tag. (See example below)
How on earth is this twig working with file paths? It seems to automatically change the file path I specify, but in a way that is not comprehensible to me.
I tried several options, but the only thing that works at least partially is specifying the absolute path. As soon as I start using the template in mautic though and build a page from it and save it, even the absolute file-path gets 'crashed' on the output source code. What the heck?
I did not find much info on file path syntax in twig. What I found sounded so horribly complicated that I can't believe it should really be that complicated to simply put in a file path? Am I wrong?
Here is the example, specifying the absolute path in the actual source code.
<body style="background-image:url('http://sawiya.de/mautic/themes/mautictheme1/img/background.jpg'); background-color:#213E4C;">
When viewing the result in the browser, without adding content to the landing page template, the source code output is the following (path changed, but the result is at least that the image is being shown):
background-image:url(http://1.1.1.2/bmi/1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg);
After adding content on top of the template in mautic, the file path is being changed even more and reads the following from the source code output (now the background image does not get displayed anymore, so its clearly broken):
background-image: url(http://1.1.1.3/bmi/sawiya.de/mautic/"http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
What is this all about? Where can I get the info on how to easily and correctly specify the file path? Is it really that hard?
Ok, now I found out something strange. It might be a bug in mautic here.
When I open the page where I specified the image via the background-image:url() through the https:// -Protocol, instead of http://, it works!
And the resulting source code looks as expected:
background-image: url("http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
So, wrong adress here, I think. At least to solve the bug. Hope someone finds this as a solution, until the bug is fixed.
Cheers!
Edit: Of course its better to specify the file path in a relative way, so that when the theme is used on another server, the path is still correct. In twig the best way to do that seems to be this. At least it works perfectly well.
background-image: url('{{ getAssetUrl('themes/'~template~'/img/logo.png', null, null, true) }}';)
So I code in Sublime Text 2 combining HTML, CSS, and jQuery to make web designs.
For some reason, when I am trying to specify a location of a file, say Pic01.jpg in the folder images, you would suspect typing in /images/Pic01.jpg should be enough to tell the browser where the picture is located.
But this is not the case. I find myself needing to specify the exact location of the file before the browser will render it. Like; User/Desktop/siteOne/images/Pic01.jpg
This path system is very inconvenient, as I would like to say - export my sites to different computers, but now the code is bound to that specific location on that specific computer.
How can I set it up to make /images/Pic01.jpg sufficient coding for the browser (or Sublime?) to understand what needs to be rendered?
Prepending the path by / means that it will start it search at the root, which can change depending on your server configuration.
With WAMP/MAMP, I have to prepend my URLs by / and then the name of the folder they are in, if they are not at the absolute root of the server. It depends on your setup.
If you want paths that will work regardless of the server root, it's best to use a relative path or use a constant that can easily be changed depending on the configuration.
Example :
define("PATH", "/");
Link that always work
You will only have one line to change to make your paths work all the time with a different configuration - relative paths can be tricky to deal with when working in deep sub-folders.
Furthermore, if you want to see where it's actually looking for the file, open the Console in your web browser of choice, they should display the error (404 most likely) and the path it's looking at.
I turned on URL rewriting on Drupal, and some URL image are broken.
For example :
local/tw/sites/all/themes/tw/images/1-p1.jpg become
local/tw/content/sites/all/themes/tw/images/1-p1.jpg
or
local/tw/sites/all/themes/tw/images/2-p1.jpg become
local/tw/node/sites/all/themes/tw/images/2-p1.jpg
Any ideas?
If you used relative path, and you're talking about contents within nodes, it's perfectly normal, since "node/" is interpreted like a directory.
You could fix this problem adding a "/" before image src, or using module like Path Filter that provides a simple file:relative/path/to/file syntax.
I've done my searching and the topics haven't been of help.
I'm trying to have the background image of my header repeat across the X axis of the header div.
When I make CSS with a long URL such as
background-image:url('http://site.com/images/logo.png'); everything works fine
When I try to shorten the CSS to something such as ~/images/ or even having the CSS and site file already in the root folder and using /images/ I get nothing
background-image:url('~/images/logo.png')
background-image:url('/images/logo.png')
This is possibly because you're not shortening your URLs appropriately.
Assuming an absolute path of:
url('www.example.com/images/imageName.png');
A root-relative URL would be:
url('/images/imageName.png');
And a relative path (assuming your CSS file is in www.example.com/css/cssStylesheet.css) would be:
url('../images/imageName.png'); /* parent directory, then the images directory */
The ~ prefixed url format is unknown to me, though I suspect it's an ASP, or .NET, form? Though I'm unable to advise on that.
Questions that might be of use to you:
How do I turn a relative URL into a full URL?
Using relative URL in CSS file, what location is it relative to?
Absolute urls, relative urls, and...?
A URL containing "~" is something that's specific to ASP.NET, it's processed server-side and transformed into a "proper" URL such as http://mysite/my_virtual_directory/images/logo.png. Web Browsers don't have any way to do this as they don't know to what "~" refers.
You need to ensure that the URLs you use in your CSS file are "understandable" by the browser, so either have them "fully qualified" (http://mysite/my_virtual_directory/images/logo.png) or starting from the "beginning" (/my_virtual_directory/images/logo.png).
I'm using urlrewiter.net in order to implement friendly url's.
It's a great and easy to use package!
Nevertheless, while using subfolders I had problems with the relative links to images and to other inner pages.
I tried to use ~ (server side) and it didn't do the trick.
Is there another solution?
Because of these issues, I've started to be always give relative (to the root) URLs, so let's say you have an images subdirectory:
http://www.contoso.com/images/blah.jpg
You'd always reference it via "/images/blah.jpg" .. and no matter what the base page/context is, that image will be accessible.
You should probably segment your site so static elements (images, css, etc) are in separate location from your dynamically generated urls. I've used URlRewriter extensively in the past, and it worked great, but our site was setup so that our resources were segmented like that.
You can simply add base tag to your HTML headers. This will force browsers to use specified location to resolve relative links. Maybe this article will help you: SEO-Friendly URLs and Relative Links