Custom Module Layouts

This tutorial will walk you through the process of creating a new module layout for the ZOO extension. We will show the steps on the basis of ZOO item module.

Getting Started

All the files for a ZOO module are usually located in /modules/MODULE/.

For ZOO item module for example the path is /modules/mod_zooitem/.

In the folder /tmpl/ all files for the theme are stored. The folder /renderer/item/ contains all files for the layouts.

Add a New Position

If you want to customize the item module and add new positions go to modules/mod_zooitem/renderer/item and open positions.xml:

<?xml version="1.0" encoding="utf-8"?>
<renderer>
    <positions layout="default">
        <position name="media">Media</position>
        <position name="meta">Meta</position>
        <position name="description">Description</position>
    </positions>
</renderer>
</code></pre>

<p>Here you can add a new position to the default layout, for example a position called "content":</p>

<pre><code><?xml version="1.0" encoding="utf-8"?>
<renderer>
    <positions layout="default">
        <position name="media">Media</position>
        <position name="meta">Meta</position>
        <position name="description">Description</position>
        <position name="content">Content</position>
    </positions>
</renderer>

You also have to render the position in the default layout. To do so open default.php in the same folder and add the following code:

<?php if ($this->checkPosition('content')) : ?>
    <div class="content">
        <?php echo $this->renderPosition('content'); ?>
    </div>
<?php endif; ?>

Create a New Layout

If you don't want to use the default layout you can create your own one. Open positions.xml in the folder modules/mod_zooitem/renderer/item to add your new layout with new positions. For example:

<?xml version="1.0" encoding="utf-8"?>

<renderer>
    <positions layout="default">
        <position name="media">Media</position>
        <position name="meta">Meta</position>
        <position name="description">Description</position>
    </positions>
    <positions layout="newlayout">
        <position name="header">Header</position>
        <position name="left">Left</position>
    </positions>
</renderer>

In this example we added a new layout newlayout with the positions: header and left. Next thing to do is to create the layout file called newlayout.php. Here is a sample code to render the positions:

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
?>
<?php if ($this->checkPosition('header')) : ?>
<div class="header">
    <?php echo $this->renderPosition('header'); ?>
</div>
<?php endif; ?>

<?php if ($this->checkPosition('left')) : ?>
<div class="left">
    <?php echo $this->renderPosition('left'); ?>
</div>
<?php endif; ?>