Skip to content
Derek Jones edited this page Jul 4, 2012 · 48 revisions

So I was checking out some of the assets extensions people have made and though they were useful and served their purpose, I had some additions I wanted to make and so I went off to make my own asset system. Here is the scoop:

I wanted to be able to use the CodeIgniter system in my javascript and css files and I wanted a simple way to incorporate this as well as load images, js, css, swf, flv, etc... So my system is as follows.

[h2]Download[/h2] File:asset_manager.zip

[h2]Details[/h2] The files used are:

  • application>config>assets.php
  • application>controllers>asset_controller.php
  • application>libraries>Assets.php

And you just need to add in a simple route in our application>config>routes.php file.

$route["asset/:any"] = "asset_controller/index";

An then wherever you set your assets path to in your config file (see below) you need to create the folder (in this code it is in our root). Here would be the default directory structure. [pre]assets/public/images assets/public/js assets/public/css assets/public/flash

assets/admin/images assets/admin/js assets/admin/css assets/admin/flash

assets/shared/images assets/shared/js assets/shared/css assets/shared/flash[/pre]

[h2]The files[/h2] [b]application>config>assets.php[/b]

<?php
$config["assets_folder"] = "assets";
$config["assets_path"] = $_SERVER["DOCUMENT_ROOT"]."/".$config["assets_folder"];
$config["default_level"] = "public";

// set asset types and folders
$config["asset_types"] = array(
                                "flv"        =>    "flash",
                                "swf"        =>    "flash",
                                "jpg"        =>    "images",
                                "png"        =>    "images",
                                "gif"        =>    "images",
                                "js"        =>    "js",
                                "css"        =>    "css"
                                );
?>

[b]application>controllers>asset_controller.php[/b]

<?php

class Asset_controller extends Controller {
    function Asset_controller()
    {
        parent::Controller();
    }
    
    function index(){
        $this->load->config("assets");
        $asset_folder = $this->config->item("assets_path");
        $type = $this->uri->segment(2);
        $level = $this->uri->segment(3);
        $files_path = "$asset_folder/$level/$type/";
        $ext = ".$type";
        $file = $this->uri->segment(4);
        if($type == 'js'){
            Header("Content-type: text/javascript");
        }elseif($type == 'css'){
            Header ("Content-type: text/css");
        }
        require_once($files_path.$file.$ext);
    }
}
?>

[b]application>libraries>Assets.php[/b]

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Assets {
    
    var $javascript = array();
    var $css = array();
    
    function Assets($config=array()){
        // Get CI instance
        $this->ci =& get_instance();
        if(!empty($config)){
            foreach($config as $k => $v){
                $this->$k = $v;
            }
        }else{
            show_error("Assets Config File is Missing or is Empty");
        }
    }
    
    function load($file,$level="",$params=array()){
        if(!$level){
            $level = $this->default_level;
        }
        $type = strtolower(substr(strrchr($file, '.'), 1));
        if($type=="jpg" || $type=="png" || $type=="gif"){
            // Generate Image Link
            $image_link = site_url("$this->assets_folder/$level/images").$file;
            // Generate the Paramaters
            $image_params = $this->generate_params($params);
            // Create Image Tag
            $output = "<img src='$image_link'>";
            return $output;
        }elseif($type=="js"){
            if(array_key_exists("extra",$params) && $params["extra"] != ""){
                $this->javascript[] = "$type/$level/$file/{$params["extra"]}";
            }else{
                $this->javascript[] = "$type/$level/$file";
            }
        }elseif($type=="css"){
            $this->css[] = "$type/$level/$file";
        }else{
            return false;
        }
    }
    
    function url($file,$level=""){
        if(!$level){
            $level = $this->default_level;
        }
        $type = strtolower(substr(strrchr($file, '.'), 1));
        if(array_key_exists($type,$this->asset_types)){
            foreach($this->asset_types as $asset_type => $folder){
                if($type == $asset_type){
                    $output = site_url("$this->assets_folder/$level/$folder").$file;
                    return $output;
                    break;
                }
            }
        }else{
            show_error("$type is not a valid asset type");
        }
    }
        
    function generate_params($params){
        $output = '';
        if(!empty($params)){
            foreach($params as $k => $v){
                $output .= ' '.$k.'="'.$v.'"';
            }
        }
        return $output;
    }
    
    function display_header_assets(){
        $output = '';
        foreach($this->javascript as $file){
            $output .= "\n";
        }
        foreach($this->css as $file){
            $output .= "&lt;link type='text/css' rel='stylesheet' href='".site_url("asset").str_replace(".css","",$file)."/' /&gt;\n";
        }
        return $output;
    }
}

?&gt;

[h2]Onto the fun stuff[/h2] Now lets take a look at how we would actually go about using this asset manager. You can use the functions below in any controller, view, or model as long as you load the asset library.

&lt;?php
$this->load->library("assets");

/*
 *  URL
 *  http://localhost/ci/assets/public/images/header.jpg
 */
echo $this->assets->url("header.jpg");

/*
 *  URL
 *  http://localhost/ci/assets/admin/images/header.gif
 */
echo $this->assets->url("header.gif","admin");

/*
 *  URL
 *  http://localhost/ci/assets/shared/images/header.css
 */
echo $this->assets->url("style.css","shared");

/*
 *  Image
 *  <img src="http://localhost/ci/assets/public/images/header.jpg">
 */
echo $this->assets->load("header.jpg");

/*
 *  Image
 *  <img src="http://localhost/ci/assets/shared/images/header.png">
 */
echo $this->assets->load("header.png","shared");

/*
 *  Image
 *  <img src="http://localhost/ci/assets/public/images/header.gif" border="0" class="img_class">
 */
echo $this->assets->load("header.gif","public",array("border"=>"0","class"=>"img_class"));

/*
 *  Put this in between the &lt;head&gt;&lt;/head&gt; tag to load up some php enabled
 *  javascript and css pages.  Will produce: 
 *  &lt;link type='text/css' rel='stylesheet' href='http://localhost/ci/asset/css/public/style/' /&gt;
 *  &lt;link type='text/css' rel='stylesheet' href='http://localhost/ci/asset/css/shared/calendar/' /&gt;
 */
$this->assets->load("style.css");
$this->assets->load("calendar.css","shared");
echo $this->assets->display_header_assets();
// Javascript will work too but won't render in this wiki
?&gt;

Well, there you have it. I hope that this helps someone out there as it has saved me tons of time.

Category:Contributions::Libraries::Miscallenous Category:Assets

Clone this wiki locally