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

Banner image on event pages in 7.1


Recommended Posts

I'm still learning 7.1 after doing a few sites in 7.0. I've created an events collection on a new site I'm working on. The main collection summary page has an image section under the header banner (which then bleeds under the banner, as I want), and before the list of events. However going into a single event page, there doesn't seem to be any way of showing an image in the same way. Ideally I want the event's thumbnail image to show at the top of the page, and bleed under the header banner. Instead all I get is the site-wide colourless banner image. Using dynamic header styling is an option, but not ideal.

There seems to be no way to add an image section to the single event page.

Am I missing something? Is there a way to make show an event's image on the event page?

Link to comment
3 hours ago, davidbrewster said:

I'm still learning 7.1 after doing a few sites in 7.0. I've created an events collection on a new site I'm working on. The main collection summary page has an image section under the header banner (which then bleeds under the banner, as I want), and before the list of events. However going into a single event page, there doesn't seem to be any way of showing an image in the same way. Ideally I want the event's thumbnail image to show at the top of the page, and bleed under the header banner. Instead all I get is the site-wide colourless banner image. Using dynamic header styling is an option, but not ideal.

There seems to be no way to add an image section to the single event page.

Am I missing something? Is there a way to make show an event's image on the event page?

Guess you have to use javascript to get the image from the /events page and append to the item page

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/10/2021 at 5:12 AM, davidbrewster said:

Thanks. That's a bit beyond me. It seems a strange oversight, given Squarespace is all about imagery, that you can't show an event's image on the actual event.

You mean something like this?

Style 1-min (1).jpg

or

Style 2-min.jpeg

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
  • 5 months later...

Hi tuanphan,

I'm not seeing the option to choose Event page layouts. We are hoping to use the second option with the full bleed banner image at the top. How do you select it? 

Thanks for the help.

Link to comment
6 hours ago, SNH said:

Hi tuanphan,

I'm not seeing the option to choose Event page layouts. We are hoping to use the second option with the full bleed banner image at the top. How do you select it? 

Thanks for the help.

Same image for all events or different image?

If same image, please share link to an event, we can check & give code easier

If different, you can add an image on Event Description, then we will use code to move it to top of event title, fullbleed same as screenshot

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
On 5/9/2022 at 11:39 PM, SNH said:

Thank you. We would want a different image specific to each event. 

Example here: https://symphonynh.org/events/tango-titan

pw: T@ng0t1tan

Thank you!

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('div.eventitem-column-content .image-block').insertBefore('.sqs-events-collection-item.events-item');
	});
</script>
<style>
  div.events-item-wrapper .image-block figure {
    max-width: 100% !important;
}
  div.events-item-wrapper .image-block {
    padding: 0 !important;
}
</style>

 

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

Thank you very much! Is there any way to set the image block height so that it is shorter without having to edit the original image?

Also, we will eventually be adding other photos to the event pages for guest artists and conductors. Will the code affect this?

Link to comment
On 5/11/2022 at 10:39 PM, SNH said:

Thank you very much! Is there any way to set the image block height so that it is shorter without having to edit the original image?

Also, we will eventually be adding other photos to the event pages for guest artists and conductors. Will the code affect this?

Hi,

Try this new code

<script>
  $(document).ready(function() { 
		$('div.eventitem-column-content .image-block').insertBefore('.sqs-events-collection-item.events-item');
	});
</script>
<style>
 div.events-item-wrapper .image-block figure {
    max-width: 100% !important;
}
  div.events-item-wrapper .image-block {
    padding: 0 !important;
}
div.events-item-wrapper .has-aspect-ratio{
  padding-bottom: 30% !important;
}
</style>

This code, will move all images in Event Individual Pages, to top of page.

If you add 2 images on event description, it will move both to top

If you need another code, I will try testing some other approaches

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
  • 1 month later...

Hey @tuanphan.... I would love to be able to add a an image similar to your option two above (just not as tall) . I would like to still have images in the section below this fold to the right of the left side panel. I would like a new image on each post. The site I am looking to do this to is this the one below (all events).

 

https://www.coastalathletics.net/events/august-summer-camp-2-2022

 

Thank you so much in advance for the help!

Link to comment
13 hours ago, Patterson said:

