Jump to content

Pull Page Thumbnail (Blog) to Code Block

Recommended Posts


I'm working on a template that doesn't display thumbnails as banners on blogs (Five). I'd rather not swap, so I'm looking for code that I can implement to pull the current page's thumbnail image to a code block. 

Alternatively, pulling the date/author meta to a code block would also work to solve this formatting issue. 

Any leads?


Link to comment
  • Replies 1
  • Views 448
  • Created
  • Last Reply

Hi Devon.

You could instead replace the header image on blog items with the post's thumbnail, if that's the effect you'd prefer. The other alternatives you mentioned are also possible.

Thumbnail and meta info is available via each page's JSON data, which can be accessed via JavaScript, added to the page as desired, and styled with just CSS. Such meta may also be available in attributes within the DOM as well.

When dealing with thumbnail images, you could either set them via JS using the "background-image" CSS property or by using an <img> element loaded with ImageLoader. I'd probably go with the former for simplicity (though it may load a larger image, the difference is probably negligible). I'd estimate an experienced dev could do any of those for you in less than a couple hours.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.