How can you render fields from an entity reference in node templates? [Drupal 8]

Question

For context, I'm dealing with two content types: article and team_profile. In article nodes, we have an entity reference field pulling a team_profile node in to serve as the author information.

I would just render the entity with a new display mode, but our design has the photo set directly above the published date and name, next to one another:

In D7 I would dpm($content) and drill down to the node information, double click, and pull out the rest of the reference path. I'm using kint and am able to spit out the entity reference contents to a certain level, {{ kint(content.field_blog_author[0]['#node']) }}. The next level I want to access is values, but trying the following gives me NULL:

• content.field_blog_author[0]['#node’][‘values’]
• content.field_blog_author[0]['#node’]=>values
• content.field_blog_author[0]['#node’]->values

I'd ultimately like to render the title and field_team_image fields from the referenced node (seen here in the kint output). I haven't found information about this is the documentation or by searching. Would someone help me get unstuck?

Answer 1

#node there is actually the current node.

If you want to access fields and their values, start off with node, not content, which is a render array with the configured fields.

You can access the reference entity like this {{ node.field_blog_author.entity }}.

From there, you can continue again to the field of the referenced entity that you want to display. You could try calling the view method, with will view it with the default settings, you can also pass a view mode as a string to it or an array display settings (not sure about the exact syntax for that in twig).

Also, my standard reference, see http://wizzlern.nl/drupal/drupal-8-entity-cheat-sheet for a great overview of content entities, how they're structured and how to access values. Most of that also applies to twig.

And last, when trying to figure out what's in a content entity, use node.toArray(), that gives you an array representation that's very close to how you can access it as an object. While the internal structure is quite different.