Hey @tuanphan.... I would love to be able to add a an image similar to your option two above (just not as tall) . I would like to still have images in the section below this fold to the right of the left side panel. I would like a new image on each post. The site I am looking to do this to is this the one below (all events).

 

https://www.coastalathletics.net/events/august-summer-camp-2-2022

 

Thank you so much in advance for the help!

You mean keep the top image + add a new image to top of page?

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
On 6/18/2022 at 1:03 AM, tuanphan said:

You mean keep the top image + add a new image to top of page?

Sort of yes, I want to be able to have a hero image that is customizable for each event post. I have tried to figure out the proper way to do it but have had no luck yet. Any help is appreciated. 

Thank, 

Patterson

Link to comment
8 hours ago, Patterson said:

Sort of yes, I want to be able to have a hero image that is customizable for each event post. I have tried to figure out the proper way to do it but have had no luck yet. Any help is appreciated. 

Thank, 

Patterson

You can add a different image block on top or bottom of each event, then we will give the code to move that image to top of event detail page

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

You can add a different image block on top or bottom of each event, then we will give the code to move that image to top of event detail page

That would be great! Can you start with this page - https://www.coastalathletics.net/events/august-summer-camp-2-2022 

and then provide instructions on how to do this on other events and future ones I add down the line. 

 

Thank you so much! @tuanphan

Link to comment
14 hours ago, Patterson said:

That would be great! Can you start with this page - https://www.coastalathletics.net/events/august-summer-camp-2-2022 

and then provide instructions on how to do this on other events and future ones I add down the line. 

 

Thank you so much! @tuanphan

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div.eventitem-column-content .image-block').insertBefore('.sqs-events-collection-item.events-item');
	});
</script>
<style>
 div.events-item-wrapper .image-block figure {
    max-width: 100% !important;
}
  div.events-item-wrapper .image-block {
    padding: 0 !important;
}
div.events-item-wrapper .has-aspect-ratio{
  padding-bottom: 30% !important;
}
</style>

 

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
On 6/20/2022 at 11:07 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div.eventitem-column-content .image-block').insertBefore('.sqs-events-collection-item.events-item');
	});
</script>
<style>
 div.events-item-wrapper .image-block figure {
    max-width: 100% !important;
}
  div.events-item-wrapper .image-block {
    padding: 0 !important;
}
div.events-item-wrapper .has-aspect-ratio{
  padding-bottom: 30% !important;
}
</style>

 

Hey @tuanphan,  Thanks for this! This also pulls the 2nd image on the page as well. Is there any way to only impact the first image on each event?

Link to comment
10 hours ago, Patterson said:

Hey @tuanphan,  Thanks for this! This also pulls the 2nd image on the page as well. Is there any way to only impact the first image on each event?

Can you add 2 images? We can check easier. Currently I see 1 image only

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
On 6/26/2022 at 5:50 AM, Patterson said:

Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div.eventitem-column-content .columns-12 .span-12>.image-block:first-child').insertBefore('.sqs-events-collection-item.events-item');
	});
</script>
<style>
 div.events-item-wrapper .columns-12 .span-12>.image-block:first-child figure {
    max-width: 100% !important;
}
  div.events-item-wrapper .columns-12 .span-12>.image-block:first-child {
    padding: 0 !important;
}
div.events-item-wrapper .columns-12 .span-12>.image-block:first-child .has-aspect-ratio{
  padding-bottom: 30% !important;
}
</style>

 

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

Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div.eventitem-column-content .columns-12 .span-12>.image-block:first-child').insertBefore('.sqs-events-collection-item.events-item');
	});
</script>
<style>
 div.events-item-wrapper .columns-12 .span-12>.image-block:first-child figure {
    max-width: 100% !important;
}
  div.events-item-wrapper .columns-12 .span-12>.image-block:first-child {
    padding: 0 !important;
}
div.events-item-wrapper .columns-12 .span-12>.image-block:first-child .has-aspect-ratio{
  padding-bottom: 30% !important;
}
</style>

 

This looks sharp. Thanks for getting this capability added. Do you have any recommend changes for further making better?

Link to comment
On 7/2/2022 at 3:17 AM, Patterson said:

This looks sharp. Thanks for getting this capability added. Do you have any recommend changes for further making better?

I give up. You can use this plugin to add event page banner

(affiliate link)

 

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...