View Mode Twig Field

View Mode Twig Field provides a flexible way to inject custom Twig-rendered content directly into entity view modes via the Drupal Field UI.

Introduction

Have you ever needed a "pseudo-field" to display a combination of entity values, a custom link, or a wrapper without creating a physical field in the database? This module allows you to create and manage these "Twig Fields" directly within the Manage Display tab of any entity.
Each Twig field is managed via an inline settings accordion, allowing for quick edits to labels and Twig logic directly within the field list.

Requirements

• Drupal 10.3 or 11.x
• Field UI (Core module)

Installation

• Place the view_mode_twig_field module folder in your modules/custom directory.
• Navigate to Extend in your Drupal admin menu.
• Locate View Mode Twig Field, check the box, and click Install.

Alternatively, via Drush: drush en view_mode_twig_field

Configuration

To create and use Twig fields:

• Navigate to the Manage Display tab of any entity (e.g., Admin > Structure > Content types > Article > Manage display).
• Scroll to the bottom and click the "Add Twig Field" button.
• A new field (initially disabled) will appear in the list named "New Twig Field".
• Move the field from the Disabled section into a visible region (like "Content").

Open the Settings Accordion: Locate your Twig field in the list. You will see a "Twig Settings" details/accordion element directly in the field row.

Configure the field:

• Label: Change the name of the field as it appears in the UI.
• Twig Code: Enter your template logic. You have access to the entity object.
• Delete: Check this box if you wish to remove the field on the next save.

Click Save at the bottom of the display form to apply your changes.

Usage Examples

Concatenating Fields

<div class="custom-header">
  {{ entity.field_first_name.value }} {{ entity.field_last_name.value }}
</div>

Accessing Parent Entities

{# Display the label of a referenced taxonomy term #}
{{ entity.field_category.entity.label }}

Known Limitations

Shared Bundle Definitions

When a Twig Field is created, it is registered at the bundle level. This means the field will appear in the "Manage Display" list for all view modes of that bundle (e.g., both "Teaser" and "Default" view modes of a Page content type will show the field).

Independent Values

While the field definition is shared across view modes, the settings (Twig code and Label) remain independent per view mode. You can have different code for the Teaser than you do for the Full display.

Initial Save

Fields must be moved out of "Disabled" and the form saved once before the accordion settings fully initialize.