Content Modelling

Fields

Within each Content Type - Page, Entry or Block you can then choose from a range of Field Types depending on the data you want the editor to input.

General Field Settings

Help Text

Text added to this field will appear as help_text to give the editor information about how to use the field.

Make Required

Makes the field mandatory and won’t allow the page to be saved unless the field is completed.

Use As Name

All text fields can be used as the name for the field in the CMS by clicking the use Use as Name toggle so it goes green.

Assets

The Assets field type is used to allow editors to add assets from the assets folder in Contento.

Content Model

Editors View

When the editor clicks add an asset a modal will open for the Assets folder.

They can then select or upload new assets to use.

Field Settings

Limit

Allows for a restriction on how may assets can be added.

Restricted Types

The Assets can be of any type and this is the default setting. They can be restricted to either images only or documents only in the drop down.

Contento Image API

The mime_type attribute will automatically determine if the file is an image and update the is_image attribute to true or false. If is_image is true, the asset can be manipulated using the Image Optimization API by passing parameters into the apiParams attribute.

Image Component

We recommend using our Image Component that helps optimise your images by converting them to webp for greater compression without losing image quality. It also has an apiParams attribute for the Image Optimization API and automatically outputs the alt tag using your image description from Contento.

Code Examples

JSON

This is an example of the JSON object for an Asset.

{
  "id": "Gzb7AQ7pOZ",
  "name": "Grimacing Face Balloon",
  "description": "Bright yellow balloon of the grimacing face emoji.",
  "path": "assets/Gzb7AQ7pOZ/grimacing-face-balloon.jpg",
  "url": "https://assets.contento.io/assets/Gzb7AQ7pOZ/grimacing-face-balloon.jpg",
  "extension": "jpg",
  "size": "3.6 MB",
  "mime_type": "image/jpeg",
  "is_image": true,
  "width": 6000,
  "height": 4000
}

TypeScript

This is an example of using the Contento Image Component to output and asset and optimizing the image using the apiParams attribute.

<Image
   asset={block.fields.example_assets.assets[0].asset}
   apiParams="fit=fill&w=600&dpr=2"
/>

Text

The Text field type is used for simple text that does not require WYSIWYG functionality.

Content Model

Editors View

Field Settings

Character Limit

Allows a restriction of the maximum number of characters the field can receive.

Allow Multiline Text

Allows for line breaks within the Text field. A restriction on maximum number of rows can be applied. Leave blank for no restriction.

Code Examples

JSON

This is an example of the JSON object for a Text field.

{
  id: 'f_01hW5p95kyrarpRnp83w8Pk6p9',
  name: 'Example Text',
  text: 'Everybody was Kung Fu fighting. Those kicks were fast as lightning',
  type: 'text',
  handle: 'example_text',
  help_text: null
}

TypeScript

This is an example of how to output text in an <h2> tag from a Text field.

<h2>{block.fields.example_text.text}</h2>

Long Text

The Long Text field type is used for text that requires WYSIWYG / rich text editor functionality.

Content Model

Editors View

Text Types

Heading 2, Heading 3, Heading 4, Paragraph

Text Styles

Bold, Italic, Underline, Strikethrough, Small Text, Links

Text Layout

Bullets (unordered list), Numbers (ordered list), Quote

Other

Horizontal Rule and Markdown.

We recommend using the dangerouslySetInnerHTML attribute from React.js to output the text without markup.

Code Examples

JSON

This is an example of the JSON for a Long Text field.

{
  id: 'f_01hw5P95KYrArPRnp83W8Pk6pA',
  name: 'Example Long Text',
  text: 'Sandra called to say she’s having a perm and it’s running over. Quickly re-schedule or adjust a meeting’s start time and every attendee will be notified immediately.',
  type: 'text',
  handle: 'body',
  help_text: null
}

TypeScript

This is an example of how to use the dangerouslySetInnerHTML attribute to output rich text from a Long Text field.

<div
   dangerouslySetInnerHTML={{
     __html: block.fields.example_long_text.text,
    }}
 />

List

The List field type allows for simple text objects to be created and saved as an array.

Content Model

Editors View

Press enter after typing each list item and it will appear below. You can delete it using the bin icon or drag the items around to reorder them. They can’t be edited, so if you wish to update one then delete it and re-type it again.

Field Settings

Limit

Allows for restriction of how many list items can be created.

Code Examples

JSON

This is an example of the JSON object for a List field.

