Jump to content

I want to move the blog title below the first image

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
40 minutes ago, Claire_auck said:

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.

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:

image.thumb.png.c9c076a2f678f76f9cfbed47861f27d8.png

and this is the Blog Item Top Wrapper:

image.thumb.png.fcc24c877c51352d4a3e4f3390e4b84a.png

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

image.thumb.png.c9c076a2f678f76f9cfbed47861f27d8.png

and this is the Blog Item Top Wrapper:

image.thumb.png.fcc24c877c51352d4a3e4f3390e4b84a.png

 

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.

 

 

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

 

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

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
  • 4 weeks later...
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

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

image.thumb.png.9ae0d49553c7598d9b1412ff7492ff6e.png

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

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

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.