Editing ZOO Template Files

As we've gone through here, when working with ZOO, we use templates to define positions for elements. Sometimes, using the default templates is not sufficient for certain features or functionality we're looking for.

In this article we'll look at changing render positions in the template.

Open your template renderer folder; media/zoo/applications/[yourapplication]/templates/renderer/item. These are the files that render each view in ZOO. We'll be looking at the full-view, in full.php - open this file.

As you can see when you open the file, there are a whole heap of different positions - these can be moved around to where ever you need to create the proper layout for your content.

For example - we want to render our image above the title on the page. To do this, let's change where it gets rendered. Below is the media position on it's own.

<?php if ((($view->params->get('template.item_media_alignment') == "left") || ($view->params->get('template.item_media_alignment') == "right")) && $this->checkPosition('media')) : ?>
	<div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
		<?php echo $this->renderPosition('media', array('style' => 'block')); ?>
	</div>
	<?php endif; ?>

This is what we want to move. If we don't get the whole position - eg. Miss some of closing code, it'll kill the page. This is a common problem, so ensure you're getting the whole piece - pay close attention to opening and closing statements.

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

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

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

<?php if (($view->params->get('template.item_media_alignment') == "top") && $this->checkPosition('media')) : ?>
<div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
	<?php echo $this->renderPosition('media', array('style' => 'block')); ?>
</div>
<?php endif; ?>

<div class="floatbox">

	<?php if ((($view->params->get('template.item_media_alignment') == "left") || ($view->params->get('template.item_media_alignment') == "right")) && $this->checkPosition('media')) : ?>
	<div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
		<?php echo $this->renderPosition('media', array('style' => 'block')); ?>
	</div>
	<?php endif; ?>

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

</div>

You can see that there is more than 1 media position - this is defined in our template configuration but is defaulted to left so that's what we'll focus on. Be aware that you'll have to move whichever one is set in your config. At the moment, our media-left is being rendered just before the content. Let's grab this and paste it right above pos-title

<?php if ((($view->params->get('template.item_media_alignment') == "left") || ($view->params->get('template.item_media_alignment') == "right")) && $this->checkPosition('media')) : ?>
	<div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
		<?php echo $this->renderPosition('media', array('style' => 'block')); ?>
	</div>
	<?php endif; ?>

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

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

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

<?php if (($view->params->get('template.item_media_alignment') == "top") && $this->checkPosition('media')) : ?>
<div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
	<?php echo $this->renderPosition('media', array('style' => 'block')); ?>
</div>
<?php endif; ?>

<div class="floatbox">

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

</div>

Now our image will render before the title. This can be done for any and all positions in the template.