Events Page Image

Hi all, 

I was wondering if you could help me, I'm currently using the Pacific template on 7.0 and I am trying to add an image block to the to the event info bar on the left hand side of an events listing (where I have drawn a red box on the image), from what I can see there isn't a way to do this natively so I was wondering if there is a way to put one in with CSS? 

Thanks for your help 🙂 

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!

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>

You're a legend, thank you 🙂 

Hi @tuanphan, this is super great, I was wondering if there's a way hav the image above the event title? 

On 4/21/2024 at 2:49 PM, ConnorJD said:

Hi @tuanphan, this is super great, I was wondering if there's a way hav the image above the event title? 

Yes. In this position?

On 4/7/2023 at 1:47 AM, tuanphan said:

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>

 

Hi tuanphan,

Is there a reason this would only work after a page refresh? It otherwise works perfectly, but will not work on first page load.

Thank you

Turning off Ajax Loading seemed to resolve the problem. Not sure if there is a workaround, but I'll leave it off for the time being.