banner

Grid Summary Blog with Background Images in Squarespace

Grid Summary Blog with Background Images in Squarespace

The blog is often the most transparent portion of a company’s website. It gives users the opportunity to learn more about the business, its employees, and what goes on behind the scenes. Making a blog unique and striking can provide a great impression for users. In this tutorial, we will describe how to make gridded summary blocks for blog entries that show the image thumbnail on hover. A demo of how this could look on your site is below. It’s sure to give your blog a subtle unique touch!

Grid Blog Bg

Creating Summary Blocks

First, we need to create a grid summary block. If you do not know how to do this, follow the Squarespace guide at this link. Now, we need to adjust the settings so that the styles load properly. In the Edit Summary popup, first, click on the Content tab. There, choose a blog to feature in the blocks. Under the Layout Tab, make sure to choose Grid, have the Column Width at 270, set the Gutter Width to 25, the Text Alignment to Left, and Metadata Position to Above Title. Under Display, check all of the items under Primary Information To Display and set Primary Data to Date Posted. The photos below have the settings we have, but feel free to alter them once you know it is working!

Adding Style to Your Blocks

Now you have the standard Squarespace summary blocks. Let’s add some flair! We’ll be adding custom CSS. From the Home Menu, click on Design → Custom CSS and paste the following code into the box:


    .sqs-block-summary-v2 .summary-item {
    border: 1px solid #d0d5d8;
    border-top: 3px solid #BBBBBB;
    padding: 2em 2em;
    height: 18em;
    cursor: pointer;
    background-size: cover;
  }
  .sqs-block-summary-v2 .summary-thumbnail-container {
    display: none;
  }
  .sqs-block-summary-v2 .summary-item:hover {
    background-color: #BBBBBB;
  }
  .sqs-block-summary-v2 .summary-item:hover:before {
    content: ' ';
    width: 100%;
    height: 100%;
    background-color: #101010;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
  }
  .sqs-block-summary-v2 .summary-item:hover .summary-content,
  .sqs-block-summary-v2 .summary-item:hover .summary-metadata-item,
  .sqs-block-summary-v2 .summary-item:hover .summary-title a,
  .sqs-block-summary-v2 .summary-item:hover .summary-read-more-link:after {
    color: white;
    opacity: 1;
  }
  .sqs-block-summary-v2 .summary-item:hover .summary-read-more-link:after {
    border-bottom-color: white;
  }
  .sqs-block-summary-v2 .summary-content {
    text-align: left;
    height: 100%;
    position: relative;
  }
  .sqs-block-summary-v2 .summary-metadata-item {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .sqs-block-summary-v2 .summary-title {
    font-size: 24px;
    font-weight: 100;
  }
  .sqs-block-summary-v2 .summary-read-more-link:after {
    content: 'Read More';
    font-weight: 400;
    color: #8a959e;
    font-size: 15px;
    border-bottom: solid 1px #8a959e;
    letter-spacing: 1px;
    padding-bottom: 2px;
  }
  .sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
    position: absolute;
    bottom: 0;
  }

Once you save this, you should have some pretty good looking boxes that when you hover change color. However, there are two features we wanted to add for some extra spice. First, we wanted users to be to click anywhere on the box and still go to the link. The second feature was to have the thumbnail image appear as the background.

Adding Images and Full Block Clicks

To add images and full block clicks, we need to use some custom Javascript. First, head to the home menu and click Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:


<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Now that we have jQuery in there, head to the settings popup of the page that you have the summary blocks on. Then, copy and paste the following code into Page Header Code Injection under the Advanced tab.


    <script type="text/javascript">
      $.fn.preload = function() {
        this.each(function(){
          $("<img/>")[0].src = this;
        });
      };
      $(document).ready(function() {
        var imageArray = $('.sqs-block-summary-v2 .summary-item').map(function() {
          return $(this).find('.summary-thumbnail-container img').data('src');
        });
        $(imageArray).preload();
        $('.sqs-block-summary-v2 .summary-item').hover(function() {
          var image = $(this).find('.summary-thumbnail-container img').data('src');
          $(this).css({
            'background-image': 'url(' + image + ')' 
          });
        }, function() {
          $(this).css({
            'background-image': 'none' 
          });
        });
        $('.sqs-block-summary-v2 .summary-item').click(function() {
          window.location.replace($(this).find('.summary-read-more-link').attr('href'));
        });
      });
  </script>

For images, the code loads them onto the page before the page loads. This prevents your browser from having to download the image file right when you hover, preventing a delay.

And there you have it! Awesome and elegant summary blocks. As usual, feel free to comment below.

Shadmon M.

Need a hand in website design? It's cool; we're here to help. Just by providing enough information we require, you can sit back and relax. We'll handle the rest. Contact Us

Leave a Reply

Comment
Full Name
Work email
Website
Company Name