JCrid Posted July 5, 2021 Share Posted July 5, 2021 Site URL: https://www.yorkshirearboretum.org/events/ Hi everyone, Is there a way to add an image beneath the left-hand time and date on Squarespace event pages? Regards, J Link to comment
tuanphan Posted July 7, 2021 Share Posted July 7, 2021 Hi. Same image for all events or different images? On 7/5/2021 at 5:35 PM, JCrid said: Site URL: https://www.yorkshirearboretum.org/events/ Hi everyone, Is there a way to add an image beneath the left-hand time and date on Squarespace event pages? Regards, J  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
JCrid Posted July 7, 2021 Author Share Posted July 7, 2021 Hi, thanks for your reply. Ideally the thumbnail image for that particular event that appears on the calendar list. Thanks, J Link to comment
tuanphan Posted July 9, 2021 Share Posted July 9, 2021 On 7/7/2021 at 4:51 PM, JCrid said: Hi, thanks for your reply. Ideally the thumbnail image for that particular event that appears on the calendar list. Thanks, J I think you need to add images in Event Description, then we will use JavaScript code to move them under event datetime. What do you think? If you agree, you can add an example image in an event, we can test there. 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
JCrid Posted August 2, 2021 Author Share Posted August 2, 2021 Hi, thanks for your reply. I will try that and send you a link. Is there particular Javascript text I should use? Jonathan Link to comment
tuanphan Posted August 3, 2021 Share Posted August 3, 2021 18 hours ago, JCrid said: Hi, thanks for your reply. I will try that and send you a link. Is there particular Javascript text I should use? Jonathan you can add an example image in an event, we can test there. 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
MattArch Posted February 26, 2023 Share Posted February 26, 2023 On 8/3/2021 at 6:09 AM, tuanphan said: you can add an example image in an event, we can test there. I'd like to do this exact thing. I've added an image into the event details. Could you share a code to display the image underneath the info in the left column? Link to comment
tuanphan Posted February 28, 2023 Share Posted February 28, 2023 On 2/26/2023 at 10:22 AM, MattArch said: I'd like to do this exact thing. I've added an image into the event details. Could you share a code to display the image underneath the info in the left column? Hi, What is event page url? 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
MattArch Posted April 2, 2023 Share Posted April 2, 2023 On 2/28/2023 at 5:11 AM, tuanphan said: Hi, What is event page url? https://www.focalpoint.beer/events/zero-vision-cinema-shaun-of-the-dead Link to comment
MattArch Posted April 2, 2023 Share Posted April 2, 2023 48 minutes ago, MattArch said: https://www.focalpoint.beer/events/zero-vision-cinema-shaun-of-the-dead Although I'd love to grab the thumbnail from the event, if possible :) Link to comment
tuanphan Posted April 5, 2023 Share Posted April 5, 2023 On 4/3/2023 at 12:47 AM, MattArch said: Although I'd love to grab the thumbnail from the event, if possible 🙂 Add to Settings > Advanced > Code Injection > Footer <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
MattArch Posted April 5, 2023 Share Posted April 5, 2023 Wow, I've been looking for a way to do this for years - thank you so much!! 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