Best practice for linking images/files in different web folders

Question

Probably title don't make any sense , so i will explain my problem in details.

Lets say i have www.mysite.com , where i have background image for div , onclick() , div changes background image. Everything is working just fine. Problems start, when i have subfolder, for example, myblog. It looks like www.example/myblog/post1.php . In post1 i got same div with same backgrounds, but onclick it doesnt work, because link is targeting img, which don't exist.

In first case jquery do it all right : www.mysite.com/assets/img/picture.jpg (this is actual location)

In second case jquery is adding folowing link : www.mysite.com/ myblog /assets/img/picture.jpg code is simple, as u imagine. onclick do

$('#div').css("background-image", "url("assets/img/picture.jpg")"); 

so , things work when i add ../assets/img/picture.jpg , but then it wont work in root directory.

i have tried using url+assets/img/picture.jpg , but i get www.mysite.com/www.mysite.com/...etc (and yes url is correct).

So my question is, how to deal with this problem? Same goes for includes like header and footer. if i have "include" folder on root, i cant link to it if i am in /blog/post1.php . I have been struggling with this for a while, so i would like to get some tips.

If it makes any difference, i am working in codeigniter....

Thanks !!

Answer 1

Whenever I'll print a file reference into a page, I print it relatively to the root address:

To include the file http://mysite.com/assets/img/picture.jpg , I would use the /assets/img/picture.jpg reference. So the browser will look for this file starting from the root ( / ) page.

This will be a problem if you move your entire website to another folder. That's why I always keep a global setting for every application I make, the "path" setting.

Eg the application http://mysite.com/app1/ has the "path" setting = "app1". When I'll print a file reference to a page, I take this setting into consideration, like:

$file_path = "assets/img/picture.jpg";    
echo "/$site_path/$file_path";

This will print /app1/assets/img/picture.jpg . If for some reason I need to make another install of this application in http://mysite2.com/anotherappname/ , I just change the global path setting to "anotherappname.

Answer 2

I normally set a variable of $domain in PHP which looks something like http://www.example.com/ (notice the trailing slash). I then echo this to a Javascript variable like so:

<script>
var domain = '<?php echo $domain; ?>';
</script>

This variable is then available in Javascript too. I might use it like this:

<script>
$('#div').css("background-image", "url('" +domain + "assets/img/picture.jpg')");
</script>

If you need to change $domain then the changes will trickle through to your Javascript which is handy.