Add an image above blog post title and categories

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

Can you share link to page in screenshot? We can help easier.

https://dog-wrasse-bzts.squarespace.com/selected-projects/potts-point-foyer

The link is above. It is a blog post and i would like to set the title and categories up for each project with the image as the first thing that comes up.

Thank you.

article .entry-title {
    display: none;

I am using this code to hide the title for the moment but would ideally like to just move the title and categories below the image.

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;
}

thanks for this - except now its move the title to the very bottom - please find attached screen shot

Just put a space bar above the image and everything will move below it. 

Hi, thank you except the heading title and categories are still coming up at the bottom of the blog post and not under the first image.

Please find link to the blog post.

https://dog-wrasse-bzts.squarespace.com/selected-projects/potts-point-foyer

Ideally i would like the blog post title to be below the first image.

Thank you!!

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.

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.

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?

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!