Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to Insert banner image for individual blog entry 7.0


JTeich

Question

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

2 answers to this question

Recommended Posts

  • 0

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
  • 0
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...