events-page Banner image on event pages in 7.1

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?

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

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.

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?

or

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.

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

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!

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>

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?

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!

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?

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

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

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

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>

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?

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

On 6/23/2022 at 4:06 AM, tuanphan said:

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

@tuanphan- Here is one with 2 images. Thanks!

https://www.coastalathletics.net/events/serene-flow-yoga

On 6/26/2022 at 5:50 AM, Patterson said:

@tuanphan- Here is one with 2 images. Thanks!

 

https://www.coastalathletics.net/events/serene-flow-yoga

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>

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?

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)

@tuanphan, Thanks again, you are awesome. 

Hi @tuanphan! Do you know if it's possible to have the event date and time automatically "embedded" into the description text for each event using code? Here's a mockup of what we're trying to do. Green is the event title - we already figured out how to center it. The January date and the time beneath it - we'd like to have it appear above the description text but next to the image we added. I'm using the Events feature in 7.1.

9 hours ago, MWalker said:

Hi @tuanphan! Do you know if it's possible to have the event date and time automatically "embedded" into the description text for each event using code? Here's a mockup of what we're trying to do. Green is the event title - we already figured out how to center it. The January date and the time beneath it - we'd like to have it appear above the description text but next to the image we added. I'm using the Events feature in 7.1.

Can you share your site so I can take a look?