Bedford Thumbnails in Squarespace

Squarespace's Bedford template is wonderful in its bold use of thumbnail images to headline individual blog posts. I love that aspect of the template. The images add character and a splash of fun to my otherwise text-heavy posts. 

Oddly enough, the Bedford template does not show thumbnail images when you view the main page for a blog. Figure 1 shows the default view of my Database and Tech blog. All you see is boring text. But not to worry! Those images are one line of CSS away.

(Click any image to embiggen it)

Figure 1. Default listing of blog posts in the Bedford template

The Bedford template does generate the HTML for display of thumbnail images. It's just that it's switched off. Because of that foresight on the template designer's part, you can switch on the display of thumbnails with the following single line of CSS added through the Custom CSS editor:

.excerpt-thumb {display: block !important;}

Figure 2 shows the underlying HTML structure. You can see for yourself by right-clicking in the area of a post title or an excerpt, and selecting Inspect Element from the fly-out menu. Navigate your page structure in the left pane. Find and expand the div named excerpt-thumb. Within that div will be an <a> tag that is a hyperlink, and inside that hyperlink is an <img> tag with a reference to the thumbnail image. 

Figure 2. The underlying HTML structure in the listing of blog post excerpts

The right-hand pane shows the excerpt-thumb div's display property set to none. Displaying the div as a block element causes the images to appear as you see in Figure 3. Simple and done!

Figure 3. Default location of thumbnail images once their display is enabled

You can add even more impact by making the images span the entire width of the content column like in the Marquee template. Do that by adding three more property declarations to give the following rule set:

.excerpt-thumb {
  display: block !important; 
  float: none !important;
  width: auto !important;
  margin-right: 0 !important;
}

Figures 4 through 6 step through the additional three declarations and their effects. Removing the float prevents the text from wrapping around the image (Figure 4). Setting the width to auto allows the image to take up the entire column width (Figure 5). Finally, and this one is easy to miss at first, there is a right margin that is specified in the template to prevent text from wrapping too close when the image is floated left, and that margin should be removed. Figure 6 shows the final result, with each blog post's thumbnail image stretching across the entire column. 

Figure 4. After float: none to remove the float

Figure 5. After width: auto to allow the image to expand

Figure 6. The final version after adding margin-right: 0 

Well-chosen thumbnail images provide instant impact and help to grab reader attention and focus it toward your posts. Bedford does a nice job in presenting those images at the top of each post, but you might as well have them in your summary listings too. Now you have not one, but two ways of doing that. Use the one-line rule to have images appear at the left of your excerpts, and the longer rule set to have them span across the entire column width.


Just getting started with CSS? See my post on CSS and Squarespace: Getting Started for help on navigating the HTML structure of your pages and finding the correct elements to target. Also check out my book below. It teaches CSS from the ground up with a specific focus on Squarespace. It's the fastest way to get up to speed on CSS and begin to have fun customizing the look and feel of your own Squarespace site.


Learn CSS for Squarespace 7
9.99

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