events-page Banner image on event pages in 7.1

Thanks for replying @Beyondspace! Unfortunately I'm not able to share the URL publicly. Would it help if I copied the page code and sent it or sent you a private message?

On 6/30/2022 at 3:38 PM, 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>

 

I've implemented this code on our site and the event image is being pulled to the top correctly, thank you! Wondering how I can have the individual event images show up behind the main navigation? Currently the navigation is forcing a background color and pushing the event image below it instead of showing up transparent over the image. 

On 9/26/2023 at 2:02 AM, cassiepdx said:

I've implemented this code on our site and the event image is being pulled to the top correctly, thank you! Wondering how I can have the individual event images show up behind the main navigation? Currently the navigation is forcing a background color and pushing the event image below it instead of showing up transparent over the image. 

Can you share link to an event? We can check problem easier 

On 9/27/2023 at 12:39 AM, tuanphan said:

Can you share link to an event? We can check problem easier 

Referring to this type of event detail page for example: https://lily-glockenspiel-trzw.squarespace.com/events/eldton-t-jones

I'd like the image to appear behind the navigation

On 10/22/2023 at 10:38 AM, cassiepdx said:

https://lily-glockenspiel-trzw.squarespace.com/

password: jazz

Referring to this type of event detail page for example: https://lily-glockenspiel-trzw.squarespace.com/events/eldton-t-jones

I'd like the image to appear behind the navigation

The site is expired. You can access this link to extend it.

On 10/23/2023 at 8:18 PM, tuanphan said:

The site is expired. You can access this link to extend it.

 

The site has been restored.

10 hours ago, cassiepdx said:

The site has been restored.

Add this code to Website > Website Tools (under Not Linked) > Custom CSS

body[class*="type-events"].view-item article section:first-child {
    padding-top: 0px !important;
}
body[class*="type-events"].view-item article section:first-child .image-block {
    padding-top: 0px !important;
}

This absolutely worked, thank you so much!

This is a great thread thank you!

This code worked for me..

<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: 50% !important;
}
</style>

But I need the image to be full so my logo and menu don't get lost. Like it is on the original. Any tweaks that can make that happen? I know I will loose the text field on top but I can compromise.

Just now, HouseBlend said:

This is a great thread thank you!

This code worked for me..

<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: 50% !important;
}
</style>

But I need the image to be full so my logo and menu don't get lost. Like it is on the original. Any tweaks that can make that happen? I know I will loose the text field on top but I can compromise.

https://tetra-lanternfish-t8h4.squarespace.com/

9 hours ago, HouseBlend said:

https://tetra-lanternfish-t8h4.squarespace.com/

I wrote this small plugin (free)

It will use Thumbnail, and make it become top banner.

That plugin works great! Is it possible to get the image to go full vertical like the videos and other images on the other pages. So it is underneath the menu?

17 hours ago, HouseBlend said:

That plugin works great! Is it possible to get the image to go full vertical like the videos and other images on the other pages. So it is underneath the menu?

Add this to Website Tools > Custom CSS

[class*="type-events"].view-item article section:first-child {
    padding-top: 0px !important;
}

Thank You!

21 hours ago, tuanphan said:

Add this to Website Tools > Custom CSS

[class*="type-events"].view-item article section:first-child {
    padding-top: 0px !important;
}