DanPrime Posted April 2, 2023 Share Posted April 2, 2023 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, 2023 Share Posted April 3, 2023 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! tuanphan and DanPrime 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, 2023 Share Posted April 7, 2023 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> ConnorJD, DanPrime and catalienne 2 1 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
DanPrime Posted April 13, 2023 Author Share Posted April 13, 2023 You're a legend, thank you 🙂 Link to comment
ConnorJD Posted Sunday at 07:49 AM Share Posted Sunday at 07:49 AM Hi @tuanphan, this is super great, I was wondering if there's a way hav the image above the event title? Link to comment
tuanphan Posted Monday at 10:03 AM Share Posted Monday at 10:03 AM 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? 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
catalienne Posted yesterday at 12:22 PM Share Posted yesterday at 12:22 PM On 4/7/2023 at 6:47 PM, 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> This has been fantastic and has worked a treat, not sure but new posts today don't display the image anymore. Perhaps changes to the script? I don't know how to check. The old posts still show the little image in the individual posts. Do you know why @tuanphan? thanks 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