Create a new element renderer

This tutorial will walk you through the process of creating a new element renderer for a template in ZOO.

Getting started

To get an impression of how the element renderer work, go to /components/com_zoo/renderer/. Within this folder there are several files that contain the standard element renderers.

If you create a renderer and put it into the applications template folder, as in the example below. It will override any default renderer with the same name.

Getting into detail

Creating your own renderer for a template is pretty straight forward. Lets create a renderer called demo. Go to /media/zoo/applications/APPLICATION/templates/TEMPLATE/renderer/ and create a folder called element. In here we create a demo.php file.

In the demo.php file we need to tell the element how it has to render itself.

// create label
$label = '';
if (isset($params['showlabel']) && $params['showlabel']) {
	$label .= '<h3>';
	$label .= ($params['altlabel']) ? $params['altlabel'] : $element->getConfig()->get('name');
	$label .= '</h3>';
}

// create class attribute
$class = 'element element-'.$element->getElementType().' '.($params['first'] ? ' first' : '').($params['last'] ? ' last' : '');

?>

<?php echo $label.$element->render($params); ?>

The first part of the script will echo the label if the parameter is set to true, the second part will render the element itself. In the element renderer you will be provided with the $params array. These are the elements display options.

The demo element renderer doesn't do much, except for rendering the element. But feel free to customize the elements output as needed.

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!