Jump to content

Adding image to event details page

Go to solution Solved by creedon,

Recommended Posts

Hi,

I was wondering if there was a way to add the event image to the event details page? Would there be a way to always include an image so I dont have to be adding it twice everytime (in the settings and details) thank you.

 

 

Link to comment

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 8/8/2023 at 3:06 PM, creedon said:

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

https://www.qinglongtaichiarts.ca/events/tai-chi-beginner-classes-intensive

Link to comment

Thank you for the link it helps in beginning to understand the effect.

Where were you thinking you want the image to appear? As part of the meta information on the left? Or, as part of the event content on the right.

I know of no code that actually does this but we need to know where in order to begin to formulate any potential solution.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 8/10/2023 at 5:48 PM, creedon said:

Please see Events Page Event Thumbnail Add.

Let us know how it goes.

Hi, I think i got it to work.  This is the code I injected. https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Page/Events/Event/Events Page Event Thumbnail Add/events page event thumbnail add.html#L1 

Any idea how to make the images a bit larger? Not too important

it would also be nice if they could also be rectangles like the image in the main event page. 

Edited by em_
added info
Link to comment
  • Solution
Quote

 

Any idea how to make the images a bit larger? Not too important

 

Yes. I set the image by default to take up 50% of the space available in the meta info area.

Add the following to Events Settings > Advanced > Page Header Code Injection for the events page. Please see per-page code injection.

<style>

  .twc-eventitem-thumbnail {
  
    width : 100%;
    
    }
    
  </style>

 

Quote

it would also be nice if they could also be rectangles like the image in the main event page. 

I'll keep this in mind as a feature request but I have no firm plans or timeline to possibly do this. My code is not altering the aspect ratios of images at this point. Also a note for those that follow on. It seems SS is not providing the selected aspect ratio selected in settings to the events page pages.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 11 months later...

Hi @creedon

This is exceptionally helpful, thank you!

I was wondering if there is any way the image could be placed below the event date and time?

So it would go (from top to bottom)

  • Event Title
  • Event date and time
  • Event Thumbnail

Thank you!

Screenshot 2024-08-02 at 12.36.07.png

Link to comment
7 hours ago, Dez_Smith said:

I was wondering if there is any way the image could be placed below the event date and time?

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Hi - thanks for the reply. 

The page in question is:
https://www.louthriverheadtheatre.com/events

Edited by Dez_Smith
Link to comment
7 hours ago, Dez_Smith said:

I was wondering if there is any way the image could be placed below the event date and time?

Add the following to Events Settings > Advanced > Page Header Code Injection for the events page. Please see per-page code injection.

<style>

  /* begin move twc thumbnail last */
  
    .eventitem-column-meta {
    
      display : flex;
      flex-direction : column;
      
      }
      
    .twc-eventitem-thumbnail {
    
      order : 1;
      
      }
      
    /* end move twc thumbnail last */
    
  </style>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
54 minutes ago, creedon said:

Add the following to Events Settings > Advanced > Page Header Code Injection for the events page. Please see per-page code injection.

<style>

  /* begin move twc thumbnail last */
  
    .eventitem-column-meta {
    
      display : flex;
      flex-direction : column;
      
      }
      
    .twc-eventitem-thumbnail {
    
      order : 1;
      
      }
      
    /* end move twc thumbnail last */
    
  </style>

Let us know how it goes.

That's it! Perfect, thank you.

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.