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 application's 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. Let's 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.