Asset handling in CodeIgniter with the BASE tag
There are many suggested ways to handle your assets (CSS, images, JavaScript, etc) in CodeIgniter including my very own Asset library. Some people use paths relative to the web root like this:
<img src="/image/logo.gif" alt="Logo" />
This method works fine if your application will only EVER exist in the web root. If that works for you, fine, no need to read on.
Those that need their assets to be found wherever their CodeIgniter application happens to sit (root, sub-directory, sub-domain) can use libraries, helpers or add base_url() in front of all refferences to an asset. This does work but seems a bit overkill for something that can be handled with HTML.
My new evil scheme? Use the lesser-known HTML tag <base> to get all of our links and refferences working perfectly. This should go into the <head> of your document.
<base href="<?=base_url();?>">
Now all your relative links will be relative to your base_url. Brilliant!
<img src="images/logo.gif" alt="Logo" />
That will work fine, assuming your images are stored in public_html/images. Use some common sense on that.
Comments
Eric Barnes
2009-09-22
Great suggestion! I have been using this method for years now. Another thing I do is wrap this inside an if that checks for ssl. Then on ssl pages all your assets are called correctly.
Jeremy
2009-09-22
Wow. How did I not know this? *bangs head on desk repeatedly*
Thanks for sharing and saving me tons of time in the future!
Briandhall
2009-09-22
Fantastic, thanks for posting, and thanks to you too Eric for that if switch. So much easier than how I've been handling it!
Trae Regan
2009-10-05
Another great CI time-saver from Phil. Thank you!
Zonkers Terwillager
2009-10-20
Neat! A hiccup to note: If you're using page anchors: href="#fu", they'll point out the base url page, not internally on your page.
Nick
2009-10-22
As a newcomer to PHP frameworks, I refuse to complicate things that were previously simple w/ pure HTML.. so I was horrified at the thought of adding base_url function calls to every asset tag. This is a huge help and a huge relief. Thanks a ton.
Teo Jurado
2009-10-27
Sorry, but I can't download this Library, The link is correct (I supose), but ony download the cURL Controller....
Please... Correct This...
Thanks
Phil Sturgeon
2009-10-30
Teo: I think that was just GitHub having a funny 5 minutes. Seems ok to me.
Jamie G
2009-11-02
I have just started out using CI and instantly came up against this issue. A clean solution in a fantastic framework. Thanks Phil!
Dustin
2009-11-04
It's giving the cURL thing again... odd. Looks like you've done a great job with the Asset library and I look forward to giving it a whirl. Thank you!
(As a side note, this captcha is pretty aggrivating... apparently I'm not a human!)
Lat233
2010-02-24
Hi
Have you test with your server configured in Rewrite mode?
Buzzknow
2010-11-23
nice trick to handle path to css/js in CI :)
thanks
Amit
2010-12-31
What is the best way to handle the image path and script path (say php script path during ajax call) inside javascript or css files ?
they are relative to ?
Phil Sturgeon
2011-01-01
In CSS everything is relative as normally you are just looking for ../images or something, but in JavaScript that is a little more tricky. Assign a JS variable via var BASE_URL = '';
Amit
2011-01-02
Thanks for the trick Phil :)