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

How to move Blog Post Title below first image or gallery block?


Insider

Question

Hi all,

Is there a way through code injection or css to move blog post titles to a different position in the blog post?

For design purposes I would prefer if the blog post title is positioned immediately below my gallery/image/video block which is usually the first block and content in my blog posts.

As an example, please see this blog post https://projectsinsider.com/project/test

Pass: lifeisgood

Current blog post title position below.

image.thumb.png.c017dd52ba6a63f1aa85ac05a6280b54.png

 

Where I really want the blog post title to be positioned below.

image.thumb.png.1d1c967496eace534b6df641c2dc5e4f.png

 

Thanks in advance

Edited by Insider
new information
Link to comment

15 answers to this question

Recommended Posts

  • 1
On 9/7/2021 at 7:56 AM, Insider said:

Hi @tuanphan, tried it but still doesn't work. I have to add two button blocks above the image to have the title appear above the inserted buttons to edit title.

 

No sorry I don't use Notepad.

 

Thanks for the help!

First, remove above code

Next, access this link & download code & save with name: move-blog-title.js

Next, upload move-blog-title.js file to your site

Then, add this to Code Injection Footer

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/move-blog-title.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

 

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

Add to Last Line in Settings > Advanced > Code Injection > Footer

<script>
$(document).ready(function() { 
		$('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.image-block:first-child');
	});
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

 

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

You can shorten the code

<script>
$(document).ready(function() { 
        $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.image-block:first-child');
  $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.gallery-block:first-child');
  $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.video-block:first-child');
    });
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

 

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
Posted (edited)
On 8/27/2021 at 1:49 PM, tuanphan said:

Add to Last Line in Settings > Advanced > Code Injection > Footer

<script>
$(document).ready(function() { 
		$('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.image-block:first-child');
	});
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

 

Thanks for getting back to me @tuanphan.

 

The solution works great for image blocks!

Edited by Insider
Link to comment
  • 0
On 8/27/2021 at 12:07 PM, Insider said:

Thanks for getting back to me @tuanphan.

 

The solution does not seem to work.

Can you add & keep the code in Code Injection? We can check it again easier

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
18 hours ago, Insider said:

Hi @tuanphan,

 

I just checked and the code has been there. 

It is right at the bottom of the Footer Code Injection section.

 

Thanks!

the url doesn't work

https://projectsinsider.squarespace.com/projects/test

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
Posted (edited)
3 hours ago, tuanphan said:

All sorted. The code is so intuitive. I just duplicated your code so that it works for gallery and video blocks which is why I initially said it didn't work. Realised that the code was specific to Image Blocks.

Coding is so fun when we can get it right!

Anyway massive shout out to you @tuanphan. My site is starting to take shape now.

<!--Tuan Phan Blog Post Title Relocation Footer Injection-->
<script>
$(document).ready(function() { 
        $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.image-block:first-child');
    });
  
$(document).ready(function() { 
        $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.gallery-block:first-child');
    });
  
$(document).ready(function() { 
        $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.video-block:first-child');
    });
  
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>
<!--Tuan Phan Blog Post Title Relocation Footer Injection-->

Edited by Insider
Link to comment
  • 0
3 hours ago, tuanphan said:

You can shorten the code

<script>
$(document).ready(function() { 
        $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.image-block:first-child');
  $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.gallery-block:first-child');
  $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.video-block:first-child');
    });
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

 

Amazing. Thank you @tuanphan. Marked best answer. All the best.

Link to comment
  • 0
On 9/1/2021 at 7:59 PM, tuanphan said:

You can shorten the code

<script>
$(document).ready(function() { 
        $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.image-block:first-child');
  $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.gallery-block:first-child');
  $('.blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.video-block:first-child');
    });
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

 

Hi @tuanphan.

Slight issue to this code. The code has caused the blog post title to not be able to be seen or edited when I double click to edit a blog post. The blog post title actually disappears completely when in edit mode whether or not there is an image/gallery/video block present.

