Insider Posted August 25, 2021 Share Posted August 25, 2021 (edited) 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. Where I really want the blog post title to be positioned below. Thanks in advance Edited September 4, 2021 by Insider new information Link to comment
tuanphan Posted August 27, 2021 Share Posted August 27, 2021 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> Insider 1 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
Insider Posted August 27, 2021 Author Share Posted August 27, 2021 (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 August 31, 2021 by Insider Link to comment
tuanphan Posted August 30, 2021 Share Posted August 30, 2021 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Insider Posted August 30, 2021 Author Share Posted August 30, 2021 58 minutes ago, tuanphan said: Can you add & keep the code in Code Injection? We can check it again easier Hi @tuanphan, I just checked and the code has been there. It is right at the bottom of the Footer Code Injection section. Thanks! Link to comment
tuanphan Posted August 31, 2021 Share Posted August 31, 2021 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 Insider 1 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
Insider Posted August 31, 2021 Author Share Posted August 31, 2021 (edited) 51 minutes ago, tuanphan said: the url doesn't work https://projectsinsider.squarespace.com/projects/test Apologies, here it is @tuanphan. https://projectsinsider.com/project/test Edited August 31, 2021 by Insider new information Link to comment
Insider Posted August 31, 2021 Author Share Posted August 31, 2021 (edited) 3 hours ago, tuanphan said: the url doesn't work https://projectsinsider.squarespace.com/projects/test 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 August 31, 2021 by Insider Link to comment
tuanphan Posted September 1, 2021 Share Posted September 1, 2021 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> Insider 1 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
Insider Posted September 1, 2021 Author Share Posted September 1, 2021 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
Insider Posted September 4, 2021 Author Share Posted September 4, 2021 (edited) 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: always be able to edit blog post title. display the blog post title immediately under a image/gallery/video block Thanks! https://projectsinsider.com/project/test lifeisgood Edited September 4, 2021 by Insider new information Link to comment
Insider Posted September 4, 2021 Author Share Posted September 4, 2021 (edited) 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: always be able to edit blog post title. 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 September 4, 2021 by Insider Link to comment
tuanphan Posted September 6, 2021 Share Posted September 6, 2021 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
Insider Posted September 7, 2021 Author Share Posted September 7, 2021 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 tuanphan Posted September 8, 2021 Solution Share Posted September 8, 2021 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> Insider 1 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
Insider Posted September 9, 2021 Author Share Posted September 9, 2021 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
kkaralli Posted January 5, 2022 Share Posted January 5, 2022 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! Link to comment
kkaralli Posted January 5, 2022 Share Posted January 5, 2022 I am using the basil template...I am dying trying to figure this out! Link to comment
tuanphan Posted January 7, 2022 Share Posted January 7, 2022 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
Alexander12345678 Posted June 6, 2023 Share Posted June 6, 2023 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! Link to comment
tuanphan Posted June 9, 2023 Share Posted June 9, 2023 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! 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment