I have an image field on my content type (field_hero_image).

I don't want it to render in the node.html.twig file. However, I DO want to render it in the page.html.twig file. Specifically, I want to render it alongside the page title.

What code would I use in my page.html.twig file to access node level fields and render them?

(There is a similar question posted, but I was unable to use the answer provided there to solve my problem.)

This for Drupal 8 theming.

  • 2
    @kiamlaluno -- why did you edit my question?? Having "Drupal 8" in the title AND in the question makes it obvious to potential asnwer providers AND makes it much easier to find in Google, given the prevalence of Drupal 6 and 7 content out there; making Drupal 8 questions/answers very clear is helpful to the communtiy at large looking for D8 specific answers. Was wondering what your reasoning for changing it was. Commented Jan 27, 2016 at 14:48
  • Please don't duplicate tags in question titles; tags are visible in every place a question is visible, so there is no need to use tags also in the question title.
    – apaderno
    Commented Jan 27, 2016 at 15:31
  • 2
    Obviosuly, I'm new here... but do the meta tags (in this case, "8") help with search engine results? I feel like the content titles containing Drupal 8 or Drupal 7 could potentially help people searching for answers through Google... just an idea though. Commented Jan 27, 2016 at 15:44

2 Answers 2


After doing quite a bit more research, I was able to find enough pieces in other questions and on drupal.org to achieve what I wanted to do.

No pre-processing is needed for this answer, so no code needs to be added to your mytheme.theme file.
All of these variables are already accessible in page.html.twig by default.

To render a field's default value inside page.html.twig, you would typically use a Twig variable as in {{ node.field_some_name.value }}.

If you have an image field, and want to render the URL to the image stored in that field inside the page.html.twig template, you would use {{ file_url(node.field_some_image.entity.fileuri) }}.

Finally, if you want to render the title of a node inside the page.html.twig template, you would use {{ node.label }}.

I also learned how to use some Twig conditionals for my particular issue, but that is beyond the scope of this question/answer.

  • I was skeptical, having the impression that in D7 this kind of thing should always be in e.g. a preprocess function. However, the example of file_url() in the docs (drupal.org/docs/8/theming/twig/functions-in-twig-templates) does exactly this, so, upvoted.
    – Graham C
    Commented Nov 17, 2016 at 11:13
  • How do you loop through a specific content type and output its fields values inside page.html.twig ? Commented Apr 27, 2019 at 13:48
  • I don't believe file_url() will render the image's style derivative. That will be the source image, which could be much larger than is appropriate to display on a webpage. Commented Nov 13, 2021 at 15:23

There are three handy methods for working with this, all of which save you time digging in complicated render arrays.

  1. Using Display Suite (with submodule ds_extras) you can assign to the hero region a block ("block region") which is a different display mode (i.e. just one containing the hero image). Thus you get two different display modes showing at once. Note that some preprocess hooks may not fire as you might expect if you do this.

  2. The twig_tweak module greatly simplifies such tasks and can give easier twig statements for field values. Take a look at the cheat sheet for some common uses: {{ drupal_field('field_image', 'node', 1) }} The function signature is: drupalField($field_name, $entity_type, $id = NULL, $view_mode = 'default', $langcode = NULL)

  3. The twig_field_value module makes simpler twig statements. Per README.txt: <img src={{ file_url(content.field_image|field_target_entity.uri.value) }} alt={{ content.field_image|field_raw('alt') }} />

If I had known this earlier, it would have saved me a great deal of time!

  • 1
    This is the correct answer. In my experience, {{ node.field_some_name.value }} doesn't render the field. It doesn't invoke the full theme system (preprocess function, template, etc). OTOH, if you use the twig_tweak module, you can get the fully rendered field with {{ node.field_some_name|view }}
    – kentr
    Commented Dec 19, 2018 at 5:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.