How to change background image based on current node?

Question

I am trying to change the header background image of my website based on the current node. I have added an image field to my content type, field_hero_image, and, in preprocess function mytheme_preprocess_page(&$variables), I get the image url and try to inject it in the page, as inline css:

function mytheme_preprocess_page(&$variables) {

    $node = $variables['node'];
    if ($node) {
           $path = file_create_url($node->field_hero_image->entity->getFileUri());
            $variables['page']['#attached']['css'] = array(
                'data' => '.header-wrapper { background:url(' . $path . ') center center no-repeat !important; background-size: cover;}',
                'type' => 'inline',
            );
    }
}

or

function mytheme_preprocess_page(&$variables) {

    $node = $variables['node'];
    if ($node) {
           $path = file_create_url($node->field_hero_image->entity->getFileUri());
           $variables['#attached']['library'][] = array(
            'data' => '.header-wrapper { background:url(' . $path . ') center center no-repeat !important; background-size: cover;}',
            'type' => 'inline',
        );
    }
}

None of this works.

Is there a way to inject css from the preprocess function? I know that I can get the path value, put it in $variables and use it in twig. But this doesn't seem a clean solution to me.

Answer 1

You can make a different templete and use, for example, a class and load the different img by css is one of many possible soluctions, I think that is the best practice

You can read more about Drupal 8 Temple in these threads:

https://www.drupal.org/docs/8/theming

https://www.drupal.org/docs/8/theming/twig

Example aplications

function YOURTHEMENAME_preprocess_node(&$variables) {
  if ($variables['node']) {
    $node = $variables['node'];
    switch ( $node->nid ) {
    case 'nid1':  // Replace nid1 etc with your nid
    case 'nid2':
      break;
    }
  }
}

Template/node/node--full--[nid]

    <div class="img--hero--image">
    </div>

Other solutions it is use a field in the content type and use this field to render in your background.