Blog Thumbnail as Banner Image (Squarespace 7.1 and 7)

Do you want to have your blog thumbnails used as a banner image on the individual blog post page? Here’s how you can have it done automatically for each blog post.

The banner is full bleed by default but can be modified to be constraint-width as well.

https://www.pluginsforsquare.com/plugins/blog-thumbnail-as-banner

Hey There,

So I just purchased your plugin "Blog Thumbnail as Banner" and it does not seem to solve my problem.

I'm using Brine and was expecting that the header style settings would work the same as on all other pages. Or more specifically, Logo, Primary Nav & Secondary Nav would be in the bottom placements so that are on top of the banner. 

Here's the link. https://kimberlypoppe.com/blog/what-is-contemplative-photography-miksang-and-how-to-try-it-yourself

Can you help solve this issue?

Thank You

Hey Michael,

The plugin doesn't do that by default by you can get something similar by clicking the gear icon on your blog page, then adding this code to the Post Blog Item Code Injection.

<style>
  .Header--bottom{
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: transparent !important;
    z-index: 1000 !important;
    width: 100% !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-item{
    color: white !important;
  }

  .tweak-header-secondary-nav-button-style-outline .Header-nav--secondary .Header-nav-item{
    border: 2px solid white !important;
    color: white !important;
  }

  .tweak-header-secondary-nav-button-style-outline .Header-nav--secondary .Header-nav-item:hover{
    background-color: rgba(255,255,255,.93) !important;
    color: #303030 !important;
  }
</style>