Jump to content

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

Recommended Posts

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Link to comment
  • 4 months later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 5 months later...

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

Edited by Samantha_Rose
Link to comment

@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

current blog.PNG

SQSP7.1.PNG

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 months later...

@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!

 

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

 

Edited by samizdat
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.