Render a field from an entity reference in twig template? I have a node that has an entity reference field to a Media entity. That media entity has a field on it "caption". I want to render this caption directly in my twig template, so instead of doing this:

{{ content.field_media_item }}


Which would output the entire rendered media entity, I just want to output a field from that media entity. I've tried this:

{{ content.field_media_item[0]['#media'].field_caption.value }}


Which works, but since it's already rendered output, all the HTML from that value is escaped. So &lt;p&gt; tags appear as literal &lt;p&gt;. I could tack on a |raw at the end, which actually seems safe to me since I know the output has already been rendered and passed thru the field formatter, but seems wrong?

What's a better way of doing this? Using a pre-processor to access the field data from the reference media entity and passing it through a field formatter again or something? That actually seems inefficient since the caption field data was already rendered properly, and I'd be passing it thru the formatter again.
After some more thought and research, I think the best approach to this problem is to use a theme pre-processor function to manually prepare the entity reference field.

The main issue is that the referenced entity has a formatted text field that I need to output. That means it needs to run through the formatter before it's considered safe for output.

Manually accessing the value through the entity object in Twig is not a good solution because it will just print the raw value from the database, which twig will by default escape. Tacking on |raw makes it unsafe because it still hasn't run through the text processor.

Here's a preprocessor snippet that does what I need:

/**
 * Implements hook_preprocess_node().
 */
function MY_THEME_preprocess_node(array &amp;$variables) {
  $node = $variables['node'];
  if ($node-&gt;bundle() == 'news') {
    // Extract the caption from the cover image media entity and prepare it manually. We do this because in our template, we render the caption separately from the image.
    if (!$node-&gt;field_news_cover_image-&gt;isEmpty()) {
      $image_media_entity = $node-&gt;field_news_cover_image-&gt;entity;
      $caption_field = $image_media_entity-&gt;field_media_caption;
      // Caption is formatted text, so we must output a render array that will
      // process the text with the appropriate filter.
      $variables['cover_photo_caption'] = [
        '#type' =&gt; 'processed_text',
        '#text' =&gt; $caption_field-&gt;value,
        '#format' =&gt; $caption_field-&gt;format,
        '#langcode' =&gt; $caption_field-&gt;getLangcode(),
      ];
    }
  }
}


This allows me to simply print {{ cover_photo_caption }} in the twig template.