I am using the html5 boilerplate layout which has a css, img, and js directory at the same level. I am having all kinds of issues accessing images from my .css files and .js files. I have been warned that using ../ may cause problems, but without some kind of url generator (like I have with my template files), how can I best access images from my .js and .css files?
One robust way to access static resources in CSS is to always give the full path:
body {
background-image: url("/path/to/image.png");
}
Notice the preceding / character. It tells the browser to look for the file at the root of the server. For example, if you currently are on http://example.com/pictures/album/5 then the above CSS will find the background at http://example.com/path/to/image.png.
Using the full path also encourages you to keep your resources well organized.
This is not to say that using relative paths is a bad thing, though. If you are working on a CSS project and put it in a sub-folder, say /static/myproject/project.css, then you can refer to images in that folder using relative paths.
If we say that your project is at /static/myproject, and the folder structure looks like this:
/static/myproject/project.css
/static/myproject/back-button.gif
/static/myproject/forward-button.gif
Then, in your CSS file, you can call the images relative to the CSS file:
.back {
background-image: url("back-button.gif");
}
.forward {
background-image: url("forward-button.gif");
}
The problem with doing it like this is that resources tend to be stored all over the place. That makes it more difficult to reuse resources.
Related
I have a scenario where all of my images will be loading from the third party cloud library and not my local root folder, is there any way I can configure that path in SASS and set them as URL for the background-image?
This is what I have currently:
$placeholder-image: url('../../img/test.png');
But the img folder is not available at it's given path, it should still be able to load the images. Can anyone please help?
I'm not sure about rewriting your relative paths - that would require some kind of SCSS parser plugin. Probably more effort than its worth if you have control of the stylesheets.
More simply, you could set a variable which is the URL to wherever your images are served from, then interpolate that with the path to an image, all inside a function for convenience.
Like so:
$bg-image-url: 'https://image-server.com/';
#function bgImageUrl($path) {
#return url('#{$bg-image-url}#{$path}');
}
.element {
background-image: bgImageUrl('test.png');
}
Compiles to:
.element {
background-image: url("https://image-server.com/test.png");
}
I have an index.html file in directory XXX and other html files in various subdirs.
In XXX, I have also the usual dirs js, images, and css that contain the corresponding files.
Is there an IDE that would allow me to somewhat automatically refactor id and class names throughout the whole project, and also check whether files contained in the dirs js and css, and images in the images dir, and so on, are being used?
I have a CMS template that uses JavaScript/jQuery to insert an image onto the page. This works fine when I specify an explicit path to the image, but because I use the template on several sites, the path needs to be determined automatically.
Making things a little harder is the fact that the path to the template (and therefore the image I'm linking to) changes periodically with each revision to the template.
Here's the (extremely simple) relevant code at the moment - which technically works in the short term, but is not the solution I'm looking for:-
src = '../template_v1/images/pdf_small.png'
This correctly generates the base URL, but breaks as soon as the template version is incremented (and the path changed) to template_v2 or template_v3, for example.
The JavaScript/jQuery file (again, included with the template) is located at http://www.domain.com/template_v1/js/this_file.js - so with that in mind, I want to be able to automatically generate a path to the image relative to the location of the this_file.js file. If this were CSS this would be easy, as non-explicit paths are relative to the CSS file calling the path - but I don't know how to accomplish this with JavaScript/jQuery.
Thanks in advance for any tips.
Do you need to go up a folder at the start of the source? Would going from the current directory work and stay within the template folder entirely:
src = './images/pdf_small.png'
Suppose we start pure HTML5/JS/JSON application. So UI in browser, user interaction handled by JS, data fetching/storing in AJAX.
By pure I understand that you don't preprocess any .html, .js, .css files (except a few configs) with any view template engine, scriplets, etc. Just pass as static resources.
To be maintainable project resources structured in hierarchy with several levels by / in URLs (and directories in file storage).
We don't want to inline any specific URLs in our code.
How to define URLs in HTML/JS so project can be moved without changes in .html, .js files (except a few config files)?
I see problems in following HTML code:
<script src=".../js/...">
<style src=".../css/...">
<image src=".../img/...">
and in following JS code:
ajax('GET', 'http://.../ajax/...');
When you preprocess files you can use:
<script src="${base}/js/...">
<style src="${base}/css/...">
<image src="${base}/img/...">
ajax('GET', '${base}/ajax/...');
Note that relative paths (like ../../ajax/data.json to get data from /html/data/list.html) may not work in included JS code (as you don't know at which level of HTML this inclusion happen, so don't know how much strip /).
Or pure HTML 5 project is myth?
One time preprocessor pass for inserting concrete IP/DN and context URL part resolve issue, but deploy in that case deploy far complicate then just copy files and set static content hosting...
I'm looking for best practices when including CSS/JS files, in terms of the file URI. I see people include files both relative from the website root by giving the full URI to the file:
<link rel="stylesheet" href="/my/path/to/css/main.css">
I tend to do it this way because I find it easier to know where the file is when I'm reading the code, and I've not come across an issue with it. But I also see a lot of relative includes:
<link rel="stylesheet" href="css/main.css">
Which way do you define the file location and why? Is one better than the other?
I prefer relative includes because they are robust against platform changes (e.g. deploying from test to live platform) because as long as the internal structure of your project does not change they still will work while absolute paths may break in such cases.
Also it's sometimes difficult to know the absolute path while the relative document dependent path is pretty obvious.
However, if you have files in several different places throughout your project, you would have different relative paths each time (for the same file which might be quite confusing), so in this case absolute ones might be preferred (for robustness' sake you should have the webroot path in a variable or similar: $WEBROOT/css/main.css). It all comes down to your personal needs I guess.
In the first case, the URI is absolute to the website's domain. So, the URI would be:
http://www.example.com/my/path/to/css/main.css
For the second method, the path is relative to the current path. So let's say you are now in
http://www.example.com/store/product/121
Then the path to the css files would be:
http://www.example.com/store/product/css/main.css
Thus, it depends where are your files located.