CakePHP Asset Mapper

CakePHP Logo

CakePHP Asset Mapper is a manager for JavaScript and CSS includes. You can manage your includes site-wide from one file.

The files are put through JSMin and CSS Tidy. Packing the files is built on Matt Curry's Asset Packer.

Download CakePHP Asset Mapper!

Install Instructions

  1. Have a running installation of CakePHP (v1.2).
  2. Download CakePHP Asset Mapper.
  3. Unpack asset files in new folder called, "asset" in helpers folder /app/views/helpers/asset/
  4. Unpack css_tidy and jsmin to vendors folder /vendors/
  5. Include AssetMapper Helper in your App Controller /app/controller/app_controller.php
  6. Define Mapper Rules in Asset Map file /app/views/helpers/asset/asset_map.php
  7. Output the CSS and JavaScript files in your view using $styles_for_layout and $javascript_for_layout variables.

Note that Asset Mapper will only be enabled when debug is set to 0. See developmentMode in asset_mapper.php.

Example of Using Asset Mapper (asset_mapper.php)


    /* Define Rules
	 * 
	 * STEP 1: Create a new rule.
	 * $rule = new $this->AssetRule();
	 * 
	 * STEP 2: Set the rule properties.
	 * controller		: Map assets to a controller
	 * action			: Map assets to an action
	 * compact->css			: CSS files to compact and compress with CSS Tidy
	 * compact->scripts		: Scripts to compact into one file and minify with JS Min
	 * scripts				: Include scripts
	 * codeblock			: Include a codeblock
	 * 
	 * STEP 3: Render the rule.
	 * $rule->render();  
	 * 
	 * @note: If no controller or action is set, then the files are included site-wide
	 * @note: The compacted scripts get rendered first, then the regular scripts and then lastly the codeblocks
	 * */

EXAMPLE:
	$this->AssetRule->create(); 
	$this->AssetRule->compact->css = array('site'); 
	$this->AssetRule->compact->scripts = array('jquery', 'ui.datepicker'); 
	$this->AssetRule->runRule(); 
 
EXAMPLE:
	$this->AssetRule->create(); 
	$this->AssetRule->action = 'admin_edit'; 
	$this->AssetRule->scripts = array('tiny_mce/tiny_mce'); 
	$this->AssetRule->codeblock = 'tinyMCE.init({ 
	    mode : "textareas", 
	    theme : "advanced", 
	    plugins : "media", 
	    media_external_list_url : "media/list.js", 
	    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,outdent,indent,redo,link,unlink", 
	    theme_advanced_buttons2 : "", 
	    theme_advanced_buttons3 : "", 
	    theme_advanced_resizing : true, 
	    theme_advanced_toolbar_location : "top", 
	    theme_advanced_toolbar_align : "left", 
	    theme_advanced_statusbar_location : "bottom", 
	    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" 
	});'; 
	$this->AssetRule->runRule();    

EXAMPLE:
	$this->AssetRule->create();
	$this->AssetRule->compact->css = array('site');
	$this->AssetRule->compact->scripts = array('jquery');
	$this->AssetRule->runRule();

EXAMPLE:
	$this->AssetRule->controller = 'properties';
	$this->AssetRule->action = array('edit_details','edit_photos');
	$this->AssetRule->scripts = array('controller/properties/edit');
	$this->AssetRule->runRule();

Example View (Template)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
	<title><?php echo $title_for_layout?></title>
	<?php echo $styles_for_layout ?>
</head>
	<body>
		<?php $session->flash() ?>
		<?php echo $content_for_layout ?>
		<?php echo $javascript_for_layout ?>
	</body>
</html>

Need more help or have comments?

Email Marc Grabanski (m@marcgrabanski.com) "CakePHP Asset Mapper" in the subject.

More Reading

Blog post introducing CakePHP Asset Mapper

Bakery Article on CakePHP Asset Mapper

Make a Donation

If you use, and enjoy, this script please consider donating to support our efforts.

Social Bookmarking