Changing a default blog post design - Adding a thumbnail into the post

Site URL: https://www.martinfrank.blog

Hi guys, I am trying to make my blog post design nicer. I like the style that Vishen uses in his blog. Is it possible to do this design in Squarespace? I am adding the screenshot of his and mine into the files. I don't like the default design that much and this would be the great desing upgrade. Thank you

24 minutes ago, WillieWonka said:

Site URL: https://www.martinfrank.blog

Hi guys, I am trying to make my blog post design nicer. I like the style that Vishen uses in his blog. Is it possible to do this design in Squarespace? I am adding the screenshot of his and mine into the files. I don't like the default design that much and this would be the great desing upgrade. Thank you

If you looking for pure css solution,  this may help

[class*=collection-type-blog].view-item .header {
    background-color: stransparent !important;
}
[class*=collection-type-blog].view-item #page article section:first-child .section-background {
  background-repeat: no-repeat;
  height: 500px;
}
[class*=collection-type-blog].view-item #page article section:first-child .content-wrapper {
  padding-top: 500px;
}
[class*=collection-type-blog].view-item #page .blog-item-inner-wrapper {
    margin-top: -250px;
    background: #fff;
    padding-left: 5%;
    padding-right: 5%;
    width: 80%;
    padding-top: 5%;
}

For each blog post you need to find it id and modify this snippet accordingly

#item-607a8d0f37ac504ec356a9fb #page article section:first-child .section-background {
  background-image: url(https://images.squarespace-cdn.com/content/v1/6018e1736949ef32e02b3b6f/1618648161511-75VX9ICTN5LHPV4WAPEW/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/unsplash-image-GNUcUx-iObg.jpg);
}

On 5/4/2021 at 1:20 PM, bangank36 said:

If you looking for pure css solution,  this may help

[class*=collection-type-blog].view-item .header {
    background-color: stransparent !important;
}
[class*=collection-type-blog].view-item #page article section:first-child .section-background {
  background-repeat: no-repeat;
  height: 500px;
}
[class*=collection-type-blog].view-item #page article section:first-child .content-wrapper {
  padding-top: 500px;
}
[class*=collection-type-blog].view-item #page .blog-item-inner-wrapper {
    margin-top: -250px;
    background: #fff;
    padding-left: 5%;
    padding-right: 5%;
    width: 80%;
    padding-top: 5%;
}

For each blog post you need to find it id and modify this snippet accordingly

#item-607a8d0f37ac504ec356a9fb #page article section:first-child .section-background {
  background-image: url(https://images.squarespace-cdn.com/content/v1/6018e1736949ef32e02b3b6f/1618648161511-75VX9ICTN5LHPV4WAPEW/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/unsplash-image-GNUcUx-iObg.jpg);
}

 

Thank you so much. This is amazing. Will I need to do it on every blog post or there is a solution to apply it to all of the posts? Thank you

33 minutes ago, WillieWonka said:

Thank you so much. This is amazing. Will I need to do it on every blog post or there is a solution to apply it to all of the posts? Thank you

You can write a script to read the image in blog meta tag and append it as cover image