Display a Media Entity Image from other (referencing) node in a Twig template

Question

Seems that all found in the Internet does not work for my case. :/ In general, I need to display an Image and a Project, referenced by the node that has a reference field to my node.

I have:

• a node of CT Idea (here I want to display my content)

• a node of CT Example, which has:

  1) a ref field to Idea 2) a ref field to a Media, Image 3) a ref field to a CT Project

I want to display Examples on an Idea page, each Example displays: Description, Image, Project link

I've managed to display the Description, but can not display Image and Project.

Here is the code

in the *.theme file:

function showcase_lite_preprocess_node__idea(&$variables) {
  $current_node = $variables['node'];
  $current_node_id = $current_node->id();

  $query = \Drupal::entityQuery('node');
  $query->condition('type', 'example');
  $query->condition('status', 1);
  $query->condition('field_example_ideas', $current_node_id);
  $nids = $query->execute();
  $relatednodes = Node::loadMultiple($nids);

  if (!empty($relatednodes)) {
    foreach ($relatednodes as $related_node) {
      $related_node_image = $related_node->field_example_image->value;
      $related_node_description = $related_node->field_example_description->value;
      $related_node_project = $related_node->field_example_project->value;

      $variables['related_node_image'] = $related_node_image;
      $variables['related_node_description'] = $related_node_description;
      $variables['related_node_project'] = $related_node_project;
    }
  }
}

In the node--idea.html.twig file:

{% block content %}
    {{ content }}
    {{ related_node_description }}
    {{ related_node_image }}
    {{ related_node_project }}
{% endblock %}

This displays only the Idea content and the Example Description.

It seems to me that the problem is that the format of $related_node_image and $related_node_project does not correspond to what Twig is expecting. But I can not check what is inside the variable, because Kint gives an error of memory limit.

Drupal version: 8.5.3.

Answer 1

To get a renderable output for Twig use EntityViewBuilder::viewMultiple()

    $variables['related_nodes'] = \Drupal::entityTypeManager()
      ->getViewBuilder('node')
      ->viewMultiple($relatednodes, $view_mode, $current_node->language()->getId());

and configure the three fields in the view mode you've specified here.

Answer 2

Does this necessarily need to be done in Twig? As you can achieve this without any coding with just field formatters and view modes. It will even cover the publication status.

Apart from that, you don't need to fire a query to get the referenced node IDs. You already have the node IDs as target_id in the reference field's values.

$nids = [];
if (!$node->field_example_ideas->isEmpty()) {
  $references = $node->field_example_ideas->getValue();
  foreach ($references as $reference) {
    $nids[] = $reference['target_id'];
  }
}
// This will give you all node IDs.
ksm($nids);

---

Approach without any code:

You have content type A and content type B. Content type A has a node reference field, referencing content type B. Content type B has an image and now - for simplicity - let's say you want that content type A only displays the image and nothing else of content type B.

1. Go to Structure > Content types > B > Manage display tab > and add a new view mode (on the very bottom), or use an existing one, let's say Teaser. There you hide all fields except the image field.

2. Go to Structure > Content types > A > Manage display tab > and here for your reference field choose "Rendered entity", then click on the small gear icon and select a view mode. Now it should say "Rendered as Teaser".

3. Done :)

---

Avoid editing templates when it can be done from the UI

There are other alternatives as well, codeword "Pseudo Fields", that prevent using templates to override the UI and therefore make the UI useless in the end. Drop a comment, if the above isn't sufficient.