How Can Featured Images be placed at the top of the page on the actual blog?

I have the vester template in 7.1, but the site isn't live yet. I wanted to get this fixed first. Thank you!

20 minutes ago, noahawaii said:

I have the vester template in 7.1, but the site isn't live yet. I wanted to get this fixed first. Thank you!

Can you share your site with the protected password?

https://noahlang.squarespace.com/

I sent you a message. The homepage is a bit rough right now but please scroll down to the blog.

20 hours ago, noahawaii said:

https://noahlang.squarespace.com/

I sent you a message. The homepage is a bit rough right now but please scroll down to the blog.

Hi. What is password?

34 minutes ago, tuanphan said:

Hi. What is password?

noahlang

Did this get solved? I have exactly the same issue.

10 hours ago, ihanley said:

Did this get solved? I have exactly the same issue.

This is my code. Place this in the head of your blog page. Then add the CSS to design. Then add jquery to footer.

BLOG PAGE HEADER

<script>
    $(function() {
   $('meta[property="og:image"]').attr('content', $('meta[property="og:image"]').attr('content').replace( 'http', 'https'));                                        
    const image = $('meta[property="og:image"]').attr('content');
let banner = '<div class="blog-banner"><img class="blog-banner-image" src="'+image+'"></div></div>';
if (image.length > 0){
$(banner).insertAfter( "header#header");
}});
</script>

CSS

.blog-banner-image {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 400px !important;
  height: 600px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  margin-top: 125px !important;
  margin-bottom: 0px !important;
}

CUSTOM CODE FOOTER

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

13 hours ago, noahawaii said:

This is my code. Place this in the head of your blog page. Then add the CSS to design. Then add jquery to footer.

 

BLOG PAGE HEADER

<script>
    $(function() {
   $('meta[property="og:image"]').attr('content', $('meta[property="og:image"]').attr('content').replace( 'http', 'https'));                                        
    const image = $('meta[property="og:image"]').attr('content');
let banner = '<div class="blog-banner"><img class="blog-banner-image" src="'+image+'"></div></div>';
if (image.length > 0){
$(banner).insertAfter( "header#header");
}});
</script>

CSS

.blog-banner-image {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 400px !important;
  height: 600px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  margin-top: 125px !important;
  margin-bottom: 0px !important;
}

CUSTOM CODE FOOTER

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

Seems like the actual custom code footer was cut off?

7 hours ago, ihanley said:

Seems like the actual custom code footer was cut off?

no thatʻs right. Itʻs really just the jquery link so that you can use it within your website.

paste it in the custom code footer section. Also this works for me with the vester template. I have no idea if itʻs going to work with other templates.

8 hours ago, ihanley said:

Seems like the actual custom code footer was cut off?

Try this one in the header. I canʻt remember what I used for what anymore.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>