Create a new ZOO module layout

This tutorial will walk you through the process of creating a new module layout for ZOO 2.0 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.

Adding new position to a layout of ZOO item module

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>

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

<?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; ?>

Creating a new layout for ZOO item module

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; ?>

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!