DanPrime

If you use a Business Plan or higher, you can add this to Code Injection > Footer. The code will grab Event Thumbnail & Move to position in your screenshot
<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>  

Hey @DanPrime!
You can add an image there via CSS, if it's NOT meant to be a clickable element. Otherwise you'll need JavaScript.
If it's just an image what you're after, this code should help you get there:
.eventitem-column-meta::after { background-image: url(IMAGE.PNG); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; display: block; height: 200px; width: 100%; } You'll need to:
Replace IMAGE.PNG with the URL of the image you want to use. Modify the height property to make the image bigger or smaller (horizontally it'll reach a maximum width that matches the sidebar content) Change background-position to left or right, if you need to realign the image. -------------------
Note that the code, as is, will apply to ALL event items inside your site.
Therefore ALL of them will have the same image showing in that area.
If you want to narrow things down to ONE event, you can include the Page ID in your code, like so:
#page-id-goes-here .eventitem-column-meta::after { background-image: url(IMAGE.PNG); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; display: block; height: 200px; width: 100%; } If you need help finding your event's page ID, you can check out this post to know where to look for it.
Hope this helps!

Do we know if there is a way to force the Thumbnail image to display on Mobile or sub 600px calendars? I use a Green, Red or Yellow thumbnail to distinguish my events but these only hsow when the cal is over 600px in size.
 
website: crewehc.co.uk the calendar is at the bottom of the home page. 

Add to Design > Custom CSS
/* Hide event arrow */ span.flyoutitem-link-arrow { display: none; }  

Do we know if there is a way to force the Thumbnail image to display on Mobile or sub 600px calendars? I use a Green, Red or Yellow thumbnail to distinguish my events but these only hsow when the cal is over 600px in size.
 
website: crewehc.co.uk the calendar is at the bottom of the home page.