Since I started using Framer, I've been thinking about CMS: how to create a dynamic blog on this platform? Could it replace the traditional integration (with the main site) of WordPress as a Headless CMS?

Well, after some time of experience, and with a few new updates, the answer is undoubtedly yes. And one update that made a total difference in how we can create dynamic content was the Collection Reference and Multi-Reference feature.

This changes everything.
Since I spent a good amount of time trying to figure out the perfect operation, mainly due to the lack of clear tutorials on the web, I think it’s worth documenting in the form of a tutorial to help those on the no-coding journey.

Brief summary:

CMS Collection References, in Framer, is the integration of items across different CMS collections.
Basically, it connects items from one collection to another, like linking an authors database to the categories database, which are related to each post.

In this case, I have a collection of categories, one of authors, and one of posts.

And what’s the advantage? You can manage and automate all the related content in one place.
This means that, after the structure is complete, the blog user can edit all the content just through the CMS panel, filling out only fields. It becomes easy to add a new category to an old article, without having to touch any design or code.

But filtering things is still a bit confusing, what connects to what, how to use variant conversion, etc.

I spent a good amount of time trying to understand how this referencing works, and I think it’s worth recording and sharing the learning.
I’ll explain how I build an interactive blog using this as an example, focusing on the display of multiple categories, enabling filters, and relating the databases.

Relating database and components:

I initially created the collections that I will use, and each item from the collection will be a category tag.

In the posts collection, one of the fields is the "multi-reference," where you can select which collection will be the reference.

Thus, for each new item in the articles collection that I create, I will be able to insert items from the "categories" collection in the tags field.

Now on the front:
I created a component with text and color variants for each tag referencing the items created in the CMS.
The idea is that the variant will be selected automatically based on the addition or removal of categories to the posts.

And now I can use the tags anywhere.
In this case, I will use them on the post page, above the initial image of each article, and also on the blog homepage, in each post thumbnail.

To position the component on the page, you need to insert the reference collection first, and in this case, make the component the Collection Item (meaning the component will be inside the collection grouping).

Having done that, let's filter:
The trick here is to select the property "is included in" and relate the multi-reference of the tags in the value field.

Now, in the tags component, the transform option will be enabled in the variants field. Here, we set the main field (which contains the category names) as the variable and select the convert function, and then we just correlate the sets (when it is [x text], use the [x tag]).

Final observations

In this way, the collections must be well integrated.
What consumed a lot of my time was understanding which filter functions to use, and one very important thing:

Whenever referring something from a CMS, it is necessary to insert the grouping of the collection in which the information is contained.

In the example above, the collection was inserted directly on the CMS page (of the article). But if we did this within a component, the collection must be referenced there, and the filters properly configured, exactly as shown earlier.

Did you like the content? Follow me because more is coming soon (: