Adding a Banner Image to a Blog in Squarespace 7.1

Feb 23

THIS PLUGIN HAS BEEN UPDATED. CHECK OUT THE UPDATE HERE.

Article

I love reading the Wall Street Journal. In our political climate with super biased media companies on both sides of the spectrum I enjoy reading a publication who focuses on business. Furthermore, I think they (along with the New York Times) have some really great web designers. (if you’re a real web design nerd like me, check out their first website)

Anyways, their featured articles have these great full screen banner images at the top and I wanted to try and replicate that. So that’s what I’m going to do in this tutorial. So here is generally what I wanted to do.

First I wanted this to be simple to implement, a one-and-done type thing, so I needed the code to pull the image from the thumbnail image that you add in the blog options. I was able to get this done, but it does require that you don’t add a different social share image (it technically pulls the social share image). Second, I needed to move the blog title section and position it on top of the banner image. This could all be done with just a few lines of javascript and css. Finally, once you add this to your blog page header it will be done to all of your blogs, and if you don’t add a thumbnail image, nothing will change. Pretty neat huh?

If you add this to your website, send me a link. I love looking at how other people customize this code for themselves.

COMMENTS TURNED OFF
This is a plugin I built on a website that I built and it works well. I like to share what’s worked for me, in hopes that it will help you. But due to the unique nature of each website, and specific code that you may or may not have on that website, I can’t guarantee that this code will work without making some minor adjustments. I can’t answer every question, but if you’re trying to get this up on your website and experience any difficulty, please submit a question.
Submit A Question

Video

Add the javascript to the blog page header code injection area.
Add the CSS to your custom css area
Customize it how you like!

Code

Javascript

Add this javascript to the blog header section. Blog Settings » Advanced » Page Header Code Injection.

Make sure jQuery is installed for this plugin to work. Install jQuery.

  <!--Be sure jQuery is loaded on your site.--> 
<script>
    $(function() {
    $('meta[property="og:image"]').attr('content', $('meta[property="og:image"]').attr('content').replace( 'http', 'https')); 
    const image = $('meta[property="og:image"]').attr('content');
    const description = $('meta[property="og:description"]').attr('content');

    let banner = '<div class="blog-banner"><img class="blog-banner-image" src="'+image+'"><div class="blog-banner-content"><p class="blog-banner-description">'+description+'</p></div></div>';


    if (image.length > 0){
      $(banner).insertAfter( "header#header" );
      $('article section:first-of-type').css('padding-top','0px');
      $('.blog-item-top-wrapper').prependTo( ".blog-banner-content" );
      $('.blog-item-author-date-wrapper').prependTo( ".blog-item-inner-wrapper" );
    }    
  });
</script>

CSS

  .blog-banner{
  display:block;
  position:relative;
  height:100vh;
  width:100vw;
}
.blog-banner-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}
.blog-banner-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  text-align:center;
  padding:5%;
  z-index:1;
  background:linear-gradient(to bottom, transparent 0%, hsla(0,0,0,.6) 90%) !important;
  color:white;

  .blog-item-top-wrapper{
    display:block;
    position:relative;
  }
  
  h1{
    block-margin-end:0px !important;
    margin-bottom:0px;
    font-size:2.8rem;
    font-weight:900;
    color:white;
    @media(max-width:676px){
    	font-size:1.8rem;      
    }
  }
  
  p{
    color:white;
    margin-block-start:0px !important;
    font-weight:400;
  }
  
  .blog-item-meta-wrapper{
    width:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%,0px);
    font-weight:700;
    font-size:.85em;
    text-transform:uppercase;

  }
  
  .blog-banner-description{
    display:block;
    max-width:850px;
    text-align:center;
    @media (max-width:676px){
      font-size: .9em;
    }
  }

  .blog-item-category-wrapper:not(:first-of-type){
    margin-left:10px;
    &::before{
      content: "|";
      margin-right:10px;
    }
  }
}
.blog-item-inner-wrapper .blog-meta-item--author{
  margin-bottom:1em !important;
  font-style: italic !important;
}

Squarespace 7.1