Using custom content types and fields with Twig

This document will give a brief overview of Content types and how to create them. For a full description and tutorial, see creating a custom content type.

What is a content type?

Content consists of a group of related fields. It represents a singular item, like a: blog post, carousel item, testimonial, or product. 

Create a new content type

1. Administration -> Structure -> Content types
2. Select 'Add content type'
3. Give it a name and, optionally, a description.
4. The Title field is used for the title name. For a blog post you might call it "Title" but for a product you might call it "Product Name"

Other settings are optional. It may be useful, for example, to make sure new content is not promoted to the front page. Content like a carousel image or blog post are good examples.

Managing fields

All content types already come with some built in fields like: Title, Body, Authored by, Promoted to front page. Managing fields lets you add custom fields for your type:

1. Use 'Add field' to add fields.
2. Reuse an existing field or create a new one if it does exist.
3. You can set the machine name if you wish. This can be useful in twig templates and views ie twig templates will use the machine name to print the field values.

Perhaps you create a content type of CTA (Call To Action). You could add image, text and link fields.

Form display

• Sets which fields are shown and how they're displayed when a user is creating new content.
• You can change the order and whether labels are visible.
• The gear in the right hand column is used to customize the fields, like limiting how many characters are shown or what size an image should be in the form.

Manage display

• Used to control how the type is actually displayed.
• Full content is default, but additional view modes can be enabled under the Custom Display Settings dropdown.

Twig

To customize how content is displayed, including adding your own classes and additional HTML, use a twig template. Templates for Content types are stored in your custom template's directory under: templates/nodes/

Drupal searches for various combinations of files (see: Twig Template Naming Conventions) but the simplest form is node--machine-name.html.twig where 'machine-name' is your content type's machine name

Fields can be accessed in several ways:

• {{ content.field_machine_name }} where 'machine_name' is whatever is defined under Managing Fields. Displaying content this way will wrap all of Drupal's editing content as well.
• {{ node.field_machine_name.value }} to access the raw field value without Drupal's additions.
• {{ custom_name }} can be used if use a preprocessing hook has been used to (re)define custom field names (see Preprocessing) but should be avoided in most cases as it could cause conflicts elsewhere.

Preprocessing hooks

You can modify how to access fields in a template file using the node preprocessing hook. The examples below assume you have a theme called mytheme. 

• In your theme's root directory, you will need the mytheme.theme file.
• Implement hook_preprocess_node() to add custom node fields: mytheme_preprocess_node(). See the documentation for template_preprocess_node() for the list of values passed to the hook.

Example

function mytheme_preprocess_node(&$variable) {
  if ($variable['node']->getType() === 'my_content_type_machine_name') {
    $variable['my_title'] = $variable['node']->field_my_title->value;
  }
}

You may now use the more concise {{ my_title }} in your twig file to refer to {{ node->field_my_title->value }}.

However, while this might be possible, it is discouraged to create new variables in this manner. Using {{ node.field_my_title.value }} is fairly reasonable to type and avoids any potential issues and should be preferred.