Video Blogging the Squarespace Bedford

No one can serve two masters we are told, but it's common in Squarespace to find one data element serving two purposes. Pastor Taylor Birkey of The Edge Church in Aurora was stymied recently by a thumbnail image that he simultaneously wanted and didn't want in connection with a video blog of sermons in the church.

The Desired Look

The church maintains a blog just for sermons. Videos are posted to Youtube, and then a blog post is created for each video. The top content item in each post is a Squarespace video block linked to the Youtube video. Figure 1 shows the design, which is in the Bedford template.

Figure 1. Individual blog post with the sermon above the fold

The video is front-and-center under the site menu. It's right there when you load the page. No scrolling needed. Viewers can click and watch. Easy.

Master #1: The Summary Block

Visitors to the site of course need a way to see the sermons on offer and make a choice of what to watch. Figure 2 shows the Messages page, and in particular the summary block on that page listing the six most recent sermons. 

Figure 2. Summary listing of the most recent sermons

So far, so good. The page in Figure 2 has a very nice look to it. But....those images are drawn from the Thumbnail Image data elements of the respective blog posts. Pastor Birkey had to create those images and upload them, else the listing in Figure 2 would be text-only and not look so nice. 

Master #2: The Page Header

Figure 3 shows the trouble. Uploading a thumbnail image for each sermon gives the very nice look shown in Figure 2. Doing so also triggers the unwanted-in-this-case behavior in Figure 3 of displaying a large header image at the top of each post. 

Figure 3. Header image and post title blocking the way to the video

Viewers selecting a video from the summary block were finding themselves on pages having videos below the fold, looking at headline images that resembled their videos but that wouldn't play, and finally needing to scroll downward to find and play their chosen sermon. Not good.

Disabling the One

The solution lay in disabling one of the purposes. Pastor needed thumbnail images in place for the summary block, but we were able to inhibit their display on the individual blog post pages by writing the following CSS rules and placing them into the site's Custom CSS Editor:

#header {background-color: #1f1f1f;}

.banner-thumbnail-wrapper {display: none;}

The first rule sets the menu area's background color to a dark shade. The menu text and site logo are white, so it's necessary to have some other color for the background once the image is removed. We choose #1f1f1f for a deep grey, but you can chose any other color that works for your own site.

The second rule disables display of the thumbnail image at the top of the page. Bingo! The image is gone. The video moves upward above the fold. Now the result is as you saw earlier in Figure 1. 

We limit the effect of our rules to the sermon blog by referencing that blog's specific collection through the class named collection-54d283a9e4b08b02e24d1825. View the HTML page source for any of your own blog posts, find and look at the <body> tag, and you'll see a similar collection identifier that you can use to limit the scope of CSS rules to just those posts.

Caution: The CSS rules shown are specific to the Bedford template. You will need to research and write different rules if you are using some other template than Bedford. 

There's an edge-case to be aware of. Our rules affect the main page for the blog, as well as the individual posts. You may not want that behavior. Append the class name .view-item to the selector if you want to leave the main blog page alone and show an image in its header. Writing the selector as .collection-54d283a9e4b08b02e24d1825.view-item restricts the rules to just the individual posts. 

Are there Really Two?

I've riffed a bit on Jesus' words in Luke 16:13 about the impossibility of serving two masters. Is that really the case here? Do thumbnail images serve two purposes, or one?

From a certain point of view, an abstract one, maybe we can imagine a sole purpose: 

  • To provide decorative imagery relating to a blog post

This is awfully abstract, however. Perhaps it's helpful to think more concretely:

  • To provide decorative imagery for a blog post
  • To provide decorative imagery in a blog post summary

Now we can see that yes, there really are two masters: the post itself, and the summary of the post that you see in Figure 2. It's trouble when you try to serve two masters, and it's often trouble when a data element serves two purposes. 

My thanks to Pastor Taylor Birkey for posing such an interesting problem that has gotten me back to blogging about about Squarespace for the first time since December. 

Learn CSS for Squarespace 7

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart