How to Display Post Thumbnails as Banners Above Blog Posts in Brine Template family

Problem

The Rally blog template (Brine family) doesn't show post thumbnails as banners like it does on regular pages.

Solution

1. Download script here

2. Upload script 

3. Paste this into you blog header code injection

<script src="/s/blog-post-header.js" defer=""></script>

4. Paste this into your custom CSS

/*------------------------------------*\
    #Blog-post-header
\*------------------------------------*/

.BlogItem-title {
  margin-bottom: 0.67em;
  padding-top: 200px;
  padding-bottom: 200px;
  color: #fff;
}

@media (max-width: 640px) {
  .BlogItem-title {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 960px) {
  .BlogItem-title {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

@media (max-width: 1280px) {
  .BlogItem-title {
    padding-top: 180px;
    padding-bottom: 180px;
  }
}

.Intro .BlogItem-title {
  padding-top: 0;
  padding-bottom: 0;
}

.BlogItem-meta {
  color: #fff;
}


/*------------------------------------*\
    #Blog List
\*------------------------------------*/

.BlogList-item-title {
  margin-top: -5px;
  -webkit-box-ordinal-group: 9;
  -ms-flex-order: 8;
  order: 8;
}

Got a special tweak request?