ansaurus

Question

Answer 1

+5 A:

Just use domain-relative url's?

.cool-button { background-image: url('/images/button.png'); }

Then the browser will look under the current domain.

gnud 2009-05-13 16:00:01

Answer 2

+1 A:

I've literally just been working on the same thing today and here's what I came up with.

Stick this in your .htaccess file in the root of your site. This obviously relies on Apache and Mod_rewrite.

RewriteEngine on
RewriteBase /

# Redirect content to the CDN

RewriteCond %{HTTP_HOST} !^cdn\.server\.com$    [NC]
RewriteRule .*\.(jpg|gif|png|flv|css|js|swf)$   http://cdn.server.com/$0 [R=301,L]

This will send requests for the file types in the brackets to your cdn and keep requests for other types on your primary server.

Greg B 2009-05-13 16:00:40

Doesn't that defeat the purpose of the CDN? It means the client has to still contact your server for every request to the CDN, versus hitting the CDN directly.

davr 2009-05-13 16:18:27

True, but the content will not ne served from your server. So instead of a 5Mb FLV being delivered from your server. It will be redirected to the CDN where the actual download will happen. This configuration allows you to easily swap from a single server development environment to your live environment without any changes. I'm not advocating this as _the_ way to do it. It works for me and the miniscule roundtrip for the 301 is worth it.

Greg B 2009-05-13 17:31:47

How would this work if you had some files on the CDN and others locally?

dragonmantank 2009-05-13 20:00:40

It wouldn't. This is just one example that worked in my situation

Greg B 2009-05-13 20:08:12

Answer 3

+5 A:

Use relative paths, not absolute paths. When inside a CSS file, the path is relative to the CSS file and not the HTML page.

If your CSS file is here

http://cdn.example.com/css/style.css

And your class is

.cool-button { background-image: url('../images/button.png'); }

Then the browser will attempt to load the image from

http://cdn.example.com/images/button.png

great_llama 2009-05-13 16:01:05

Usually I'll put the images folder under a CSS theme folder, though, as it allows me to use image names that aren't specific to a particular stylesheet document. I would be able to have a button.png under /this_theme/ and the same file name under /that_theme/ and the class definition could remain the same.

great_llama 2009-05-13 16:03:11

Don’t confuse relative/absolute URI paths with absolute/relative URIs. Because `/css/style.css` is an absolute URI path but a relative URI. And `http://cdn.example.com/css/style.css` (beginning with `http://`) is an absolute URI but not an URI path (it just contains a URI path).

Gumbo 2009-05-13 16:08:54

Of course, this only works if you host the css file on the exact same domain as the images, which is often not the case

2009-06-10 14:56:35

Why bother hosting stylesheet-related images on a CDN and not the stylesheet itself?

great_llama 2009-06-10 19:10:11

Answer 4

A:

If the server is same, you can use relative paths. Like /http/blah/test/images/button.png or ../images/button.png

NinethSense 2009-05-13 16:01:08

Answer 5

A:

When using relative URLs, you can force a "base" url. In the <head> tag, use <base href="http://cdn-dev.example.com">. Then, every relative link "/style.css" will point to "http://cdn-dev.example.com/style.css"

For reference: http://www.w3schools.com/TAGS/tag_base.asp

2009-05-13 16:05:52

But this has also disadvantages. For example, URI references with just a fragment identifier `foo` will then be resolved to `/#foo` and not just `#foo` in the same document.

Gumbo 2009-05-13 16:15:36

Answer 6

+1 A:

You can also have a build process and use templates to generate environment specific files

e.g. in a file called yoursite.template.css

.cool-button { background-image: url('@@URL@@/images/button.png'); }

create the yoursite.css file than replace @@URL@@ with the domain you want.

Robbie 2009-05-13 16:10:01

Answer 7

A:

Well...the solution I came up with was...sorta...hackish, ugly and dumb. But, hell, it worked:

<?php
    if ($_SERVER['SERVER_NAME'] == "www.domain.tld") {

     $incs_path  = "/usr/local/psa/home/vhosts/domain.tld/non-web-root-folder/private-files";

    }
    else {
     $incs_path = "incs";
    }

require_once "$incs_path/$file-to-be-called.inc";

?>

This is, as noted, hacky and ugly and could be done far more prettily. But it does, at least, allow you to define specific locations for specific groups of files depending on the host.

David Thomas 2009-05-13 16:12:48

and domain-relative urls would, probably, be far prettier and more useful. My suggestion, I guess, is more useful for linking to otherwise private information (I tend to use this kinda thing for db passwords and such for web apps).

David Thomas 2009-05-13 16:14:31

Answer 8

A:

Like so many people said. Just use relative URL's.

Dmitri Farkov 2009-05-13 19:59:32

Answer 9

A:

Depending on your server configuration, you can also append the .php-extension to your filenames and have them treated as PHP scripts too:

I.E.: style.css.php would contain:

.cool-button { background-image url(<?php echo $bgImgUrl;?>); }

This also works for JavaScript-files.

christian studer 2009-05-14 13:00:17

ansaurus

tags:

views:

answers:

Dynamic URLs in CSS/JS

related questions