Today i wrote new asset manager for my cms by taking ideas from contributions on codeigniter. This is very useful for my cms. I am going to modify more in the future as i have time. But for now i would like to show how it works.
STEP 1:
I have a config file called MY_config. And, i autoload this config on config/autoload.php
<?php
$autoload['config'] = array('MY_config');
?>
Also, i autoload my new library in this file, along with other libraries as:
<?php
$autoload['libraries'] = array('database', 'session','login', 'assets');
?>
STEP 2:
Now i need to edit MY_config.php file.
<?php
/*
* DEFFINE BELOW ITEMS FOR ASSETS MANAGEMENT
* dir is relative to base dir
* filenames should not have extensions i.e. no .css or .js
*/
//Base Path where index.php or admin.php is located
$config['cf']['base_path'] = dirname(FCPATH) . '/';
/*
* assets directory relative to base_path above
* trailing slash (/) required if not empty e.g. 'assets/'
* if empty then just ''
*/
$config['cf']['assets_dir'] = 'assets/';
/*
* js (script) directory
* No trailing or leading slashes (/)
*/
$config['cf']['js_dir'] = 'js';
/*
* css directory
* No trailing or leading slashes (/)
*/
$config['cf']['css_dir'] = 'css';
//do js and css located in multifolder like admin, frontend, common
//default is false
$config['cf']['is_js_css_split'] = true;
/*
* if is_js_css_split is true, define directories they can be found according to preferences in an array
* e.g. css can be found at: assets/common/css or, assets/admin/css etc...
* Script stops search when it finds one.
*/
$config['cf']['js_css_dir'] = array(
'frontend',
'common',
'admin'
);
/*
* Define css that need to be autoloaded in every page
*/
$config['cf']['defaults']['css'] = array(
'all' => array('helper','header', 'menuLeft', 'jquery.jdMenu', 'footer')
);
/*
* Define js that need to be autoloaded in every page
*/
$config['cf']['defaults']['js'] = array('jquery', 'jquery.dimensions', 'jquery.positionBy', 'jquery.bgiframe', 'jquery.jdMenu');
?>
STEP 3:
Now on controller, or view file load css and js as follow:
<?php
$assets = array();
//load all required css
//if media type not defined, screen is default.
//$assets['css'] = array('admin','swiff','box','upload');
$assets['css'] = array('all' => array('page', 'special'));
//load all required js
$assets['js'] = array('xyz','abc');
$this->assets->load($assets);
?>
STEP 4:
Now its time to echo loaded css and js. Put the below code wherever you want to echo it. definitely its between <head> & </head>:
<?php $this->assets->get(); ?>
It'll echo css|js as: If you view source of this page, you'll understand what i'm talking about.
<link rel=" stylesheet" href="http://www.codefight.org/ assets/frontend/css/page.css" type="text/css" media="all" /> ... <script type="text/javascript" src="http://www.codefight.org/assets/frontend/js/jquery.js"></script> ...
STEP 5:
This step should have been bit before but it really doesn't matter. Just upload the asset manager library to library folder.
Thats it!!!
Test Test posted on - Saturday 14th of March 2009 05:33:30 AM