Layout Vars

When managing a complex front end, you may need to have a set of layout variables that can be get and set for various purposes.

Here is an example

$theme->layoutVars = array(
    'bodyClasses' => array(),
    'replaceContainer' => false, // use this in case you need the view to replace the default layout
    'containerClass' => '', // the main container class can be set to 'no-padding'
    'swapColumns' => false, // use this to make the left column go below on mobile view
    'showPageHeader' => true, // show or hide the page header, e.g for the homepage
    'phType' => 'default', // page header type
    'phClass' => '', // add page header class
    'phColClasses'        => '', // page header column classes - must be an array of 2 items
    'phSize'        => 'module-sm', // module module-md module-sm module-xs
    'phRight'        => 'breadcrumbs', // default to breadcrumbs on the right; options: breadcrumbs or nav (like in portfolio)
    'phBgSrc'        => '', // the image to use as page header background
    'phAlpha'        => '', // Alpha opacity to use for this page header
    'phColor'        => 'bg-gray', // the image to use as page header background
    'footBgSrc'        => '', // possible to have a background on the footer
    'ftColor'        => 'bg-gray', // possible to have a background on the footer
    'sectionTitle'        => false, // use the section title for this page instead of the page title (news, discography)
    'sibSelector'        => '', // selector to use for navigation of siblings, since they are not sorted; ex. sort=-year
    'transparentMenu'     => false,
    'headerIcon'        => '',
    'sidePosition'        => '',
    'headerDark'        => false,
    'headerBg'        => '',
);

You establish these vars in the _init.php file for the site.

You can interact with the layout vars by using the helper method setLayout($key, $value);

setLayout($key, $value);

for example say you have a page and you need to set the background image of the header to something specific for this template.

$image = $page->images->first()->width(1640);

$theme->setLayout('phBgSrc', $image->url);

Checking the value of a Layout Variable

You can also check the Layout Var to decide about some other result, for example to determine some page header classes if there is a page header image specified:

if($theme->layoutVars['phBgSrc']) {
    $phClasses['background']    = '';
    $phClasses['parallax']      = 'parallax';
    $phClasses['size']          = $theme->layoutVars['phSize'] ?: 'module'; // let the size set to module unless the setting has been set
}

Last updated