Forum

Thread tagged as: Question, Events

Link from event description not working

I am using the event add on.

When editing an event, I would like to add a link to a url from the event description, but when I use the link icon the link isnt added correctly.

EG I edit an event and click the link icon to add a link to the event description - this is what I create : This is the link or sometimes This is the link...

What I see on the website is : This is the link (which is not clickable).

If I am editing a page with a text area, I can add a link using the text icon with no problems. Its just a problem with the event addon.

I have used several formats in the event.html template. None of them work for me.

~~~

<div class="description"><perch:events id="eventDescHTML" type="textarea" label="Text" markdown="true" editor="simplemde"  /></div>

<div class="description"><perch:events id="eventDescHTML" type="textarea" striptags="true" markdown="true"  editor="simplemde" html="true" size="m" encode="false" /></div>

<div class="description"><perch:events id="eventDescHTML" type="textarea" markdown="true" editor="markitup" encode="false"  /></div>

~~~

Can anyone see what I am doing wrong?

cow shed 0 points

3 years ago

Jonathan Elliman 27 points

3 years ago

Hi Cow Shed!

If you use the same ID on each tag then you are going to get into a bit of a pickle as Perch will assume they are the same element. Give them different names / add numbers to the ends of the ID.

You haven't said how you are generating links but I am assuming you are clicking the editor toolbar. Simplemde will insert the markdown into the copy for you to fill out. This then gets converted to html. If you add html="true" to the then you can add html into that copy too. Otherwise html will be displayed as raw code.

The first option will work fine, as will the last. Both editors will convert markdown to html on the fly. You don't need encode="false" – I don't even know what that does tbh!

The second one will strip tags out of the copy so you definitely don't want that!

ps I have never used events but am assuming it's the same as content, just rescoped. NB The events app is no longer updated as far as I am aware.

Hope this helps.

Jon

cow shed 0 points

3 years ago

Hi Jon

Thanks for this.

Yes, you are right - I am clicking on the editor toolbar to generate the link. I only have one line of code live (the other two were just things I tried) so my id is ok.

I have tried adding html="true" but its not helping. This is the full event.html code with html true added. (Because of the problems with attaching a document in the event module, I have added a file field).

<div class="vevent">

    <h2 class="summary"><perch:events id="eventTitle" /></h2>

    <p class="dtstart"><span class="value-title" title="<perch:events id="eventDateTime" format="c" />"><perch:events id="eventDateTime" format="%c" /></span></p>

    <div class="description"><perch:events id="eventDescHTML" type="textarea" markdown="true" editor="simplemde" html="true" /></div>

    <a href="<perch:events id="file" type="file" label="Optional : Event Document - eg flyer or Newsletter" order="1" />"> 

    <perch:events type="reportDesc" id="desc" label="Event Document Description" order="2"  /></a>

</div>

This generates this line in my Description field : This should be clickable so I can click to go to the url...

You can see the problem on my live site : https://www.cannizaropark.com/index.php Its in the PINK Forthcoming Event section at the bottom - you will see the link is not clickable!

Jonathan Elliman 27 points

3 years ago

Looking at your page source you've got output that is breaking the html. The hidden second block of html contains the working link.

Jon



<ul class="list-unstyled">



<p class="white-text">

<span class="event-date">
    Sunday, 2nd September 2018 8:00 pm
</span>  

 - THE GREATEST SHOWMAN 8-10.30pm


   <a href=""> 

   </a>

   <br>
   Charity showing of The Greatest Showman (PG) in aid of Young Dementia UK. Please bring family, friends, picnics, blankets and spread the word. General Admission tickets £20 including minimum £10 donation to Young Dementia UK. (Reg Charity 1085595)
All sound will be transmitted through wireless headphones which will be provided at ticket check.  Food and drink will hopefully be available on site more details closer to time.  Please feel free to bring your own picnics/drinks too.
This should be clickable so I can click to go to the url&#8230; 


</p>




  <!--<li>
    <h3 class="date">Sunday, 2nd September 2018 8:00 pm</h3>
    <div class="vevent">
    THE GREATEST SHOWMAN 8-10.30pm
    <p>Charity showing of The Greatest Showman (PG) in aid of Young Dementia UK. Please bring family, friends, picnics, blankets and spread the word. General Admission tickets £20 including minimum £10 donation to Young Dementia UK. (Reg Charity 1085595)</p>
<p>All sound will be transmitted through wireless headphones which will be provided at ticket check.  Food and drink will hopefully be available on site more details closer to time.  Please feel free to bring your own picnics/drinks too.</p>
<p><a href="https://www.cow-shed.com">This should be clickable so I can click to go to the url&#8230;</a></p>

    <a href=""> 

</a>

    </div>
  </li>-->
</ul>

cow shed 0 points

3 years ago

Thanks so much Jon. That helped me fix this.

In the end I added a separate field for the URL without striptags=true (I need striptags=true to get rid of the <p> tags so I can change the text colour on the description). Its a shame I cant have the URL without striptags but I can see now it wont work if I add that in.

So my working code is event.html and custom-listing-day.html. Bit clunky - I expect there is a better way, but at least this is working ok

Event.html :

<div class="vevent">

<h2 class="summary"><perch:events id="eventTitle" /></h2>

<p class="dtstart"><span class="value-title" title="<perch:events id="eventDateTime" format="c" />"><perch:events id="eventDateTime" format="%c" /></span></p>

<div class="description"><perch:events id="eventDescHTML" type="textarea" label="Text" markdown="true" editor="simplemde"  /></div>

<a href="<perch:events id="file" type="file" label="Optional : Event Document - eg flyer or Newsletter" order="1" /> "> 

<perch:events type="reportDesc" id="desc" label="Event Document Description" order="2"  /> </a>

<div class="descriptionUrl"><perch:events id="eventDescUrl" type="textarea" label="Enter Website Link in this field" markdown="true" editor="simplemde"  /></div>

</div>

and I call the events using custom-listing-day :


<perch:before>

<ul class="list-unstyled">

</perch:before>

<p class="white-text">

<span class="event-date">
    <perch:events id="eventDateTime" format="l, jS F Y g:i a" />
</span>  

 - <perch:events id="eventTitle" />


   <a href="<perch:events id="file" type="file" />"> 

   <perch:events type="reportDesc" id="desc"  required="true" /></a>

   <br>


    <perch:events id="eventDescHTML" striptags="true" encode="false" />

</p>
  <perch:events id="eventDescUrl"  encode="false" />
    <perch:noresults>
    <p class="white-text">
        There are no events scheduled at this time.</p>
</perch:noresults>

<perch:after></ul></perch:after>

Jonathan Elliman 27 points

3 years ago

Great news. Incidentally, why would you need to strip the p tags in your text output? Surely that defeats the point of having an editor field? Perhaps you could add the white text class to the containing element rather than the paragraph. Or you can target any p tags inside that container without having to add classes to each line with a sibling selector e.g. ul li > p or similar.

Jon