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

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


Belle71

Question

21 answers to this question

Recommended Posts

  • 0

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

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

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

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

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

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

@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

Create an account or sign in to comment

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

√ó
√ó
  • Create New...