[
  { sort: 0, text: 'Her name is Noelle' },
  { sort: 1, text: 'I have a dream about her' },
  { sort: 2, text: 'She rings my bell' },
  { sort: 3, text: 'I got gym class in half an hour' },
  { sort: 4, text: 'Oh, how she rocks' },
  { sort: 5, text: 'In Keds and tube socks'}
]

TypeScript

This is an example of using a map function to output each list item from a List field.

{block.fields.example_list.list.map((item, index) => {
    return (
        <p key={`example-list-item-${index}`}>
           {item.text}
        </p>
    );
})}

Toggle

The Toggle Field Type allows for a boolean response to be triggered depending on the position of the toggle. The is_on value will be true if the toggle is switched on (green) and false if it is not (grey).

Content Model

Editors View

Field Settings

Default Value

Allows to choose if you wish the default value for the toggle to be true or false.

Toggle to the left and grey = false

Toggle to the right and green = true

Code Examples

JSON

This is an example of the JSON object for a Toggle field.

{
  id: 'f_01H6Xv1KMx5Cn9emSMCbT4sr6E',
  name: 'Example Toggle',
  type: 'toggle',
  is_on: false,
  handle: 'example_toggle',
  help_text: null
}

TypeScript

This is an example of using the Toggle field output is_on to conditionally render a <p> tag.

{block.fields.example_toggle.is_on && (
    <p>Render me because the toggle is on</p>
)}

The Dropdown field type allows single selection of an option from a dropdown list. To add new options type in the box and hit enter, the option will appear below. You can then edit the label and the value that will be outputted in the JSON. You can also use the bin icon to delete options.

Content Model

Editors View

A tick with appear at the left of the selected option and the background will be grey.

Field Settings

Default

Each option has a make default button which can be used to make that option the default selection in the editors dropdown menu.

Code Examples

JSON

This is an example of the JSON object for a Dropdown field.

{
  id: 'f_01HSb1tBbA76929j4Jt042FamM',
  name: 'Example Dropdown',
  type: 'dropdown',
  handle: 'example_dropdown',
  help_text: null,
  selected_option: { label: 'Right', value: 'right' }
}

TypeScript

This is an example of using a switch statement to output different components depending on the value chosen by the editor in the selected_option.

export default function DropDownOption({
  option,
  className,
}: {
  option: string
  className: string
}) {
  switch (option) {

    case 'option_one':
      return <OptionOne className={className} />

    case 'option_two':
      return <OptionTwo className={className} />

    default:
      return <div>Missing Option: {option}</div>
  }
}

// Import and use component in page layout

<DropDownOption option={block.fields.icon.selected_option.value} />

Integer

The Integer field type allows whole numbers above and including 0.

Content Model

Editors View

Field Settings

Default value

A default integer can be set for the field that will automatically be used if the number is not updated by the editor.

Minimum value

Allows for a restriction on the minimum value of the integer and is inclusive.

Maximum value

Allows for a restriction of the maximum value of the integer and is also inclusive.

Code Examples

JSON

This is an example of the JSON object for an Integer field.

{
  id: 'f_01HwCZ4T0Xhz12Xp2Amx2WStd6',
  name: 'Example Integer',
  type: 'integer',
  handle: 'example_integer',
  number: '10',
  help_text: null
}

TypeScript

This is an example of outputting the number from an Integer field in a <p> tag.

<p>{block.fields.example_integer.number}</p>

Date

The Date content type allows Datetime string in ISO8601 format.

Content Model

Editors View

You can type a date and time in dd/mm/yyyy, hh:mm format.

You can also click the calendar icon to use the monthly date and time UI.

Code Examples

JSON

This is an example of the JSON object for a Date field.

{
  id: 'f_01HwD1x17NBD5A0M8X4Fm246pW',
  date: '2024-04-26T13:20:00+00:00',
  name: 'Example Date',
  type: 'date',
  handle: 'example_date',
  help_text: null
}

TypeScript

We recommend you use a date handler function if you wish to output the date in your front end code. This is an example of using a date handler function to output the date from a Date field.

export const formatDate = (dateString: string | undefined): string => {
  if (dateString) {
    const date = new Date(dateString);
    const options: Intl.DateTimeFormatOptions = {
      year: "numeric",
      month: "long",
      day: "numeric",
    };
    return new Intl.DateTimeFormat("en-US", options).format(date);
  } else {
    return "";
  }
};

// Import and use formatDate function in component

{formatDate(block.fields.example_date.date)}

// Output

April 26, 2024

Decimal

The Decimal field type allows a number to two decimal places and is stored as a string.

Content Model

Editors View

Field Settings

Default value

A default decimal can be set for the field that will automatically be used if the number is not updated by the editor.

