Content Modelling in Contentful

8 minute read

As a follow-up to my previous post introducing the Angular Contentful starter kit project that I put together, I’m going to follow that up with a discussion around content modelling in Contentful and my experience thus far.

Available Field Types

Contentful ships with 8 core field types which I’ll briefly outline:

  • Text – self explanatory
  • Numbers – ditto
  • Date and time – simple datetime field with UI selector
  • Location – stored as coordinates but can be searched via text search
  • Media – link media image either by selecting existing media or dropping new
  • Booleans – checkboxes, switches etc
  • JSON Object – allows embedding custom JSON objects
  • Reference – allows linking to other types of content

Check out their content model documentation for more information.

So far I’m a big fan of the content model, and the platform in general. Linking content together was simple enough using “references” which allow us to link one piece of content directly to another. If you’re familiar with SDL Tridion – think component links. Fields can be multivalued and because we have a write API available, we can use fields for storing content or even system configurations etc. For example – could store product codes in a multivalue text field which we query content against.

I setup some basic content models and executed some sample queries. The JSON structure returned was straight forward, and easy to parse through with the JSON preview tool Contentful provides. Check out the following where I have a basic “Product” piece of content open that has references to other “Products” which are thrown-in with the purchase of the original product.

Notice how when I click on the linked “Product”, it opens inline for editing? Traversing through linked pieces of content is super simple.

Tagging and Linking Content

One of the biggest questions I had was about how we could actually implement tagging and linking content types. The first obvious answer is “References” – which is the field which allows us to simply link a piece of content to another, but there’s another option – tagging.

At first glance Contentful doesn’t appear to have a tagging system – but they actually recommend creating an entire content type for a tagging category. You can also use a tag field for users to enter space delimiters, or a predefined list of values for a drop-down.

Translation and Localization

There are some pretty powerful localization options too. You can set each field as being translatable, which editors can then translate.

Furthermore – because there’s a content management API with SDKs in most languages you can automate the translation process using translation service vendors.

Content can be translated by selecting the language and having the fields appear under the English version.

Field Validations

The validation options on the fields are also quite flexible. You can set minimum and maximum character counts, match against regular expressions, accept values from a specific list, and of course set the field as mandatory or not.

Image fields can be restricted based on:

  • File types (extension)
  • Image dimensions
  • File size

Finally – reference fields, which allow us to link content types together, allow us to only allow linking to specific content types per field.

Uploading Media

Uploading Media into Contentful is just as easy as entering the content. You can drag and drop single / multiple files, and edit images directly in the tool which is helpful to minimize the software required for your editorial staff.

Media can be uploaded by dragging and dropping into Contentful, and can also be edited.

Four Available APIs

Contentful ships with four major APIs:

Which all come well documented. The Content Management and Preview APIs are quite powerful and means we could implement tools to automate and script content maintenance, upload – etc. This would prove useful if migrating into Contentful from a legacy content management system. Or automating uploading product data into a JSON field in the component.

The web application that we interact with to edit Contentful content is built on the Content Management API. That means anything that can be done in the interface, can be scripted. You could write scripts to loop through all pieces of content built on a specific content type and update a field programmatically.