How to get this to work with the blog post

We’re going to try to follow the instructions as laid out by the author of this blog right here on how to create a featured image template for a GitHub blog.

Create a template file in _includes directory to display the HTML img element named post-featured-image.html and include the following code:

<img class="feat-img" src="/assets/images/" alt="image representing a theme in this article" />

All images stay in the /assets/image directory with two variables include.image and include.alt corresponding to the Front Matter of the post.
Front matter variables:

featured-image: the image file name and extension
featured-image-alt: alternative text for the image

Sample code

In the Post File [2018-09-30-Sample-Post.md]

---
layout: post
title:  A Sample Post
date:   2018-09-30
author: Mike the Blogger
description: This is the one blog post to rule them all
featured-image: my-awesome-photo.jpg
featured-image-alt: Mike the Blogger speaking at Times Square, New York City, New York
categories: Side Hustle
---

The post.html; located in the _layouts directory

<!-- some page content -->
<header class="post-header">
   <h1 class="post-title">How to get this to work with the blog post</h1>
   <time datetime=""></time>
   
   <!-- call the featured-post-image.html template file -->
   
</header>
<!-- other page content -->

The index.html, located in project’s root directory

<!-- some HTML content -->

    <div>
        <h2>
          <a class="post-link" href="/blog/ethereum-tipping-feature">Create a MetaMask Tipping Button and Start Collecting Ether</a>
        </h2>
        <!-- call the featured-post-image.html template file -->
        <!-- The Original -->
<div class="container">
<figure class="figure-img img-fluid rounded mb-4">
<img src="/assets/image/snacks-in-vending-machine.png" class="figure-img img-fluid rounded" alt="The most popular vending machine snacks lining up inside a vending machine." />
<p class="alpha"></p>  
</figure></div>

<!-- Modified with S6 reference -->
<!--div class="container banner" alt="The most popular vending machine snacks lining up inside a vending machine." style="background-image: url(/assets/image/snacks-in-vending-machine.png);height:auto; width:100%;"></div>
<figcaption class="figure-caption"></figcaption-->




        <span class="post-meta">Feb 25, 2021</span>
        
    </div>   

    <div>
        <h2>
          <a class="post-link" href="/blog/cats-in-Covid-19-genome">How Many Cats Are in this Covid-19 Genome Sequence?</a>
        </h2>
        <!-- call the featured-post-image.html template file -->
        <!-- The Original -->
<div class="container">
<figure class="figure-img img-fluid rounded mb-4">
<img src="/assets/image/cats-in-covid-19-genome.png" class="figure-img img-fluid rounded" alt="Mama, papa cat looking at image of a cat as if asking, "Son, is that you?"" />
<p class="alpha"></p>  
</figure></div>

<!-- Modified with S6 reference -->
<!--div class="container banner" alt="Mama, papa cat looking at image of a cat as if asking, "Son, is that you?"" style="background-image: url(/assets/image/cats-in-covid-19-genome.png);height:auto; width:100%;"></div>
<figcaption class="figure-caption"></figcaption-->




        <span class="post-meta">Apr 4, 2020</span>
        
    </div>   

    <div>
        <h2>
          <a class="post-link" href="/blog/hackerx-speed-dating-for-work">Hacker X Jakarta: My Speed Dating (for Work) Experience</a>
        </h2>
        <!-- call the featured-post-image.html template file -->
        <!-- The Original -->
<div class="container">
<figure class="figure-img img-fluid rounded mb-4">
<img src="/assets/image/camera-monitoring.png" class="figure-img img-fluid rounded" alt="Speed dating for work" />
<p class="alpha"></p>  
</figure></div>

<!-- Modified with S6 reference -->
<!--div class="container banner" alt="Speed dating for work" style="background-image: url(/assets/image/camera-monitoring.png);height:auto; width:100%;"></div>
<figcaption class="figure-caption"></figcaption-->




        <span class="post-meta">Jun 25, 2019</span>
        
    </div>   

<!-- some other HTML content -->

NOTE: Currently the featured images are used for Facebook social media posts, to accompany the articles. Also, major blunder: I have not been able to make head.html include file to work with the default layout, so I just copy and paste everything into the default layout file and work from there.