Minimum value

Allows for a restriction on the minimum value of the decimal and is inclusive.

Maximum value

Allows for a restriction of the maximum value of the decimal and is also inclusive.

Code Examples

JSON

This is an example of the JSON object for a Decimal field.

{
  id: 'f_01hwD39975T8065Vpfzkk6ZwgY',
  name: 'Example Decimal',
  type: 'decimal',
  handle: 'example_decimal',
  number: '1.26',
  help_text: null
}

TypeScript

This is an example of outputting the number from a Decimal field in a <p> tag.

<p>{block.fields.example_decimal.number}</p>

Content Link

The Content Link field type allows for selection of other content you have in your site. It stores the selected content objects as an array of content_links.

Content Model

Editors View

When the editor clicks the Add Link button a modal will open.

This will show them content within their site that they can select from. They can also search for content using the search box.

Field Settings

Content Types

Allows for restriction of what types of content can be selected. In the example only content of Author content type can be selected. The list of available content types to choose from appears in the list on the left. The selected content types appear in the list on the right. You can delete content types from the list on the right using the bin icon.

Expand linked data in API

To avoid circular referencing and reduce the amount of data being received unnecessarily the default for Content Links data is reference only. This means that the API will only return the id of the selected content as a ref. If you require access to the data within the selected content then turn the Reference only toggle to Expanded (green).

Limit

Allows for restriction of how many Content Links can be selected.

Code Examples

JSON

This is an example of the JSON object for a Content Link field when reference only.

//Reference Only

{
  id: 'f_01Hwd6df7g7sYAMPkW6Rs0jzvc',
  name: 'Example Content Link',
  type: 'content_links',
  handle: 'example_content_link',
  help_text: null,
  content_links: [ { sort: 0, content_link: 'ref:c_01Hwd6G1Hv3J34dBa5CnWAcT3N' } ]
}

This is an example of the JSON object for a Content Link field when expanded.

{
  id: 'f_01Hwd6df7g7sYAMPkW6Rs0jzvc',
  name: 'Example Content Link',
  type: 'content_links',
  handle: 'example_content_link',
  help_text: null,
  content_links: [ { sort: 0, content_link: [...] } ]
}

This is an example of a content_link object within the content_links array when the Content Link field is expanded.


{
  sort: 0,
  content_link: {
    id: 'c_01Hwd6G1Hv3J34dBa5CnWAcT3N',
    uri: 'blog/author/author-one',
    url: 'http://localhost:3000/blog/author/author-one',
    name: 'Author One',
    slug: 'author-one',
    fields: {
      bio: [...],
      name: [...],
      role: [...],
      photo: [...],
      twitter: [...],
      linked_in: [...]
    },
    published_at: '2024-04-26T12:36:00+00:00'
  }
}

TypeScript

This is an example of outputting an author chosen as a content_link in a Content Link field.

const author = block.fields.example_content_link.content_links[0].content_link
  return (
    <div>
      <h2>{author.fields.name.text}</h2>
      <h3>{author.fields.role.text}</h3>
      <p>{author.fields.bio.text}</p>
    </div>
  )

Block

The Blocks content type allows for the creation of an array of other block objects.

Content Model

Editors View

Field Settings

Block Types

Allows for the restriction of which blocks can be selected. The list of available blocks to choose from is shown in the list on the left and the selected blocks are shown in the list on the right. You can delete blocks from the list on the right using the bin icon.

Limit

Allows for restriction of the number of blocks that can be selected.

Code Examples

JSON

This is an example of the JSON for a Block field with nested Blocks.

{
  id: 'f_01hWDb0AkzNyYK4A6HdYwD0xzP',
  name: 'Example Blocks',
  type: 'blocks',
  blocks: [
    {
      name: 'Example Block One',
      sort: 0,
      fields: {...},
      content_type: {...}
    },
    {
      name: 'Example Block One',
      sort: 1,
      fields: {...},
      content_type: {...}
    },
    {
      name: 'Example Block One',
      sort: 2,
      fields: {...},
      content_type: {...}
    }
  ],
  handle: 'example_blocks',
  help_text: null
}

TypeScript

This is an example of using a map function to output the title of a nested block in a <p> tag.

{block.fields.example_blocks.blocks[0] &&
      block.fields.example_blocks.blocks.map(
         (block: BlockData, index: number) => (
            <p key={`example-block-${index}`}>{block.fields.title.text}</p>
         ),
 )}
Hollie Duncan

Written by Hollie Duncan

Updated

Previous
Blocks
Next
Components