Jump to content

Add an image above blog post title and categories

Recommended Posts

Hi, Can anyone help with moving the blog post title and category meta data below an image? 

I would like an image to come up as the first thing when you view a blog post.

Please find attached a screen shot of how i would like it look - i have just done this in text at the moment and hidden the blog title 

Thank you

 

Screen Shot 2020-06-28 at 3.50.17 pm.png

Link to comment

remove above code, add this to Home > Design > Custom CSS

.blog-item-wrapper .blog-item-inner-wrapper {
    display: flex;
    flex-direction: column;
}
/* title */
.blog-item-top-wrapper {
    order: 2;
}
/* image */
.blog-item-content-wrapper {
    order: 1;
}

 

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 year later...

I know this is a year+ after the initial request but in case anyone else lands here like I did...

I've found the easiest (and best-performing) way to do this on a 7.1 site is to hide the blog post title and recreate the title in the body of the post using a Heading 1. This gives you lots of flexibility to put an image, video, or any other block (or blocks) above the post title. Even columns! It also enables you to have a different title on the index page / summary blocks versus on the post page itself, should you want to do that.

My experimentation with moving the title or image with JavaScript always had just enough "jump" to it on page load as to be undesirable. Using CSS and a little content duplication is rock-solid and hugely flexible.

Add this to Custom CSS to get the effect on ALL blog post pages site-wide, preserving the ability to edit the title in Edit mode. This does not account for the categories, as that wasn't in my requirements.

.blog-item-title {
  display: none;
  // show the "real" title when in Edit mode
  .is-expanded & {
    display: block;
  }
}

Hope that helps someone.

Edited by kirkroberts
Link to comment
On 9/17/2021 at 7:17 AM, kirkroberts said:

I know this is a year+ after the initial request but in case anyone else lands here like I did...

I've found the easiest (and best-performing) way to do this on a 7.1 site is to hide the blog post title and recreate the title in the body of the post using a Heading 1. This gives you lots of flexibility to put an image, video, or any other block (or blocks) above the post title. Even columns! It also enables you to have a different title on the index page / summary blocks versus on the post page itself, should you want to do that.

My experimentation with moving the title or image with JavaScript always had just enough "jump" to it on page load as to be undesirable. Using CSS and a little content duplication is rock-solid and hugely flexible.

Add this to Custom CSS to get the effect on ALL blog post pages site-wide, preserving the ability to edit the title in Edit mode. This does not account for the categories, as that wasn't in my requirements.

.blog-item-title {
  display: none;
  // show the "real" title when in Edit mode
  .is-expanded & {
    display: block;
  }
}

Hope that helps someone.

Hey @kirkroberts, how would I use this CSS for a single page? It worked site wide for me but I couldn't figure out how to get it to work on a single page.

Link to comment
On 9/23/2021 at 3:37 AM, Crobbz said:

Hey @kirkroberts, how would I use this CSS for a single page? It worked site wide for me but I couldn't figure out how to get it to work on a single page.

Can you share link to page where you want to apply the code?

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
  • 2 months later...
On 9/17/2021 at 9:17 PM, kirkroberts said:

I know this is a year+ after the initial request but in case anyone else lands here like I did...

I've found the easiest (and best-performing) way to do this on a 7.1 site is to hide the blog post title and recreate the title in the body of the post using a Heading 1. This gives you lots of flexibility to put an image, video, or any other block (or blocks) above the post title. Even columns! It also enables you to have a different title on the index page / summary blocks versus on the post page itself, should you want to do that.

My experimentation with moving the title or image with JavaScript always had just enough "jump" to it on page load as to be undesirable. Using CSS and a little content duplication is rock-solid and hugely flexible.

Add this to Custom CSS to get the effect on ALL blog post pages site-wide, preserving the ability to edit the title in Edit mode. This does not account for the categories, as that wasn't in my requirements.

.blog-item-title {
  display: none;
  // show the "real" title when in Edit mode
  .is-expanded & {
    display: block;
  }
}

Hope that helps someone.

 

This helped me, it solved a rather annoying problem I created for myself, so thank you!

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.