Update. The usage of the Kohana Media module is also demonstrated in the demo application presented here.
Introduction
The Kohana Media module aims to simplify the management of Javascript and CSS files in modern web applications. Using the singleton pattern, both Javascript and CSS files can be managed all across the web application. Used CSS files are organized according to their media type (e.g.screen
or print
). The files are compressed using JSMin and CSSMin and bundled in a single file. To accelerate web performance, the bundled files are cached.
Kohana Media on GitHub
Configuration
Before getting started, we have a look on the configuration file of the module. By default, the Javascript and CSS files are expected to be found at the following locations:return array( 'css' => DOCROOT . 'media' . DIRECTORY_SEPARATOR . 'css' . DIRECTORY_SEPARATOR, 'js' => DOCROOT . 'media' . DIRECTORY_SEPARATOR . 'js' . DIRECTORY_SEPARATOR, );
Usage
Note: Kohana::$cache_dir
is usually set to application/cache
. This will not work for CSS or JS files due to Kohana's rewriting rules. It is recommended to change Kohana::$cache_dir
to cache
(outside the application
directory) using Kohana::init
in bootstrap.php
.
screen
or print
) can be added using the provided CSS helper which is accessible via Media::instance()->css($type)
and expects the media type to be passed as argument.
Media::instance()->css('print')->add('bootstrap.min.css'); // Or add multiple at once: Media::instance()->css('screen')->add(array( 'bootstrap.min.css', 'application.css', // ... ));For adding javascript files we have to be aware of the dependencies between the files (e.g. all JavaScript plugins of Twitter Bootstrap require jQuery to be loaded first). Again, we use the
add
method of the provided JavaScript helper to add JavaScript files:
// Bootstrap depends on JQuery. Media::instance()->js()->add('bootstrap.min.js', array('jquery.min.js')); // Multiple at once: Media::instance()->js()->add(array( // File => array of dependencies. 'bootstrap.min.js' => array('jquery.min.js'), 'bootstrap-datepicker.js' => array('jquery.min.js', 'bootstrap.min.js'), // ... ));The files are bundled, compressed and stored in
Kohana::$cache_dir
. They can be included within the template using the render
method which returns the full filename of the created cached file:
<-- We assume Kohana::$cache_dir to be the directory 'cache' in the root of the application. --> <script type="text/javascript" src="<?php echo URL::base() . 'cache/' . Media::instance()->js()->render(); ?>"></script> <link rel="stylesheet" type="text/css" href="<?php echo URL::base() . 'cache/' . Media::instance()->css('screen')->render(); ?>"> <link rel="stylesheet" type="text/css" href="<?php echo URL::base() . 'cache/' . Media::instance()->css('print')->render(); ?>" media="print">