How To Add Photo On Blog Page Squarespace

Well, this blog post has been in my drafts folder for.. ages! As a web designer who works with the Squarespace, I frequently receive coding questions about the platform. Of all the questions I get, the most common one has to do with the Hayden template in Squarespace and its about the blog post excerpts.

Hayden Template on Squarespace:

Hayden is the top-most recommended and popular templates for creative businesses on Squarespace. Hayden is a part of the Bedford template family and shares the same underlying structure and functionality.

Some of its best features include:

Huge unique banner layout + banner slideshows
Button in navigation bar
Index pages to help create fluid, seamless scrolling
And so much more

How to get thumbnails on blog post excerpts:

Despite all the amazing features it comes with, there is one downside to the Hayden template. By default the Hayden template doesn't support thumbnail images in blog post excerpts. So the blog page would look something like this:

If your blog is all about visuals, then this could be a disadvantage as the page would look rather plain and non-engaging. However, fret not my friend.If you'd like to include your blog post graphic thumbnail in the excerpt. Here's the step-by-step on how to do it:Step 1: Open your Squarespace dashboard and click on the Pages tab.Step 2: Navigate to the Blog page and click on the gear icon to open the settings.Step 3: In the settings panel, navigate to the Advanced tab. In the Page header code injection section, paste the following code:Step 4: Save and exit the page. That's it. Refresh your blog page and Tada! the excerpts now have thumbnail images like this!

How does the code work?

I could just give you the code and wrap up, but that's not going to help you in the long run. My intention here is to help you learn coding and the multiple benefits it can offer you as a website owner or a web designer! I want to make sure that you understand the core of why we are doing this and what exactly the code means, so I 'll attempt to share it here in the best way I can.So the code above is a set of CSS statements that tell Squarespace how to style the blog excerpts section.Whether you own a Squarespace website for your business or you use it for your client's websites, I hope these coding tutorials and hacks help you customize and create a website tailored to your needs. I will be sharing more Squarespace tutorials on my blog. If you 'd like to see a particular tutorial, please leave a comment below. And also make sure to sign up for more Squarespace tips and tutorials below!

What would you like to learn to do on Squarespace? Which template do you use?