Jump to content

Events Page Image

Recommended Posts

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 🙂 

Screenshot 2023-04-02 at 10.49.23.png

Link to comment

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!

Squarespace Customization Geek | Helping fellow designers code the heck out of Squarespace

☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for.

☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects.

☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch!

 

Website | Youtube | Facebook | Pinterest

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.