Remove Featured Images from Basic Grid Blog & Masonry Blog 7.1

Site URL: https://www.abbyhavermann.com/blog

Hello! My client has decided to not use Featured Images on her blog posts anymore. It's currently using the "Basic Grid Blog" layout, but we'll probably be changing it to the "Masonry Blog" for the switch.

I (wrongly) thought that Squarespace had an easy "show image/hide image" on the blog settings, but it doesn't! She has A LOT of posts, so manually removing the image would not be a good use of time.

I tried implementing some of the code I've seen in other posts (see code block), but it just hides the images on the first row leaving a huge gap and hides the images and text for all the other rows. 

/* remove blog thumbnail */
article.blog-basic-grid--container>div:first-child img {
    display: none !important;
}

If you have a solution for "Basic Grid Blog" and "Masonry Blog", that would be most appreciated!

With sunshine!

Your problem is the code has :first-child in it which is used to target just the first image in this case, try this code as a replacement:

.tweak-blog-basic-grid-image-aspect-ratio-11-square .blog-basic-grid .image-wrapper {
    display: none;
}

17 minutes ago, Ziggy said:

Your problem is the code has :first-child in it which is used to target just the first image in this case, try this code as a replacement:

.tweak-blog-basic-grid-image-aspect-ratio-11-square .blog-basic-grid .image-wrapper {
    display: none;
}

 

Hi @Ziggy thank you so much for the fast response - your code works for the first row - yay, but the rest of the rows are still completely hidden (image and text) - same on all pages as I click through.

Try this instead:

.blog-basic-grid .image-wrapper {
  display:none !important;
}

55 minutes ago, StoriesAroundTheSun said:

but the rest of the rows are still completely hidden (image and text) - same on all pages as I click through

I'm not sure exactly what you're referring to here.

1 hour ago, Ziggy said:

Try this instead:

.blog-basic-grid .image-wrapper {
  display:none !important;
}

 

I'm not sure exactly what you're referring to here.

Hi @Ziggy!! Thanks again - this solves the issue of the image just being invisible (yay!), but it's still hiding the rest of the rows of the blog - here's a loom video to show what's happening: https://www.loom.com/share/13f700e78b6d4b3e915600b4bd42f3e5?sid=52496f63-6a91-44e5-a45a-3d7b793deddd Also, when I changed the code for masonry mode (which is what we'll need to use for the new look to work), it has the same issue, but when I switch on "show excerpt" the entire blog disappears in edit mode and when I save and exit just the top row shows. I'm not sure if there is a code solution at this point or if I'm going to have to individually remove the featured image from each blog post! So appreciate your time.

That's very odd, it really looks like the issue is to do with the loading order because the number of visible rows initially when adding the code is determined by how far down the page you have already scrolled. We can try a different approach, where we hide rather than prevent from loading, this isn't as good as the page will load the image but not show it:

.tweak-blog-basic-grid-image-aspect-ratio-11-square .blog-basic-grid .image-wrapper {
    padding-bottom: 0%;
    visibility: hidden;
}

On 10/10/2024 at 9:55 AM, Ziggy said:

That's very odd, it really looks like the issue is to do with the loading order because the number of visible rows initially when adding the code is determined by how far down the page you have already scrolled. We can try a different approach, where we hide rather than prevent from loading, this isn't as good as the page will load the image but not show it:

.tweak-blog-basic-grid-image-aspect-ratio-11-square .blog-basic-grid .image-wrapper {
    padding-bottom: 0%;
    visibility: hidden;
}

 

@Ziggy That worked! YAY - thank you... if you have time, would you let me know if there's a way to make this code work for the masonry layout? I've tried a few tweaks of your code, but something isn't working. So appreciate you helping me with this ☀️ 

On 10/14/2024 at 8:54 AM, Ziggy said:

Try this:

.blog-masonry .image-wrapper {
    visibility: hidden;
    height: 0 !important;
}

 

Thank you so much @Ziggy! Client happy and I'm happy ☀️ 
Also, confirming to anyone reading this that your solution for the basic grid blog worked beautifully too:

.tweak-blog-basic-grid-image-aspect-ratio-11-square .blog-basic-grid .image-wrapper {
    padding-bottom: 0%;
    visibility: hidden;
}

Again, thanks for your time and hope you have a sunshiney weekend! ✨ 

2 minutes ago, StoriesAroundTheSun said:

Again, thanks for your time and hope you have a sunshiney weekend! ✨ 

Same to you!