2

I need to access a Node's image field within the page.twig.html template in order to display it in relation to certain page-level elements such as primary/secondary menus and the page title.

In node.html.twig, I'm able to access it like so:

{{ content.field_responsive_hero_image.0 }}

but in page.html.twig if I try

{{ node.field_responsive_hero_image.0 }}

I get the following error:

Exception: Object of type Drupal\image\Plugin\Field\FieldType\ImageItem cannot be printed

I'm familiar with the workaround of loading the image with

<img src="{{file_url(node.field_responsive_hero_image.entity.fileuri)}}" />

However, I then lose the title and alt attributes (bad for 508 compliance) as well as the automatic resizing of the image served based on screen size (bad for SEO rankings).

How do I access the Node's image at a page-level?

7
  • If you {{ dump(node.field_responsive_hero_image.entity | keys) }}, do you see the title and alt keys? If you can access the fileuri you should be able to access the alt and title values... e.g. <img src="{{file_url(node.field_responsive_hero_image.entity.fileuri)}}" alt="node.field_responsive_hero_image.entity.alt.value" title="node.field_responsive_hero_image.entity.title.value" />. Jan 17, 2019 at 17:27
  • Printing node values in page templates is bad bractice! Simply use a block instead.
    – leymannx
    Jan 18, 2019 at 12:44
  • @Prestosaurus that solves most of my problems. The only thing left is serving different images based on the device, but I may be able to work it out with "srcset". Jan 18, 2019 at 13:11
  • @leymannx I get that it's bad practice.....just trying to build a page to a design. I'm not sure how using a block would work though....it's still going to be within the same place on the page. Jan 18, 2019 at 13:15
  • 1
    You'd hide the image from node display and print it via a block instead. Place the block between the menu and page title, export config, done. UI kept intact, templates kept clean, everybody happy.
    – leymannx
    Jan 18, 2019 at 13:29

1 Answer 1

5

In a preprocess hook (preferred):

/**
 * Implements hook_preprocess_HOOK() for page.html.twig.
 */
function MYTHEME_preprocess_page(&$variables) {
  if (isset($variables['node'])) {
    $variables['image'] = $variables['node']->get('field_image')->first()->view('full');
  } 
}

Or in Twig:

{{ node.field_image.0|view('full') }}

To use |view install the module https://www.drupal.org/project/twig_tweak

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.