Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add an image above blog post title and categories


Bel_SquareSpace

Question

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

10 answers to this question

Recommended Posts

  • 0

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.

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
  • 0

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
  • 0
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
  • 0
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.

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

Create an account or sign in to comment

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

×
×
  • Create New...