Forum
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>
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 ofperch: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)Revised but still not working.
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)
To break it down to a simple example:
Does that give a rough representation of what you're after?