Jump to content

How to Insert banner image for individual blog entry 7.0

Go to solution Solved by IXStudio,

Recommended Posts

Site URL: https://www.caroline-shenaz-hossein.com/news-and-events/2020/11/13/online-liviana-conference-fourth-session-organized-by-dr-caroline-shenaz-hossein

Hello, I've seen similar questions, but not this one in particular. 

I have no problem getting a banner image for the summary page of posts, but not the page for *individual* posts like this one.  My attempts at code in the post blog item code injection have only resulted in images on the summary page of posts, not an individual blog entries.

Thanks so much guys

Link to comment
  • Solution

Hi,
Please insert this code in your Page Settings -> Header Injection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var imgURL = "https://images.squarespace-cdn.com/content/v1/5947fdcdd482e9517f8cc5e9/1605298803110-Q4U67HKG2YXUWOCN3TCW/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/image-asset.jpeg" // Insert your image link here!

$(window).on('load', function() {
$('header.Header.Header--bottom').addClass('Header--bottom Header--overlay');
$('.Parallax-host-outer').attr('style','position:absolute;z-index:1');
$('section.Main-content').attr('style','padding-top: 500px;');
$('.Parallax-host-outer').html('<div class="Parallax-host-outer"> <div class="Parallax-host" data-parallax-host=""> <div class="Parallax-item" data-parallax-item="" data-parallax-id="5f7b55a094d88c547eb5fd8b" style="top: 0px; left: 0px; width: 1920px; height: 459px; transform: translate3d(0px, 0px, 0px);"><figure class="Intro-image loaded" data-parallax-image-wrapper="" style="bottom: -26px; overflow: hidden; transform: translate3d(0px, 0px, 0px);"> <img data-parent-ratio="4.0" style="font-size: 0px; left: 0px; top: -397.628px; width: 1920px; height: 1280.26px; position: relative;" class="" data-image-resolution="2500w" src="'+ imgURL +'"> </figure></div> </div> </div>');
});
</script>

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
On 11/18/2020 at 2:54 PM, IXStudio said:

Hi,
Please insert this code in your Page Settings -> Header Injection


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var imgURL = "https://images.squarespace-cdn.com/content/v1/5947fdcdd482e9517f8cc5e9/1605298803110-Q4U67HKG2YXUWOCN3TCW/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/image-asset.jpeg" // Insert your image link here!

$(window).on('load', function() {
$('header.Header.Header--bottom').addClass('Header--bottom Header--overlay');
$('.Parallax-host-outer').attr('style','position:absolute;z-index:1');
$('section.Main-content').attr('style','padding-top: 500px;');
$('.Parallax-host-outer').html('<div class="Parallax-host-outer"> <div class="Parallax-host" data-parallax-host=""> <div class="Parallax-item" data-parallax-item="" data-parallax-id="5f7b55a094d88c547eb5fd8b" style="top: 0px; left: 0px; width: 1920px; height: 459px; transform: translate3d(0px, 0px, 0px);"><figure class="Intro-image loaded" data-parallax-image-wrapper="" style="bottom: -26px; overflow: hidden; transform: translate3d(0px, 0px, 0px);"> <img data-parent-ratio="4.0" style="font-size: 0px; left: 0px; top: -397.628px; width: 1920px; height: 1280.26px; position: relative;" class="" data-image-resolution="2500w" src="'+ imgURL +'"> </figure></div> </div> </div>');
});
</script>

Please use the like button if it helps you!

Best,
Leopold

This works! Thank you!

Link to comment
  • 1 year later...
On 11/19/2020 at 6:54 AM, IXStudio said:

Hi,
Please insert this code in your Page Settings -> Header Injection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var imgURL = "https://images.squarespace-cdn.com/content/v1/5947fdcdd482e9517f8cc5e9/1605298803110-Q4U67HKG2YXUWOCN3TCW/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/image-asset.jpeg" // Insert your image link here!

