Asset helper tutorial for CI

Asset helper makes the view files more organized and speedup your coding since you can quickly include asset files to the views. We will start by creating following folder structure for organizing our assets. 

webroot
   |--- assets
           |-- css
           |-- js
           |-- img
           |-- cache

So now we have created an assets folder parallel to our CodeIgniter application folder. As next step we need to include the assets root path to a configuration file. Instead we will add it as a constant since it is not going to change frequently. So open the file at application/config/constants.php and add the following line in it.

..................
define('ASSET_PATH','assets/');
/*
*   End of application/config/constants.php
*/

Now we have defined a constant with name ASSET_PATH which can be used inside our asset helper. We are planning to have three main functions inside our asset helper. 

• css_asset
• js_asset
• img_asset

Also we will have one internal function for generating the URL for the above three functions and we will name it as asset_url. The asset_url is our core function which generates the relative url for the asset. Also it does one more awesome work by combining multiple files into one in runtime when asset name passed together in an array. This is useful to reduce the number server hits when more css and js files used in a single page. 

function asset_url($asset_name, $asset_type = NULL) {
    $obj = & get_instance();
    $base_url = $obj->config->item('base_url');
    $asset_root = '/assets/';
    $asset_location = $base_url . $asset_root;
    endif;
	if (is_array($asset_name))
	{
		$cachename = md5(serialize($asset_name));
		$asset_location .= 'cache/' . $cachename . '.' . $asset_type;
		if(!is_file($asset_root . 'cache/' . $cachename . '.' . $asset_type))
		{
			$out = fopen($asset_root . 'cache/' . $cachename . '.' . $asset_type, "w");
			foreach($asset_name as $file)
			{
				$file_content = file_get_contents($asset_root . $asset_type . '/' . $file);
				fwrite($out, $file_content);
			}
			fclose($out);
		}
	}
	else
	{
		$asset_location .= $asset_type . '/' . $asset_name;
	}
    return $asset_location;
}

So now we have implemented our core function and will see how to implement the remaining helper functions which are actually called from our view files.

function css_asset($asset_name,$attributes = array()) {
	$attribute_str = _parse_asset_html($attributes);
	return '<link href="' . asset_url($asset_name,'css') . '" rel="stylesheet" type="text/css"' . $attribute_str . ' />';
}

function js_asset($asset_name) {
	return '<script type="text/javascript" src="' . asset_url($asset_name,'js') . '"></script>';
}

function image_asset($asset_name, $module_name = '', $attributes = array()) {
	$attribute_str = _parse_asset_html($attributes);
	return '<img src="' . asset_url($asset_name,'img') . '"' . $attribute_str . ' />';
}

function _parse_asset_html($attributes = NULL) 
{
	if (is_array($attributes)):
		$attribute_str = '';
		foreach ($attributes as $key => $value)
			$attribute_str .= ' ' . $key . '="' . $value . '"';
		endforeach;
		return $attribute_str;
	endif;
	return '';
}

Using the asset helper

Now we have completed with the asset helper and it is the time to use it. Place the files in appropriate folder then call it using one of the below method inside the view files.

<?php
	echo css_asset('mystyle.css');
	echo image_asset('myimage.css');
	echo js_asset('myscript.js');
<?

For image_asset() and css_asset() you can pass the second optional parameter as an array containing the attributes for the HTML element.