Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
  • Solution
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
  • 3 months later...
On 1/6/2022 at 12:19 AM, kkaralli said:

Hi @tuanphan. I am having trouble understanding how to get the title under the image. I tried adding the code to the code injection footer but nothing is happening? Please help!

I think above code for Squarespace 7.1 template. You mean this template? https://basil-demo.squarespace.com/news-basil/2017/3/1/new-desserts

I think the only way is you need to add Image Block on top of blog post, then we will use code to move title under this block. What do you think?

If you feel okay, you can add it for a blog post, then share link to that post, we can tweak code easier

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 6/6/2023 at 8:38 PM, Alexander12345678 said:

Hi @tuanphan, I've got a similar problem on v7.1 but can't see anything happening with this injection code. Just want to get all images and sliding image blocks above the blog post title for pages under "projects".

Don't know if there is something I'm missing here, will message you password also.

Thanks for this!

image.thumb.png.de484cb7ae1e09232c0d8224bc4ca0da.png

What is blog post url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.