How To Make Hero Image Dynamic For Every Node Page in Drupal 8

What is Hero Image?
In web design, a hero image is a large web banner image, prominently placed on a web page, generally in the front or center. The hero image is often the first visual a visitor encounters on the site. A hero image often consists of image and text, and can be static or dynamic (e.g. a rotating list of images and/or topics).

The most important benefit of a hero image is, it immediately arrests a visitor’s attention.

Since people respond positively to visual content, having a high-resolution image on your website is a good way to entice visitors to explore your site further.

As a matter of specification every page, on your website, must have its own content specific hero image.

Let us now learn how to make Hero image dynamic for every node page in Drupal 8.
 

Case 1: We have multiple content type with related Hero image

We can override the page.html.twig for every content type and add an image for each specific pages using static path. 

For example, If we have 5 different content type in Drupal-

1. Basic 
2. Article
3. Services
4. Contact Us 
5. Blog

We can override node.html.twig with specific content type as:

Page--node--basic.html.twig
Page--node--article.html.twig
Page--node--services.html.twig
Page--node--contact-us.html.twig
Page--node--blog.html.twig

Now add Hero image with static image path in their template.

Case 2: We have multiple nodes of the same content type with different Hero image.

The steps shown above won't work, as it is not easy to override page.html.twig for each and every node.

So, in this case, we will add an image field in required content type and render this image field path on page.html.twig which will display image as Hero image dynamically while creating each node page.

Let's make Hero image dynamic for Blog Content type.

1. Create a content type Blog.
2. Go to manage field and add field type image with name Hero image (machine-name:hero_image)
3. Override page.html.twig template with

page--node--blog.html.twig

Print hero image node field in page--node--blog.html.twig at the top of page template (Hero image section)  or wherever required.                            

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

Override node.html.twig template file with node--blog.html.twig 
 

Hide this Hero image field from node-blog.html.twig. 

{{content|without('comment’, ‘links’, ‘hero_image’) }}

Cheers!! We are done here.

Upload image while creating the blog and, this will make your cover image dynamic and will be specific to your node.