Managing Assets with CodeIgniter

This article discusses the reason behind the base_url() method and the creation of a helper file that will assist in managing images, css files, and more.

PHP code is far from the only content necessary for most web applications. Most frequently we need to include images, css files, flash files, and many other types of files. The CodeIgniter framework doesn't contain a built-in methodology for asset management, leaving the developer to their own devices when it comes to deciding where to put this content. Every developer is going to have their own personal preference, and for the most part they're equally valid.

The base_url() method

Imagine a scenario where you have developed a site that contains user profiles. Each user profile can have an image. The code in your view that would display the image may look something like this:

<img src="/images/profiles/myface.jpg" alt="" />

This works fine until your cool new site is bought up and now your application rests at http://www.bigcompany.com/mycoolsite. Now, you have to go through all of your code and search/replace "/images with "/mycoolsite/images while hoping that you've found everything and that something small won't be missed until 500 users have seen it.

Instead, we use the base_url() method for creating absolute links. base_url() simply outputs the value of the $config['base_url'] variable that is set in your application/config/config.php file. Your new code would look like this:

<img src="<?=base_url()?>images/profiles/myface.jpg" alt="" />

Now, if you need to change the location of your site you can simply update the $config['base_url'] value in your application/config.php and your code will be updated throughout the site. For this reason it's a good idea to use base_url() anywhere that you would use an absolute or relative url that points to your CodeIgniter site.



< form action="admin/users/edit/72" method="post"> <a href="<?=base_url()?>admin/pages">Manage Pages</a>

The asset_url() function

We not only have to consider that our application may be moving, we need to consider how we're keeping our static assets mobile, things like images, css files, etc. My method is to create a path_helper that contains a new function, asset_url().

// application/helpers/path_helper.php
if (!function_exists('asset_url'))
{   
    function asset_url()
    {
        // the helper function doesn't have access to $this, so we need to get a reference to the 
        // CodeIgniter instance.  We'll store that reference as $CI and use it instead of $this
        $CI =& get_instance();

        // return the asset_url
        return base_url() . $CI->config->item('asset_path');
    }
}

Then, in either our config.php or in a new configuration file we would add:

// config.php
$config['asset_path'] = 'system/application/assets/';

Now, we just add the path_helper and the configuration file (if you're not using config.php) to the autoload.php file.

// Note that you omit the _helper.php suffix from the filename when loading helpers, it's automatically added by CodeIgniter.
$autoload['helper'] = array('form', 'url', 'path');

// This line doesn't need to be use if you modified the config.php file, as it's already loaded for you.
// This line configures application/config/site.cfg to be autoloaded on every page load.
$autoload['config'] = array('site');

Now that the helper has been created, the configuration updated, and everything set to autoload we're ready to use the asset_url() method. Here's the new way of writing image source.

<img src="<?=asset_url()?>images/profiles/myface.jpg" alt="" />

Now, the asset root folder can be moved anywhere you'd like and you'll be able to easily move these files around. This can be very useful if users are uploading images to your live site and you wish to view them on your dev site as well. You could simply update your configuration so that instead of use base_url() it uses http://www.mysite.com/ so that asset requests hit your live site instead of the local development site.

A Quick Note on Preference

Naturally, all programmers prefer to do things differently. Some prefer the asset_url set to './' so that the images/ folder is at the same place as the CodeIgniter system/ folder. I personally prefer to place assets under the application folder as shown below:

system/application/assets/images system/application/assets/js system/application/assets/swf

I am of the opinion that the entirety of a site should be contained within the application/ folder, allowing for the rest of the CodeIgniter structure to be replaced (version upgrade) simply. It's always important to consider the cost of maintaining the site in the future. It doesn't cost any extra time to implement good practices during development but it can be very costly to retrofit a site with similar functionality, especially if there's been personnel changes.

The mark of a professional developer is designing and developing with focus on the lifetime cost of the product.

If you have any questions or suggestions please leave a comment.