Jump to content

Event Summary Show Read More Link

Go to solution Solved by iamdavehart,

Recommended Posts

Posted

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

  • Replies 12
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted
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!)

  • Solution
Posted

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 

  • 1 year later...
Posted

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!

Posted
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!)

Posted
On 2/21/2023 at 4:59 AM, tuanphan said:

Add to this Summary?

image.thumb.png.58c4bc24f9310c71d7c90b30ae38a718.png

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

 

Thanks

Posted
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!)

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

Posted
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!)

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.