Jump to content

Display thumbnail image on the blog post page

Recommended Posts

Site URL: https://curiosityandcuriosities

I'd like to get the thumbnail image to show up on the post's page (above the title/category like it is on the main feed). Some of my posts will just be one image (the one I select for the thumbnail) so right now the post looks blank. I've tried a couple of things from other posts I've found on the forums, with no luck.

See the blog post page here. The password is ifyouknowyouknow

I have a business account so I can code inject 👍

 

Thanks so much!

Edited by nico_
Link to comment
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Additionally, I just noticed that the thumbnail on the main blog page is cropped. How do I get it to show the whole image?

 

I added this bit of code, but now it just crops the image bottom off because the thumbnail space is not big enough, I guess? 

.blog-item img.image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;}

Link to comment

Code is not needed, you do need to add an image block on the actual post, in addition to the thumbnail. They don't have to be the same image. The image block shows up in the blog list page, title underneath the image as long as the image is the first thing at the top of a blog post. . The thumbnail shows up in a summary block excerpt if you were to use them. You should be able to edit and adjust the thumbnail crop setting. 

Edited by derricksrandomviews
Link to comment

Thank you for your help. I added an image to the blog post, but it shows up underneath the category/title.  And so now the structure on the main page looks like (with_image_added_to_blogpost.jpg) :

Thumbnail
Category/Title
Image
Words

The structure of the individual blog post is the same, but without the thumbnail image. 

 


For the structure of my blog, on both the main blog page (which is my home page) and individual post, I want it to be (what_I_want_it_to_look_like.jpg) :

Image
Category/Title
Words

 

It will not let me add an image block above my Category/Title when I edit the blog post. This is why I used the thumbnail as the main image for the blog. But as you can see in (currently_thumbnail.jpg) the thumbnail is cropped in from the top and bottom. And because I'm using only the thumbnail image, it doesn't show on my individual post, so they look blank.


I've looked around and googled, but I'm not seeing where I can edit and adjust settings of the thumbnail crop. 

 

Again, thank you so much for your help, and sorry if I'm not quite understanding something.

currently_thumbnailiscropped.png

what_I_want_it_to_look_like.jpg

with_image_added_to blogpost.png

Link to comment

I suspect you already know this, but after playing with my 7.1 lab template, I conffirmed that when you display the author and or a cagegory, it puts that info  at the top of the blog post and that moves the title above the image as well. If you toggle the post author and category off then the title of the post goes below the image.This effects the blog post itself not how it appears on the blog listing page. There may be code to move the author and category but I have not found it yet. 

7.0 templates, most of them, if you put any kind of block above the image the title moves up there as well for both the post and the listing page, which is one of the reasons I use summary blocks, I have much more control. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.