Featured Image/Thumbnail Code Injection

Site URL: https://dearmarionforeveryours.squarespace.com/home/vantage-point

I'm trying to figure out how to have the blog post's featured image or featured thumbnail show as an image at the top of the individual blog post. Is that possible? I see it as an option on some templates but not on the Rally template. Any help is appreciated. Thanks

If you use a Business Plan or higher, you can add an Image Block on top of post content. Then let me know. We will give the code to move it to top of post title.

@tuanphan - yes the site is through a business plan. What are the next steps? Thanks

11 hours ago, nickmohler said:

@tuanphan - yes the site is through a business plan. What are the next steps? Thanks

Add this snippet into Advanced-Code injection- Footer

<style>
.BlogItem-image { height: 0; padding-bottom: 56%; position: relative; overflow: hidden; } .BlogItem-image img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }</style>
<script>
var blogBody = document.querySelector('.Main--blog-item [data-layout-label="Post Body"]')
if (blogBody) {
    var featuredImage = document.querySelector('meta[property="og:image"]').getAttribute("content");
    var tpl = `<div class="BlogItem-image"><img src="${featuredImage}"/></div>`;
    blogBody.insertAdjacentHTML('afterbegin', tpl);
}
</script>

This doesn't seem to work with the vester template. I don't have a live site right now to show because it's being developed. Is there something that needs to be changed in it?

On 3/11/2022 at 3:54 AM, noahawaii said:

This doesn't seem to work with the vester template. I don't have a live site right now to show because it's being developed. Is there something that needs to be changed in it?

You can setup site access password then share url.

On 6/27/2021 at 1:14 AM, bangank36 said:

Add this snippet into Advanced-Code injection- Footer

<style>
.BlogItem-image { height: 0; padding-bottom: 56%; position: relative; overflow: hidden; } .BlogItem-image img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }</style>
<script>
var blogBody = document.querySelector('.Main--blog-item [data-layout-label="Post Body"]')
if (blogBody) {
    var featuredImage = document.querySelector('meta[property="og:image"]').getAttribute("content");
    var tpl = `<div class="BlogItem-image"><img src="${featuredImage}"/></div>`;
    blogBody.insertAdjacentHTML('afterbegin', tpl);
}
</script>

Is this page a blog post? I'm trying to figure out where squarespace pulls each blog's featured image from outside of the specific url for an image. I wasn't able to get it when the source was ${featuredImage} as you have above. Is it different for each website or how did you come up with that source?

On 3/10/2022 at 12:54 PM, noahawaii said:

This doesn't seem to work with the vester template.

The original code was designed for v7.0 Brine template family.

Most likely it would need to be updated to work with v7.1, if it can be done.

21 minutes ago, noahawaii said:

Is this page a blog post?

Yes that page appears to be a blog post.

25 minutes ago, creedon said:

The original code was designed for v7.0 Brine template family.

Most likely it would need to be updated to work with v7.1, if it can be done.

I see so that one was 7.0. Do you know where squarespace pulls the source image from in 7.1?