Collections

In this article, we'll show you how to use Collections in Sitejet. The Collections feature is useful in situations when you have several items of the same type you wish to display on your website, and it allows you to create templates for subpages that all follow the same structure. Popular examples include a blog, job postings, or real estate listings, directories or just simple news.

Basic knowledge

A Collection consists of four main parts:

• The Collection, which defines the structure (fields) for all Collection items, for example, title, name, date, etc.
• The entries that contain the respective content
• The Collection container which displays a preview of the Collection item entries
• The Collection template that controls the uniform design of the item pages

Video

This video was recorded in the old UI. We will update this video for you soon.

Collection Manager

First, you like to open the Collection Manager and define your first Collection. For this, please follow these steps: 

1. Go to "More" on the top right menu. Es öffnet sich ein Dropdown
2. Click on it and you will see a dropdown menu appearing. 
3. Choose "Collection Manager". Now, a new panel will open on the right side.
   
   

   

4. Click on "New Collection"
5. Give your Collection a great name!
   
   

   

6. Click on "save". Aaaand done! This creates an empty Collection with default values for the fields and the Collection template. Now you are able to manage the necessary features of your Collection like Fields, the Collection Item template. 

You will also find a video of a "How-To".  Please bear in mind, that this show the old version of the CMS.

By default, a Collection does not contain any items after creation. If you'd like to see an example of Collection items to familiarize yourself with Collections, you are either able to open one of the many templates, that do have a Collection implemented, such as Pesk, Evergreen, Ashop or Opus. 

Import a Collection or blog entries

It is possible to import and export a Collection. Please create a new Collection and import another Collection (for example from Wordpress or another website) via *.csv into the new Collection. If you need assistance with this process, please get in touch with Support or even better - get in touch with our Community of Sitejettes, to get your help from an experienced user. 

Fields

Fields contain certain information and data for a respective Collection item in a standardized format. You can use these fields either in the item itself or in the Collection container, similar to the way databindings are used. A separate page is automatically created for each item from the "Collection template" and the fields.

Available fields

By default, two fields are created in each Collection:

• "Name" is the title of the item
• "Slug" is a search engine-friendly part of the URL that is used to identify a specific item. It is automatically generated from the name, but can also be customized
  
  

  

Add additional fields

You can add more fields by clicking on "Fields" and "New Field". On the right side of the screen, you will see the "Collections" menu. Here is where you can see all existing Collections and switch to their view. If the selected Collection is called "Job openings" - for example, then in the section "Job openings: Fields" you will see the fields of the Collection "Job openings".

If the Collection were called "The Best Collection", the section would be called "The Best Collection: Fields". This allows you to quickly and easily check whether you are currently editing the fields for the intended Collection.

In this section, you can not only edit the existing fields, but also add new ones by clicking "New Field". The fields "Name" and "Slug" should not be edited.

You can choose from the following different field types when creating a field:

• The "Plain Text" and "Rich Text" fields can be used for all possible types of texts.
• "CMS" offers you the possibility to integrate individual Sitejet elements, presets, or even entire pages.
• "File(s)" lets you connect to files in the media manager. 
• "Checkbox" lets you choose between to status: checked and unchecked. You could use this for example for the checkboces "published" and "unpublished" as a filter later.
• "Choice" to create a dropdown menu for sorting.
• "Date" lets you define a certain date for your item.
• "Number" gives you the chance to mark the items by numbers. A great filter option for later.
• "Link" let's you set a link as a field.

In the "Label" input field, enter the name you would like for the field. As soon as you have decided on a type, another input field called "Help text" will be displayed. Enter a short description of the field here so that your colleagues, your customer, or even you will always know what this field was intended for.

When you have added a few fields you will then see, that in each Collection item you have added before, there are now the new fields you have added.

You have now set up your first Collection with an item or possibly more items and a few fields. 

Collection containers

Now, let's find a great place for your Collection on the website! For this, you need to add a "Collection Container" to the place you like to see your Collection. A Collection Container is an element that displays a preview of the Collection Items on a website. 

For example, if you wanted to display your blog, a Collection Container could contain the blog titles and link to the individual blog entries, that are Collection Items. In the Collection Container settings, you can set defaults for sorting and filtering the items in the preview. Only one Collection can be assigned to a Collection Container at a time. Currently, it is not yet possible to "mix" and "cross reference". But we will work on that in the future.

If you want to display the contents of a Collection in several places on your website, you can link several Collection Containers to the same Collection or duplicate a Collection Container that has already been added. 

The Collection Container can be added to your site as follows:

1. Scroll down on the left content panel and look for "Collections". 
   
   

   

2. Click and Drag for example the "Collection" into the Website Builder. You will then see a new Container.
   
   
3. Now, you are able to choose from the Collection you like to place there. You are also able to directly access the "Collection Item template", assign filter, work on the styles and make all the adjustments to get your Collection work on your website. 
   

   

4. After you have added a Collection Container to the website, you need to define, what content should be displayed and how it should be displayed. You can change this at any time! For this, please select for example an image element, a headline 2 and 4 and text fields. Now, you are able to define which content from your Collection should be displayed there. 
   
   

   

5. You are able decide for yourself which content you like to display in your Collection Container. When you change the field names or content, this should directly be displayed. If not, please just save and reload. 

   

6. If no entries have been created yet for this Collection, a corresponding message appears. Clicking on "Manage items" takes you to where you can create, delete, and edit items.

Add new items

To create new entries, click on "Manage items". This will take you to the item manager, where you can simply click "New entry" to create a new item.

You will then see your first Collection item. This item consists of an overview of all assigned fields. Now you can fill it with content according to your wishes. Click on "Save" as soon as you are done with your changes. 

Preview

The preview view gives a preview of existing items and their contents. You can specify which information should be displayed in the preview and which should only be displayed on the respective item page. For example, if you had a Collection of job openings, you can specify that you want a list of job titles to appear in the Collection container (without job descriptions), but you want all field data to appear on the item page (including job title and job description).

As already mentioned, the preview view is made possible with a Collection container. How this is inserted has already been mentioned in the " Collection Containers" section above.

Collection Template

The Collection template is what sets a uniform design for all item pages. You can access the Collection Tmplate by clicking on the link button next to the "Name" field in the Collections menu. You are able to browse through your Collection Items and see how each item will be displayed with your template.

Once you have opened the Collection template, you can edit it just like any other Sitejet page. In addition, all collection fields are now available. You just need to define the template once for each Collection. And you are able to change that any time and the changes will apply to each item.

For example, you could set your header as a static content and reference in each item. Same applies to the footer. If you like to have the headline of your item as the header, please add a heading element to the template. The heading element should contain the field "Title". Open the element settings of the heading that has just been added. There you will find the "Collection" section. Here you can select the respective field from the drop-down list under "Assign content from Collection name". If you would rather provide static content, i.e. content that remains the same for all pages, leave it as "No assignment, content remains static" and enter the desired text into the text element.

Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.

Back to the top