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!

Hi, these seems to work - thanks! .

Although the title still seems to be coming up on the full-screen preview (first image) but not desktop or mobile view (second image). Which preview is correct? Many thanks, Alexander

On 6/7/2023 at 9:50 PM, Alexander12345678 said:

Hi, these seems to work - thanks! .

Although the title still seems to be coming up on the full-screen preview (first image) but not desktop or mobile view (second image). Which preview is correct? Many thanks, Alexander

 

What is site url? We can check easier

On 12/17/2021 at 11:29 PM, anthonyrichardson said:

 

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

Hi there if you are still on this forum, this looks really helpful, one question does this create more than 1 H1 tag and if it does is there a way to comment out the original H1 or does it not matter because it will be blank?

On 8/10/2023 at 7:54 PM, Iknowkungfu said:

Hi there if you are still on this forum, this looks really helpful, one question does this create more than 1 H1 tag and if it does is there a way to comment out the original H1 or does it not matter because it will be blank?

Not effect. You can see this video from Google

On 9/22/2021 at 5:37 PM, 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.

Hey! Old thread I know, but has someone found a way to apply the code to one blog post only, and not site-wide? If you could just let me know where to place the code or what selector to use, I can do the rest myself. Thanks!

On 6/7/2024 at 11:32 PM, ThomasDes said:

Hey! Old thread I know, but has someone found a way to apply the code to one blog post only, and not site-wide? If you could just let me know where to place the code or what selector to use, I can do the rest myself. Thanks!

Yes. It is possible. Which code you want to use + Can you share link to a blog post? I will adjust code for your case.