Assigning ZOO elements to Apps

If you are into beginning of using ZOO CCK, you might cause a question: how to assign elements to Apps? This tutorial will save your time.

There are two core Apps (Blog and Pages) that has been added as an example.

Let's add an instance called News with Blog App:

Create a new instance with Blog App

Click on Blog App and on the next step you should assign the App a template:

Go to App config

Assign the App a template

Just remember the template name you have selected since it will be required on next steps. It is default in our example. In case if the name has been forgotten or you are going to add new elements to existing site you always can change the template in App configuration (click on Config link).

Adding elements

It is time to add elements. Click on gear icon to manage elements of the App. It is also can be called as App Config, but has another features.

Click on Gear button to go to App configuration

On next step you will must select the App to configure:

Select the Blog App to configure it

The App has various types of content related to specific features. By default there are two types in Blog: Article and Author. To the right there is a list of Template Layouts. We need to manage layouts of the template which was selected in App config (see above). In our case it was default template.

Now we can see a list of content types and template layouts. First of all, let's add new elements to the content type. Click on Edit elements link below the Article.

Edit elements for Article

Add new elements to Article type

On the right side you can see Element Library. Click on the elements which you want to add to the App type. You also can configure elements here (see Social Share settings on the screenshot below). Let's add Social Share and Open Graph, give these elements a name, play with its settings and save the article type.

Let's construct a new view: which elements should be displayed in the selected layout.

Configure elements for selected layouts

Each template has the following layots:

• Edit - edit layout in the item edit view.

• Feed - feed layout for all kinds of feeds like RSS or Atom.

• Full - item view.

• Submission - submission layout in submission view.

• Teaser - teaser layout in the frontpage, category, alphaindex and tag.

In our example we need Full and Teaser. Click on Teaser.

Adding the element to a position and override its options

We see positions on left and elements on right. We can add required elements from right and assign them to the positions. Using drag'n'drop move Social Share element to the preferable position. Moreover, you can override its settings. You can add as many elements as it is needed.

Front-end: Social Share buttons in teaser view

You can add any required element to be rendered on the teaser page. Let's add the same elements to Full page too and change some params to make elements looks different. Click on Full layout. Now add Social Share element with drag'n'drop and play with its settings to make it different from teaser layout.

Adding the element to a position with custom settings

Customized Social Share buttons in full layout (Position: Fixed Left)

Using this approach you can add any elements to content types, then assign these elements to required positions and change its settings in each layout. As a result, you can customize layout views according to your needs.