Event page: Can I add an image below event date/time using CSS?

Site URL: https://www.yorkshirearboretum.org/events/

Hi everyone,

Is there a way to add an image beneath the left-hand time and date on Squarespace event pages?

Regards, J

Hi.

Same image for all events

or different images?

On 7/5/2021 at 5:35 PM, JCrid said:

Site URL: https://www.yorkshirearboretum.org/events/

Hi everyone,

Is there a way to add an image beneath the left-hand time and date on Squarespace event pages?

Regards, J

Hi, thanks for your reply.

Ideally the thumbnail image for that particular event that appears on the calendar list.

Thanks, J

On 7/7/2021 at 4:51 PM, JCrid said:

Hi, thanks for your reply.

Ideally the thumbnail image for that particular event that appears on the calendar list.

Thanks, J

I think you need to add images in Event Description, then we will use JavaScript code to move them under event datetime. What do you think? If you agree, you can add an example image in an event, we can test there.

Hi, thanks for your reply. I will try that and send you a link. Is there particular Javascript text I should use?

Jonathan

18 hours ago, JCrid said:

Hi, thanks for your reply. I will try that and send you a link. Is there particular Javascript text I should use?

Jonathan

you can add an example image in an event, we can test there.

On 8/3/2021 at 6:09 AM, tuanphan said:

you can add an example image in an event, we can test there.

I'd like to do this exact thing. I've added an image into the event details. Could you share a code to display the image underneath the info in the left column?

On 2/26/2023 at 10:22 AM, MattArch said:

I'd like to do this exact thing. I've added an image into the event details. Could you share a code to display the image underneath the info in the left column?

Hi,

What is event page url? 

On 2/28/2023 at 5:11 AM, tuanphan said:

Hi,

What is event page url? 

https://www.focalpoint.beer/events/zero-vision-cinema-shaun-of-the-dead

48 minutes ago, MattArch said:

https://www.focalpoint.beer/events/zero-vision-cinema-shaun-of-the-dead

Although I'd love to grab the thumbnail from the event, if possible :)

On 4/3/2023 at 12:47 AM, MattArch said:

Although I'd love to grab the thumbnail from the event, if possible 🙂

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script>
   jQuery(document).ready(function ($) {
        a = $('meta[property="og:image"]');
    a.attr("content", a.attr("content").replace("http", "https"));
        var t = a.attr("content");
        $('meta[property="og:description"]').attr("content");
        $('<div class="event-banner"><img class="event-banner-image" src="' + t + '"></div>').insertAfter("ul.eventitem-meta.event-meta.event-meta-address-container");
});
</script>
<style>
  .event-banner img {
    width: 80%;
    height: auto;
}
</style>

Wow, I've been looking for a way to do this for years - thank you so much!!