How to move image below Blog title / heading on Native template?

Hi

I'm testing my blog posts and the image is showing before the blog title which I don't like. How can I move the title of the blog post to the top and above the image?

Thanks

Belinda

Please post the URL of your site. If you've not already done so, please set up a site-wide password. Post the password here and then we can take a look at your issue.

Hi

Thanks for your reply. The test blog post is here: https://www.autoimmunerecovery.com/autoimmunity

Thanks

Belinda

There is no built-in setting for the title to be above the image. See Native template. Scroll down to Blog Pages > On individual posts.

However with some CSS and Javascript  it could be done.

Let us know if that is something you want to pursue.

Hi,

Thanks for your reply. Yes I would like to consider this as I personally feel the title needs to be at the top, looks like it's missing when you land on the page.

What would be the cost for this work please?

Thanks

Belinda

First you will need the business plan or above.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>

For your blog page add the following to Blog Settings > Advanced > Page Header Code Injection.

<script>

  $( ( ) => {
  
    $( 'article' ).each ( function ( ) {
    
      let $this = $( this );
      
      let $title = $( '.entry-title', $this );
      
      let textAlign = $title.css ( 'text-align' );
      
      $this.prepend ( $title );
      
      $title.css ( 'text-align', textAlign );
      
      } );
      
    } );
    
  </script>

Let us know how it goes.

Hi,

Thanks so much for this. I do have the Business plan, I have done the 1st code but struggling with the second. I don't have Blog Settings, I do have Blogging but when I click that it only lists posts and comments and doesn't appear to have advance. There is no link here to advanced. Under Advanced there is nothing about blogging. Bit lost sorry. Can you help?

Thanks

Belinda

Go to Pages.

Hover over your Blog Page and click the gear icon.

Click on Advanced.

Click on Page Header Code Injection.

Let us know how it goes.

Thank you so much, perfect instructions and it's worked. Looks so much better with the heading before the image. Really appreciate your help. 🙏

Belinda

Hi there! @creedon is it possible to provide code for also moving the date above the lead image? Right now the order is: 

Title
Image
Date 

And I would like it to be:

Title
Date
Image

Thanks a lot!

@datclaiborne

Please post the URL for a page on your site where you want to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi @creedon,

I was wondering whether it's possible to do the opposite of this?

I'm in the process of moving my site from 7.0 to 7.1 and the new blog post templates all have the title at the top. I'm would like to have the image at the top, followed by the title and then the meta data. 

Is this possible in 7.1?

thanks,

Samantha

@Samantha_Rose

Can you give us a screenshot of what you are seeing? The templates I'm seeing appear to be in the arrangement you want.

@creedon

Sure! Please find attached a copy of what the individual blog post page looks like (SQSP7.1.png) and what I'm trying to match (my current blog : current blog.png).

The templates in your screen grab are for the blog layout for all the posts. Sorry I should have been more specific, I'm talking about the individual blog posts.

Thanks,

Samantha

@Samantha_Rose

Ah I see what you mean.

Please post the URLs for the blogs on both your sites.

If your v7. 1 site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedon

Sure, here you go; my current blog's URL is https://blog.ayane.uk/ and my work in progress squarespace one is https://contrabass-accordion-heha.squarespace.com/ password is Salvi.

Thank you, I really appreciate you taking a look at this!

Samantha

@Samantha_Rose

Do you have a link for a blog post on your new site? I want to see how it's structured. To see what might be done.

@creedon

Here you go; https://contrabass-accordion-heha.squarespace.com/blog/sleep-playlist 

This is just a test post at the moment 🙂

@Samantha_Rose

By default a v7.1 blog post doesn't have a setting to have an image above the post. What we may be able to do is use Javascript to take the first image within a post and move it above the title. This would require the business plan or above.

Would a solution like this work for your need?

@creedon

That would definitely work, I'm planning to publish the site with a business plan once I've finished creating it.

@Samantha_Rose

Please see Move Blog Post First Image to Top Area.

Let us know how it goes.

@creedon

Sorry for the delayed response - busy day yesterday which meant I didn't get a chance to work on this.

Thank you very much, I have just put the code you wrote into my site, it works perfectly! Next step for me - the css!

Thank you so much for your help on this, I really, really appreciate it.

@creedon

I see that datclaiborne never followed up with you about moving the date under the title and above the image (at least, not publicly). could you assist with me getting the date moved?

thanks in advance.

On 2/12/2021 at 5:01 AM, datclaiborne said:

Hi there! @creedon is it possible to provide code for also moving the date above the lead image? Right now the order is: 

Title
Image
Date 

And I would like it to be:

Title
Date
Image

Thanks a lot!

@samizdat

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@creedon

my site is still in the free trial phase, so it's not been unofficially published yet. hoping that's what you mean by my site not being public. if being in the trial and nonpaying means that you can't see the site, i'll go ahead and pay now, i guess.

password: 17Chris1990Sabo
site: https://triangle-asparagus-pfhw.squarespace.com/config/pages/61d34f83bf9b4634f527127d

i appreciate your assistance.