How do I add data-driven content to my project?

Create a basic collection

Like most content types in Blutui, everything begins in your project dashboard.

1. Open your project in the Blutui dashboard.
2. Navigate to the Collections section using the sidebar.
3. Click Create collection to start a new one.

When creating a collection, you’ll define the fields that will hold your content data.
For this example, let’s add three fields:

• Text — for the staff member’s name
• Textarea — for their bio or description
• Image — for their profile picture

Each field requires a Name, which is how you’ll reference it in your templates later.

Create a template for your collection

Once your collection is set up, you can display it on your site using a Canvas template.

In this example, let’s say our collection’s handle is staff.

1. Inside your project’s views directory, create a new folder called components (if it doesn’t already exist).
2. Inside it, create a file named staff.html.

Your file structure should look like this:

views/
└── components/
    └── staff.html

Now open staff.html and add the following Canvas code:

{% set collection = cms.collection('staff') %}

{% for entry in collection %}
  <div>
    <img src="{{ entry.image }}" alt="{{ entry.name }}" />
    <h2>{{ entry.name }}</h2>
    {{ entry.bio | raw }}
  </div>
{% endfor %}

This code:

• Retrieves the staff collection and assigns it to a variable.
• Loops through each entry in the collection.
• Renders the image, name, and role for each item.

Include your collection template in a page

To display the collection on your page, include your new component in a page or layout template using the {% include %} tag:

{% include 'components/staff.html' %}

This will render all the entries from your staff collection wherever you place the include.