How do I expand page content using collection data?

Create an Authors collection

Start by creating a new collection in your project dashboard.

1. Navigate to the Collections section in your Blutui dashboard.
2. Click Create collection and name it Authors.
3. Add the following fields:

After saving the collection, create your first entry:

Reference the author in a blog post

Next, open one of your blog posts (or create a new one) and fill in the author field with the author’s handle — in this case:

frodo-baggins

This will link the blog post to the matching entry in your Authors collection.

Connect the author data in your template

Now, let’s connect your blog post to its author data inside your Canvas template.

At the top of your blog post template, set and filter the collection to find the correct author:

{% set authors = cms.collection('authors') %}
{% set author = authors | filter(v => v.handle == post.author) | first %}

This retrieves the authors collection and filters it by the handle value matching the blog post’s author field.

Display the author information

Once you’ve set the author variable, you can display the author’s details anywhere in your post template. Typically, this is shown at the bottom of the blog post.

<div class="author-section">
  <img
    src="{{ author.avatar }}"
    alt="{{ author.name }}"
  >
  <p>
    <strong>{{ author.name }}</strong>
  </p>
  <div>
    {{ author.bio | raw }}
  </div>
</div>

This will render the author’s avatar, name, and biography directly from the collection data.

Extend this approach further

You can use this same pattern to expand your pages with other types of related content, such as:

• Linking locations to events
• Displaying categories or tags for posts
• Showing related products or team members based on handles or URLs

By using collections, you can connect data across your site and make your content more flexible and scalable.