DanPrime Posted April 2 Share Posted April 2 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 🙂 Link to comment
beatrizc Posted April 3 Share Posted April 3 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! DanPrime and tuanphan 2 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
tuanphan Posted April 7 Share Posted April 7 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> catalienne and DanPrime 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment