Creating new positions in ZOO

As we've looked at here, we may need to render elements in different positions to get the most out of our website's functionality and useability. Now let's make some new positions that we can assign elements to.

Open your template renderer folder; media/zoo/applications/[yourapplication]/templates/renderer/item. These are the files that render each view in ZOO. Lets open the full-view template, full.php

As you can see when you open the file, there are many different positions - but you need an additional one.

Copy one of the positions already there - this is what it should look like.

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

Paste your position where ever you want it to render on the page - for example, lets render this position underneath pos-content - inside the floatbox.

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

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

</div>

Once you have your new position in the render file, you need to define it in the positions.xml file. This tells ZOO which positions are available to add elements to. Open positions.xml and find the template you added your position to. Ours is full.

<renderer>
	<positions layout="full">
		<position name="top">Top</position>
		<position name="title">Title</position>
		<position name="subtitle">Subtitle</position>
		<position name="meta">Meta</position>
		<position name="media">Media</position>
		<position name="content">Content</position>
		<position name="taxonomy">Taxonomy</position>
		<position name="bottom">Bottom</position>
		<position name="related">Related</position>
		<position name="author">Author</position>
	</positions>
	<positions layout="teaser">
		<position name="title">Title</position>
		<position name="subtitle">Subtitle</position>
		<position name="meta">Meta</position>
		<position name="media">Media</position>
		<position name="content">Content</position>
		<position name="links">Links</position>
	</positions>
	<positions layout="feed">
		<position name="description">Description</position>
	</positions>
	<positions layout="submission">
		<position name="content">Content</position>
		<position name="media">Media</position>
		<position name="meta">Meta</position>
		<position name="administration">Administration</position>
	</positions>
</renderer>

Just duplicate one of the positions already there and change the text to relate to yours.

	<positions layout="full">
		<position name="top">Top</position>
		<position name="title">Title</position>
		<position name="subtitle">Subtitle</position>
		<position name="meta">Meta</position>
		<position name="media">Media</position>
		<position name="content">Content</position>
		<position name="position">Position</position>
		<position name="taxonomy">Taxonomy</position>
		<position name="bottom">Bottom</position>
		<position name="related">Related</position>
		<position name="author">Author</position>
	</positions>

Save the file and you should now be able to add elements to your custom position!