Compress all CSS and JS with Yoo Warp Framework 7.x

Yoo themes with Warp Framework 7+ have great option to minify CSS and JavaScript files and use gzip compression and Data URIs to reduce image file requests. But it only works for template files and some Joomla files. In this article you will find tutorial how to make modification in Warp 7+ to compress all CSS and JS files added to Joomla Header.

Compatibility

All changes were made in Yoo Master 2 template with Warp Framework 7.2.8 for Joomla 2.5 - 3.3. It can be also applied to other templates with Warp 7+.

If you have Warp 6+ then read article Compress all CSS and JS with Yoo Warp Framework 6.x.

Head Layout from Warp

Copy file: templates/yoo_master2/warp/systems/joomla/layouts/head.php
to newly created: templates/yoo_master2/layouts/head.php.

This file is responsible for modifying Joomla head data and compressing CSS and JS files. Edit this file and remove following code (including below part of code) from line 131 - 159 which compress CSS and JS added to Joomla head by some plugins. But at this point component and modules are not rendered yet and did not add any CSS or JS files.

    // compress joomla styles and scripts
    $head = $this['system']->document->getHeadData();

    ...
    $this['system']->document->setHeadData(array_merge($head, $data));

Head Layout for Joomla

Create new file: templates/yoo_master2/layouts/head_extensions.php with following content which would compress all CSS and JS files from Joomla extensions. We would call this file at the end of template after Joomla extensions are rendered.

<?php
// customizer mode
if ($this['config']['customizer']) {

}
// developer mode
else if ($this['config']['dev_mode']) {

}
// compress styles and scripts
else if ($compression = $this['config']['compression'] or $this['config']['direction'] == 'rtl') {

    $options = array();

    // set options
    if ($compression == 3) {
        $options['Gzip'] = true;
    }

    // compress joomla styles and scripts
    $head = $this['system']->document->getHeadData();
    $data = array('styleSheets' => array(), 'scripts' => array());

    foreach ($head['styleSheets'] as $style => $meta) {

        if (preg_match('/\.css$/i', $style)) {
            $asset = $this['asset']->createFile($style);
            if ($asset->getPath()) {
                $style = $this['asset']->cache(basename($style), $asset, array('CssImportResolver', 'CssRewriteUrl', 'CssCompressor'), $options)->getUrl();
            }
        }

        $data['styleSheets'][$style] = $meta;
    }

    foreach ($head['scripts'] as $script => $meta) {

        if (preg_match('/\.js$/i', $script)) {
            $asset = $this['asset']->createFile($script);
            if ($asset->getPath()) {
                $script = $this['asset']->cache(basename($script), $asset, array('JsCompressor'), $options)->getUrl();
            }
        }

        $data['scripts'][$script] = $meta;
    }

    $this['system']->document->setHeadData(array_merge($head, $data));
}

Template Layout

Edit file: templates/yoo_master2/layouts/theme.php and before closing tag </body> at the end of file add following code which would run code with compression of CSS and JS files from Joomla extensions.

<?php echo $this['template']->render('head_extensions'); ?>
</body>

Settings

After making all changes go to your template configuration and enable Compression: Minify + Data URIs or Minify + Data URIs + Gzip.

You might need also to remove old cache. Go to System > Clear Cache and select on list template and Delete it.