Jump to content

Event page: Can I add an image below event date/time using CSS?

Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Squarespace forum Qs.jpg

 

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
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

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
  • 4 weeks later...
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

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
  • 1 year later...
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
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

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
  • 1 month later...
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>

image.thumb.png.842be1a93569eee8dd21c658ee042bd4.png

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

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.