Theme Layouts

Every JReviews page, module, widget, and email is wrapped in a theme layout. This opens up a few possibilities for customization, like email templating, or creating two column layouts for specific pages.

Overview

When creating a new custom theme theme_layouts were mentioned in passing. To render any view (page, module, widget), we need both a layout and an entry template. Below you can see some of the layouts present in the default theme.

`-- default/
    `-- theme_layouts/
        |-- detail.thtml
        |-- email.thtml
        |-- listings.thtml
        |-- module.thtml

You can find out which layout is used on any given view with Theme Explorer.

When JReviews renders a view, first it processes the entry template and all children templates called by it. That returns an HTML output which is then passed to the layout as a variable named $content_for_layout.

All variables/data and view helpers passed to the view are also available in the layout.

Customizing a Layout

Layout overrides work just like any other template override. You copy the layout template you want to customize to the corresponding folder in your custom theme, then clear the file registry in the JReviews administration.

If we wanted to override the detail view layout, our custom theme structure would look like this:

jreviews_overrides/
`-- views/
    `-- themes/
        `-- mysite/
            |-- themeInfo.xml
            `-- theme_layouts/
                `-- detail.thtml

Example: 2 column detail page layout

The following is a simple example, not meant to be used in production, but more as a way to open up your imagination about possible uses for layouts, if any.

When you open the detail.thtml layout you find the following code:

<?php
if ($this->viewSuffix != '')
{
	echo sprintf('<div class="jrStyles%s">%s</div>', $this->viewSuffix, $content_for_layout);
}
else {

	echo $content_for_layout;
}
?>

The first part of the if statement checks to see if a suffix was passed to the view, and if it was, then it wraps the output in a div that includes the CSS class jrStyles{$suffix} where $suffix is the actual theme suffix value. Otherwise, without a suffix, the output is just $content_for_layout.

To create a 2 column layout for the detail page, where the custom fields are shown on a right sidebar, we can do it like this:

<div class="fwd-flex fwd-flex-col sm:fwd-flex-row fwd-w-full">

	<div class="fwd-w-4/5">
      <?php
      if($this->viewSuffix != '')
      {
          echo sprintf('<div class="jrStyles%s">%s</div>', $this->viewSuffix, $content_for_layout);
      }
      else {

          echo $content_for_layout;
      }
      ?>
    </div>
    
    <div class="fwd-flex-auto fwd-pl-4">
        <?php echo $CustomFields->displayAll($listing,'content');?>
    </div>

</div>

Of course you would need to remove the custom field code from the listings/detail.thtml template so it's not duplicated, and in this case, on small screens the custom fields would appear at the bottom of the page.

This example is only meant to introduce you to theme layouts so you can put your imagination at work!

Example: Email Templating

A good use of theme layouts in JReviews is for email templating. Read more in the email templating article under theme resources.