Weekly Support Recap #5

Week's almost over, let's see what issues we have solved. Once again Mangirdas shared some useful information. This time it's on CDN and custom menu list classes. Read on!

CDN

Use CDN to speed up your website. Not only does it increase the speed for your website's visitor, but it also reduces the CPU load on your server.

To use CDN, first you have to have a CDN provider. There's plenty of them out there. For example we use Amazon CloudFront for our CDN. ImpressPages CSS and JS files are loaded from cdn.impresspages.org which is Amazon CloudFront server. When the web browser access cdn.impresspages.org/example.jpg, Amazon downloads that image from www.impresspages.org/example.jpg and cache the copy on many servers around the world for faster access next time.

How to instruct ImpressPages to use CDN?

Add following configuration values to config.php file to enable CDN on ImpressPages

'urlOverrides' => array(
'Plugin/' => "http://cdn.example.com/Plugin/",
'Theme/' => "http://cdn.example.com/Theme/",
'Ip/' => "http://cnd.example.com/Ip/"
),

This will force ImpressPages to use CDN url to load all theme, plugin and core resources. This doesn't work for content images yet. You can't add following option as it will break the repository upload function:

'file/' => "http://cdn.example.com/file/",

But we are working on this issue ;)

Custom menu list classes

Maverikt from UK was asking how to add some specific CSS classes to ImpressPages generated menu (navigation). To do so, you can override Ip/Internal/Config/view/menu.php view file in your theme.

More often you can make it work by simply passing some additional parameters. Menu slot accept special attributes parameter. Where you can set any HTML attributes to the main <UL> tag of menu.

For example, this code will print menu with 'xxx' class and 'yyy' id added.

<?php
echo ipSlot(
    'menu',
    array(
        'items' => 'menu1',
        'attributes' => array('class' => 'xxx', 'id' => 'yyy'))
    );
?>

At the same time, if some of used classes (like 'active' or 'crumb') doesn't meet CSS you already have, you can change it into your own class name. See example bellow:

<?php
$options = array(
    'items' => 'menu1', //menu to be displayed
    'active' => 'light', // use 'light' instead of 'active'
    'crumb' => 'dark' // use 'dark' instead of 'crumb'
);
echo ipSlot('menu', $options);
?>

Click here to see the full documentation about menu slot.

See previous posts: