Forum

Thread tagged as: Question

Using perch:if different

Trying to find the best way to to create listings where each day can have the following states (with photo, no-photo or multiple events in one day) I can get the photo part working, but can not seem to get the items with date to use my ELSE part of my template. Any suggestions would be appreciated.

<perch:before>
<div class="flexwrapper">
</perch:before> 

<perch:if different="eventDateTime" format="j"> <!--*If day changes*-->

          <perch:if exists="image">
                  <div class="flex-item">
                      <div class="crop-height">
                          <img src="<perch:content id="image" type="image" label="Image" width="640" height="480" crop="true" density="2" quality="20" sharpen="2" order="4" />" class="scale">
                      </div>
                      <div class="event-title"><perch:content id="eventTitle" /></div>

               <perch:else />
                   <div class="flex-item no-image">
                   <hr />
                   <div class="event-title"><perch:content id="eventTitle" type="text" /></div>
                   <hr />
              </perch:if>

                      <div class="event-time"><perch:content id="eventDateTime" type="date" format="g:i a" /><perch:if exists="eventEnd_User">
                        - <perch:content id="eventEnd_User" type="date" format="g:i a" /></div>
                      <div class="event-description">
                          <perch:content id="eventDescHTML" type="textarea" encode="false" words="25" append="..." />
                      </div>
                      <div class="event-date-container">
                          <div class="event-date_day_textual"><perch:content id="eventDateTime" format="D" /></div>
                          <hr />
                          <div class="event-date_day"><perch:content id="eventDateTime" format="j" /></div>
                      </div>
                  </div><!--/Single Event Day*-->
          <perch:after>
          </div><!--*flexwrapper*-->
          </perch:after>


<perch:else /> <!--*Stack multi events in single flex-item*-->

    <div class="flex-item no-image multievent">
           <hr />
           <div class="event-title"><perch:content id="eventTitle" /></div>
           <div class="event-time"><perch:content id="eventDateTime" format="g:i a" /><perch:if exists="eventEnd_User">
            - <perch:content id="eventEnd_User" type="text" label="Ending time" /></div>
           <hr />
       <perch:after><!--*Use same day for all items inside one flex-item*-->
           <div class="event-date-container">
               <div class="event-date_day_textual"><perch:content id="eventDateTime" format="D" /></div>
               <div class="event-date_day"><perch:content id="eventDateTime" format="j" /></div>
           </div>
       </div> <!--*/Multi Event Day*-->
     </div> <!--*flexwrapper*-->
       </perch:after>
</perch:if>
Seth Girardin

Seth Girardin 0 points

  • 5 years ago
Simon Clay

Simon Clay 127 points

You seem to have opened and closed a new perch:if before closing the last perch:else. That might be causing an issue.

Simon Clay said:

You seem to have opened and closed a new perch:if before closing the last perch:else. That might be causing an issue.

Thanks Simon. I think I fixed what you were talking about. Still not sure if should be using perch:if different or some other version of perch:if. I am trying to make a event listing grid using Runway. Where all dates are unique cards and days with multiple events get listed on a single day card. (shown below with same days on separate cards)

listing example

Revised but still not working.

<perch:before>
<div class="flexwrapper">
</perch:before> 

<perch:if different="eventDateTime" format="j"><!--*If day changes*-->

          <perch:if exists="image">
                  <div class="flex-item">
                      <div class="crop-height">
                          <img src="<perch:content id="image" type="image" label="Image" width="640" height="480" crop="true" density="2" quality="20" sharpen="2" order="4" />" class="scale">
                      </div>
                      <div class="event-title"><perch:content id="eventTitle" /></div>
         <perch:else />
                   <div class="flex-item no-image">
                   <hr />
                   <div class="event-title"><perch:content id="eventTitle" type="text" /></div>
                   <hr />
         </perch:if><!--*/If image exists*-->

                      <div class="event-time"><perch:content id="eventDateTime" type="date" format="g:i a" /><perch:if exists="eventEnd_User">
                        - <perch:content id="eventEnd_User" type="date" format="g:i a" /></perch:if></div>
                      <div class="event-description">
                          <perch:content id="eventDescHTML" type="textarea" encode="false" words="25" append="..." />
                      </div>
                      <div class="event-date-container">
                          <div class="event-date_day_textual"><perch:content id="eventDateTime" format="D" /></div>
                          <hr />
                          <div class="event-date_day"><perch:content id="eventDateTime" format="j" /></div>
                      </div>
                  </div><!--/Single Event Day*-->          

<perch:else /><!--*Stack same day events in single flex-item listing*-->

    <div class="flex-item no-image multievent">
           <hr />
           <div class="event-title"><perch:content id="eventTitle" /></div>
           <div class="event-time"><perch:content id="eventDateTime" format="g:i a" /><perch:if exists="eventEnd_User">
            - <perch:content id="eventEnd_User" type="text" label="Ending time" /></perch:if></div>
           <hr />

           <div class="event-date-container"><!--*Use same day for all items inside flex-item*-->               <div class="event-date_day_textual"><perch:content id="eventDateTime" format="D" /></div>
               <div class="event-date_day"><perch:content id="eventDateTime" format="j" /></div>
           </div>
       </div><!--*/Multi Event Day*-->       

</perch:if>

<perch:after>
</div><!--*/flexwrapper*-->
</perch:after>
Drew McLellan

Drew McLellan 2638 points
Perch Support

In what way isn't it working?

I can't sort out how to get events of the same day (eg 27th) to show up in my perch:else on a single card.

What I'm looking to have happen: (note red box, non-working mockup)

grid2

Drew McLellan

Drew McLellan 2638 points
Perch Support

To break it down to a simple example:

<perch:if different="eventDateTime" format="j">
    <perch:content id="eventDateTime" type="date" format="g:i a" />
</perch:if>
<perch:content id="eventTitle" />

Does that give a rough representation of what you're after?