How to Insert banner image for individual blog entry 7.0

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

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!

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

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

21 hours ago, tuanphan said:

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

Thank you, Tuan. Is it possible to add a different banner image to each blog post?

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.

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.

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

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:


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:

As for the blog pages, before injecting the code I couldn't have a banner image:


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



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

Thanks in advance!

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:


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:

As for the blog pages, before injecting the code I couldn't have a banner image:


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



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

Thanks in advance!

What is your blog page url?