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!

You may be interested in...



Had enough browsing?

Get in touch

Get in touch

We wont charge you for the inital project meeting. So really you have nothing to lose.

Fill out the form below with as much information as you can provide and we will be in touch with you asap to discuss.

Name(*)
Please type your full name. Also only allowing alpha numeric characters here. Why do you have all this fancy stuff in your name anyway?

Email(*)
Invalid email address.

Phone
Please enter a valid phone number.

Enquiry Type(*)
Invalid Input

Message(*)
Please only use alphanumeric characters in your message

Invalid Input