I want to move the blog title below the first image

Hello.

Is it possible to move the blog page title below the first image? Every page will have an image at the top so I need it to be site wide. Here's hoping someone can help. 

https://creative-people-2022.squarespace.com/projects/land-and-sea-website
pa33word

Many thanks
Claire

16 hours ago, paul2009 said:

Hi Claire

The easiest way to achieve this (and the least likely to go wrong) is to use a line of Custom CSS to hide the Blog Item Title (or the Blog Item Top Wrapper - includes the title and the metadata) and then you can add the title manually in the Text Block below the image. 

For example, to hide the title you could add:

.blog-item-wrapper .blog-item-title {
  display: none!important;
}

Alternatively, assuming the site is not on a Personal Plan, some JavaScript could be written to move the Blog Item Title (or the Blog Item Top Wrapper) below the first Blog Image Block (assuming one is found). 

For reference, this is the Blog Item Title:

and this is the Blog Item Top Wrapper:

Amazing, thanks so much Paul. I have done that in the past (for a 7.0 site) and did consider it for this project but I wondered if there had been any updates. I suppose I'll just need to remove the code when I create a new blog, otherwise you can't access the title?  I'll see how it works and consider JavaScript if it gets frustrating.

Hope you are well!

Claire.

On 11/21/2022 at 8:54 AM, Claire_auck said:

 

Amazing, thanks so much Paul. I have done that in the past (for a 7.0 site) and did consider it for this project but I wondered if there had been any updates. I suppose I'll just need to remove the code when I create a new blog, otherwise you can't access the title?  I'll see how it works and consider JavaScript if it gets frustrating.

Hope you are well!

Claire.

 

 

I think you can add some class like this to disable code in edit mode, then you can edit it.

body:not(.sqs-edit-mode) .blog-item-wrapper .blog-item-title {
  display: none!important;
}

16 hours ago, tuanphan said:

I think you can add some class like this to disable code in edit mode, then you can edit it.

body:not(.sqs-edit-mode) .blog-item-wrapper .blog-item-title {
  display: none!important;
}

 

Tuan, so clever! As always, thank you very much. That's super helpful.

On 11/23/2022 at 1:52 AM, tuanphan said:

I think you can add some class like this to disable code in edit mode, then you can edit it.

body:not(.sqs-edit-mode) .blog-item-wrapper .blog-item-title {
  display: none!important;
}

 

@tuanphan thank you for this code! It has really helped me!

Is it possible that you could look and see if writing javascript would work? I'm wanting to put the blog title below the video on my page. Here's the page I'm referring to www.igotofaith.com/sermons 

I want the blog title below the video along with the metadata under the blog title. Right now I just have the blog title hidden and I'm manually adding in the blog title and meta information. I'd like to not have to manually add this information in each week. 

Thank you so much!

Austin Burleson

On 12/21/2022 at 1:32 AM, austinalltheway21 said:

@tuanphan thank you for this code! It has really helped me!

Is it possible that you could look and see if writing javascript would work? I'm wanting to put the blog title below the video on my page. Here's the page I'm referring to www.igotofaith.com/sermons 

I want the blog title below the video along with the metadata under the blog title. Right now I just have the blog title hidden and I'm manually adding in the blog title and meta information. I'd like to not have to manually add this information in each week. 

Thank you so much!

Austin Burleson

First, remove this code

body:not(.sqs-edit-mode) .blog-item-wrapper .blog-item-title {
    display: none;
}

and this

.blog-item-wrapper .blog-item-author-date-wrapper {
    display: none;
}

.blog-item-wrapper .blog-meta-item--date {
    display: none;
}
.blog-item-wrapper .blog-meta-item--author {
    display: none;
}

Next, add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.blog-item-top-wrapper').insertAfter('.blog-item-content.e-content .video-block');
});
</script>
<style>
  .video-block+.blog-item-top-wrapper * {
    text-align: left;
}
</style>