Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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 #pag

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 ad

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

Posted Images

3 answers to this question

Recommended Posts

  • 0
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

Snímek obrazovky 2021-05-04 v 12.29.30.png

Snímek obrazovky 2021-05-04 v 12.29.01.png

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 idimage.thumb.png.2ff8ec031f54649927374bddb05c6f15.png 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);
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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 idimage.thumb.png.2ff8ec031f54649927374bddb05c6f15.png 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

Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...