$(window).on('load', function() {
$('header.Header.Header--bottom').addClass('Header--bottom Header--overlay');
$('.Parallax-host-outer').attr('style','position:absolute;z-index:1');
$('section.Main-content').attr('style','padding-top: 500px;');
$('.Parallax-host-outer').html('<div class="Parallax-host-outer"> <div class="Parallax-host" data-parallax-host=""> <div class="Parallax-item" data-parallax-item="" data-parallax-id="5f7b55a094d88c547eb5fd8b" style="top: 0px; left: 0px; width: 1920px; height: 459px; transform: translate3d(0px, 0px, 0px);"><figure class="Intro-image loaded" data-parallax-image-wrapper="" style="bottom: -26px; overflow: hidden; transform: translate3d(0px, 0px, 0px);"> <img data-parent-ratio="4.0" style="font-size: 0px; left: 0px; top: -397.628px; width: 1920px; height: 1280.26px; position: relative;" class="" data-image-resolution="2500w" src="'+ imgURL +'"> </figure></div> </div> </div>');
});
</script>

Please use the like button if it helps you!

Best,
Leopold

Which Page Settings are you referring to?

Do we need to do this for every individual blog post?

Thanks,
Rhonda

Link to comment
22 hours ago, rhondahymason said:

Which Page Settings are you referring to?

Do we need to do this for every individual blog post?

Thanks,
Rhonda

It is Blog Page Setting. Code at here, will run for every individual blog posts

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

It is Blog Page Setting. Code at here, will run for every individual blog posts

To give a bit more clarity, I would like to add a different banner image like this to every blog post. I would also like to be able to add the blog post title and author name on top of the banner image if this were possible.

Thank you again, Tuan. Your expertise is greatly appreciated.

Screen Shot 2022-09-19 at 5.18.30 pm.png

Link to comment
On 9/19/2022 at 2:20 PM, rhondahymason said:

To give a bit more clarity, I would like to add a different banner image like this to every blog post. I would also like to be able to add the blog post title and author name on top of the banner image if this were possible.

Thank you again, Tuan. Your expertise is greatly appreciated.

Screen Shot 2022-09-19 at 5.18.30 pm.png

Try this free guide https://www.will-myers.com/articles/blog-post-banner-image-update

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

Following up with questions here, since this solution worked partially for me.

The code injection works in placing the banner on the blog summary and in each blog post. 

Here's the issues:

1) Before, I could add a banner image to the blog summary page. And it also showed "Blog" in H1, as intended:
01.thumb.png.54de1f7b8c66daa9041f8588bfae9e41.png

But when adding the code, there's a big empty space the banner and the rest of the content, and I have to scroll down more:
03.thumb.png.c1993cd15d949f5ed8ec839e37ebc394.png


As for the blog pages, before injecting the code I couldn't have a banner image:
02.thumb.png.826540d14d9ac6d9674bda969dbe6251.png

After the code, the banner image shows fine but it doesn't show the "Blog" in H1:

05.thumb.png.d7c906ff8bdf5ee7b478d3a11ba2e2a1.png

Any lines of code I can add to fix these two issues?

Thanks in advance!

04.png

Link to comment
On 9/28/2022 at 5:41 PM, geraldflf said:

Following up with questions here, since this solution worked partially for me.

The code injection works in placing the banner on the blog summary and in each blog post. 

Here's the issues:

1) Before, I could add a banner image to the blog summary page. And it also showed "Blog" in H1, as intended:
01.thumb.png.54de1f7b8c66daa9041f8588bfae9e41.png

But when adding the code, there's a big empty space the banner and the rest of the content, and I have to scroll down more:
03.thumb.png.c1993cd15d949f5ed8ec839e37ebc394.png


As for the blog pages, before injecting the code I couldn't have a banner image:
02.thumb.png.826540d14d9ac6d9674bda969dbe6251.png

After the code, the banner image shows fine but it doesn't show the "Blog" in H1:

05.thumb.png.d7c906ff8bdf5ee7b478d3a11ba2e2a1.png

Any lines of code I can add to fix these two issues?

Thanks in advance!

04.png

What is your blog page 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.