I have also tried removing the code to edit blog post titles but the blog post title seems to have completely disappeared.

Is there a solution for this please?

I need to:

  1. always be able to edit blog post title.
  2. display the blog post title immediately under a image/gallery/video block

Thanks!

https://projectsinsider.com/project/test

lifeisgood

Edited by Insider
new information
Link to comment
  • 0
1 hour ago, Insider said:

Hi @tuanphan.

Slight issue to this code. The code has caused the blog post title to not be able to be seen or edited when I double click to edit a blog post. The blog post title actually disappears completely when in edit mode whether or not there is an image/gallery/video block present.

I have also tried removing the code to edit blog post titles but the blog post title seems to have completely disappeared.

Is there a solution for this please?

I need to:

  1. always be able to edit blog post title.
  2. display the blog post title immediately under a image/gallery/video block

Thanks!

https://projectsinsider.com/project/test

lifeisgood

@tuanphan

Have found a possible reason. There was another code that may have caused this issue.

 


.blog-item-wrapper article.entry {
    padding-top: 0px !important;
}
.blog-item-top-wrapper {
    display: none !important;
}
 

 

After changing "none" to "1px", blog post title is viewable and editable on new posts with no image at the top however blog post title still cannot be seen or edited in edit mode in blog posts where there is an image at the top.

Current code:

 

.blog-item-wrapper article.entry {
    padding-top: 0px !important;
}
.blog-item-top-wrapper {
    display: 1px !important;
}

 

 

Edited by Insider
Link to comment
  • 0
On 9/4/2021 at 2:38 PM, Insider said:

@tuanphan

Have found a possible reason. There was another code that may have caused this issue.

 


.blog-item-wrapper article.entry {
    padding-top: 0px !important;
}
.blog-item-top-wrapper {
    display: none !important;
}
 

 

After changing "none" to "1px", blog post title is viewable and editable on new posts with no image at the top however blog post title still cannot be seen or edited in edit mode in blog posts where there is an image at the top.

Current code:

 

.blog-item-wrapper article.entry {
    padding-top: 0px !important;
}
.blog-item-top-wrapper {
    display: 1px !important;
}

 

 

Try this new code

<script>
$(document).ready(function() { 
        $('body:not(.sqs-edit-mode) .blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.image-block:first-child');
  $('body:not(.sqs-edit-mode) .blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.gallery-block:first-child');
  $('body:not(.sqs-edit-mode) .blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.video-block:first-child');
    });
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

If it doesn't work, we will use another way.

--

not related, do you use Notepad or Notepadd ++?

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
16 hours ago, tuanphan said:

Try this new code

<script>
$(document).ready(function() { 
        $('body:not(.sqs-edit-mode) .blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.image-block:first-child');
  $('body:not(.sqs-edit-mode) .blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.gallery-block:first-child');
  $('body:not(.sqs-edit-mode) .blog-item-title').insertAfter('.blog-item-content.e-content .columns-12>.row>.span-12>.video-block:first-child');
    });
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

If it doesn't work, we will use another way.

--

not related, do you use Notepad or Notepadd ++?

Hi @tuanphan, tried it but still doesn't work. I have to add two button blocks above the image to have the title appear above the inserted buttons to edit title.

 

No sorry I don't use Notepad.

 

Thanks for the help!

Link to comment
  • 0
22 hours ago, tuanphan said:

First, remove above code

Next, access this link & download code & save with name: move-blog-title.js

Next, upload move-blog-title.js file to your site

Then, add this to Code Injection Footer

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/move-blog-title.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>
<style>
  .blog-item-title {
    text-align: center;
}
</style>

 

This works!! Amazing @tuanphan.

Thank you!

Initially I thought it did not work because I was looking at it in edit mode.

Going to the live page shows the blog post title going to the right place.

 

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