Jump to content

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

Recommended Posts

  • Replies 9
  • Views 480
  • Created
  • Last Reply

Top Posters In This Topic

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!

Screen Shot 2022-03-12 at 6.22.36 PM.png

Can you share your site with the protected password?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
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>

Edited by noahawaii
Link to comment
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?

Link to comment
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.

Link to comment
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>

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.