Jump to content

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

Recommended Posts

  • Replies 9
  • 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?

Greeting, it's 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, Keyword Highlighter
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 comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.