Jump to content

Event Summary Show Read More Link

Go to solution Solved by iamdavehart,

Recommended Posts

  • Replies 12
  • Views 888
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 8/9/2021 at 2:06 AM, Markus12 said:

Hi there,

is it possible to add a "Read More" to summaries showing events that directs you to the event's detail page? For blog summaries, Squarespace offers that capability.

Best,

Markus

Hi. Yes. 

You can add a read more text link in Excerpt?

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
On 8/11/2021 at 1:21 PM, Markus12 said:

@tuanphan Yes, I could. But I don't want to do it manually. It should be automatically there as in case of a blog. 

Can you share link to page page where you added Event Summary?

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

because you need to create new elements, do it with javascript (requires business/premium)

  • add a code block on the page with your event summary and write a script in it (you could also inject a script into the header using the pages Settings > Advanced, but it would be in the head so you have to wait for the page to be rendered)
  • locate the event summary blocks you want using a selector by class name (find the classes by inspecting the source). loop over them.
  • retrieve the link to the event from the summary title
  • create a link element, set the href to the link you just got, insert it into the DOM wherever you want it

no business/premium? add it manually, or use CSS to add in an ::after pseudo element to write the words "Read More" in, then find an existing link (e.g. the title) add in a pseudo element to that too and then stretch it over the entire summary item using absolute positioning (in the same way that bootstrap does a stretch link for example)

Should be enough to get you started.

Cheers

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 1 year later...

Hi, I am wondering the same thing but not so good with code. I want to add a read more link under the first event summary on the page, because a lot of people don't know to click on it for more details.

https://tivoliartistsgallery.com/exhibit-schedule/#current

I could add it to the page itself, or the excerpt, whichever is easier. 

Please note I have a link "read more" in the excerpt now but I don't want to have to manually do this for all of them. 

Thanks!

Link to comment
On 2/18/2023 at 5:35 AM, kkester said:

Hi, I am wondering the same thing but not so good with code. I want to add a read more link under the first event summary on the page, because a lot of people don't know to click on it for more details.

https://tivoliartistsgallery.com/exhibit-schedule/#current

I could add it to the page itself, or the excerpt, whichever is easier. 

Please note I have a link "read more" in the excerpt now but I don't want to have to manually do this for all of them. 

Thanks!

Add to this Summary?

image.thumb.png.58c4bc24f9310c71d7c90b30ae38a718.png

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
On 2/26/2023 at 6:03 AM, kkester said:

Yes, either in the summary or a button below the summery on the page it self. 

 

Thanks

Add to Design > Custom CSS

body#collection-63568b0531815f2ea12da3eb .summary-excerpt:after {
    content: "Read more";
    font-size: 14px;
    color: var(--paragraphLinkColor);
    font-family: Work Sans;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}

 

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
  • 2 weeks later...
On 2/28/2023 at 5:05 AM, tuanphan said:

Add to Design > Custom CSS

body#collection-63568b0531815f2ea12da3eb .summary-excerpt:after {
    content: "Read more";
    font-size: 14px;
    color: var(--paragraphLinkColor);
    font-family: Work Sans;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}

 

Thanks! So I added it and it looks great, however it doesn't link to the event page. What am I doing wrong? 

https://tivoliartistsgallery.com/exhibit-schedule/#current

Link to comment
On 3/14/2023 at 4:12 AM, kkester said:

Thanks! So I added it and it looks great, however it doesn't link to the event page. What am I doing wrong? 

https://tivoliartistsgallery.com/exhibit-schedule/#current

Remove it & use this new code

body#collection-63568b0531815f2ea12da3eb .summary-title-link:after {
    content: "Read more";
    font-size: 14px;
    color: var(--paragraphLinkColor);
    font-family: Work Sans;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    position: absolute;
    bottom: 20px;
    left:0;  
}

 

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

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.