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.
Table of contents
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 entries
- The collection template that controls the uniform design of the item pages
Add a collection
You add a collection to the project by performing the following steps:
- Move your mouse in Website Builder (CMS) over "Website" in the menu bar at the top of the page
- Click on "Collections" from the dropdown menu which appears
On the right side, the collections overview opens, which lists all collections already created in the project. Via "New Collection", you can create a new collection. Enter a name for the collection and click the save icon to create the collection. The fields of the collection will then be displayed in the same view.
This creates an empty collection with default values for the fields and the collection template.
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, take a look at our blog help article. Using job openings as an example, you would specify here that a collection item would be comprised of the following fields: "Job title", "Job description", "Availability date", and "Contact".
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.
By default, two fields are created in collections:
- "Name" is the title of the item
- "Slug" is a human and 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" in the upper right corner of the item management view. 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", then in the section "Job openings: Fields" you will see the fields of the collection "Job openings". If the collection were called "Current Info", the section would be called "Current Info: 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".
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 entire pages.
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.
For a collection called "Job openings", it would be useful to create the following fields:
|Image||Files||Here you can upload a relevant photo|
|Description||Text field||Here you can write a job description|
|Contact person||Text field / Choice||Here you can write the name of the person who job applicants should send their information to. Alternatively, you could use the "Choice" option to select a person if there are multiple frequently used points of contact.|
|Email address||Text field / Choice||Here you can write the email address of the point of contact. Alternatively, you could select it using the "Choice" option.|
Under the section dealing with fields is the section regarding the collection item template. The name of this section will contain the name of the collection, followed by a colon and "Collection Item Template". In the current example, the section called "Job openings: Collection Item Template", is where you would find a button next to the "Name" field that will take you to the template for the "Job openings" collection items.
A collection container is an element that displays a preview of the collection items on a website. For example, if you wanted to display a list of job openings, a collection container could contain the job titles and link to the individual job posting 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.
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:
- In the Website Builder (CMS), move your mouse over "+ Add content" in the menu bar at the top of the page
- Click "Element"
- Drag the "Collection" item to the location where you want the preview view of your collection items to appear
After you have added a collection container to the website, the first collection is selected by default. You can change this at any time if you have created additional collections.
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.
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.
For the collection container, the different setting menus have different purposes:
- The "Preset settings" menu which exists for all presets
- Specifies what the collection container should look like
- The collection settings menu, called "Edit collection container", that only exist for collection containers
- Specifies the collection to be used
- Creates a filter
- Specifies what to sort by
- ...and much more
The collection template is what sets a uniform design for all item pages. You can access the collection template by clicking on the link button next to the "Name" field in the Collections menu.
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.
For the "job openings" example, we would 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", in our case the collection name would be "Job openings". 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. Here you can go directly to our community. If you need help with your Slack account, please e-mail us to firstname.lastname@example.org .