1

I would like to display an image above the page header.
The image is stored in a field (its name is “image”) related to a node (its type is “article”).
I can display {{content.field_image}} using the node--article.html.twig template.
But as the

<h1 class="page-header">{{ title }}</h1> 

lives in the page-title.html.twig template I can no longer access the image.

Can someone help me finding the right way to write a preprocess function?
I already used

function [my_theme]_preprocess_page(&$variables) {
  $site_config = \Drupal::config('system.site');
  $variables['site_name'] = $site_config->get('name');
  $variables['site_slogan'] = $site_config->get('slogan');
}

But I can't find a way to do the same again with my image

  • You should look into making a "view mode" of your node with what you want, theme it with a twig file, then use Views to create a block and put it in the region you want. – Kevin Dec 14 '17 at 20:35
  • I created a view, in a block, asking for fields only. I asked a contextual filter “nid» and a relationship “image from field_image”. I set the block to display over the page title, nothing shows up. – Mars Dec 14 '17 at 22:28
  • No, you don’t want to use fields. Use Views to render the node, not fields. Create a View Mode and configure it on the node type display, and add a twig file to theme that code mode. Then place that block in the region you want. – Kevin Dec 15 '17 at 0:02
  • I created a “bando” view-mode, I set it to show only the image I want, in full size. I changed my View so it renders my node in the “bando” view-mode I created. The view still doesn't display. My guess is that it comes from the contextual filter and relation. – Mars Dec 15 '17 at 12:28
  • If the field is on the node you don’t need a relation, just the node id context from url. The views only job here is to take a given node id and render it, the rest is up to the view mode config and any theming you did for that view mode (to get the exact markup you want). – Kevin Dec 15 '17 at 12:49
1

The page title has its own preprocess hook. You may want to use hook_preprocess_HOOK() to add your image to the variables. As it is using the page-title.html.twig template, the theme registry HOOK is called 'page_title'.

Following is an excerpt from a theme's page title preprocess function of a D8 theme that is adding the URI of an image with an image style applied along with the page title. Maybe you find it useful as inspiration for your use case:

use Drupal\image\Entity\ImageStyle;

/**
 * Implements hook_preprocess_HOOK() for page title images.
 */
function mytheme_preprocess_page_title(array &$variables) {
  $image = '';

  // Load the image entity from current route.
  if (
    !empty($node = \Drupal::routeMatch()->getParameter('node')) &&
    $node->getType() == 'page' &&
    $node->hasField('field_image') &&
    $image_entity = $node->field_image->entity
  ) {
    $style = ImageStyle::load('title_image');
    $image = ($style->buildUri($image_entity->getFileUri());
  }

  $variables['image'] = $image;
}
0

In your

[my_theme].theme

you can try:

function [my_theme]_preprocess_page(&$variables) {
 $nid= 1;
 $node= Drupal\node\Entity\Node::load($nid);
 $variables['page']['image']=file_create_url($node->field_image->entity->getFileUri());
}

In your template

page.html.twig

you can try:

{{ page.image }}

EDIT

I did a test with the theme bartik.

I have a node of nid = 1 that has an image in field field_image

enter image description here

I edited the bartik.theme file

enter image description here

I edited the file page.html.twig

and add the code:

<img src="{{ page.image }}">

enter image description here

delete all caches

If you refresh the page, you can see that the image is shown

enter image description here

  • I tried it and I get a blank page. I tried both your suggestion and the actual nid (which is 6). I even get a blank page when the page template is back to no call of {{ page.image }} – Mars Dec 14 '17 at 20:56
  • You change the variable $nid for $nid=6? please check if your image field is called filed_image – JHONATAN DAVID FERNANDEZ ROSA Dec 14 '17 at 21:05
  • I wouldn't do it this way, its too fragile. – Kevin Dec 14 '17 at 21:13
  • Yes, I changed to $nid=6 (though I would like it to apply to any “article”). And yes the field is “field_image”. – Mars Dec 14 '17 at 21:13
  • @Mars I have updated my answer, please review. – JHONATAN DAVID FERNANDEZ ROSA Dec 15 '17 at 3:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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