Open and close Loop using multiple blocks

Loops & Logic
1

Hi,

I am wondering if there is a way to be able to use multiple tangible blocks to create a layout, one where I can open and close the loop that looks something like this, which I’ve done with shortcodes?

eo-custom-event-list
eo-custom-event-list1290×653 25.5 KB

I’m guessing it would look something like this:

Open Tangible Loop Block

<Loop type=event custom_date_field=_eventorganiser_schedule_start_start custom_date_field_format="Y-m-d H:i:s" custom_date_field_compare=before custom_date_field_value=now sort_field="_eventorganiser_schedule_start_start" sort_type="date" sort_date_format="Y-m-d H:i:s" sort_order="desc">

Tangible Blocks to display data

Example Tangible block 1

<If field="image" exists>
  <Field image size=large />  
</If>

Example Tangible block 2

<h3><a href="{Field url}"><Field title /></a></h3>

Example Tangible block 3

<Date format="l, F j, Y"><Field _eventorganiser_schedule_start_start /></Date> at <Date format="g.i a"><Field _eventorganiser_schedule_start_start /></Date>

Example Tangible block 4

<p><Field excerpt auto=true /></p>

Close Tangible Loop Block

</Loop>

Is this something that exists or can be done?

2

Hi Dana,
This isn’t supported because your blocks and columns and groups and such add extra closed tags around the Loop tags, which isn’t valid HTML. If you were just listing a single post you could use a Loop Query Variable to set up the loop at the top of your page and make use of the same loop for all of your blocks without running additional database queries:

“Open” Tangible Loop:

<Set query=saved_event_loop count=1 type=event custom_date_field=_eventorganiser_schedule_start_start custom_date_field_format="Y-m-d H:i:s" custom_date_field_compare=before custom_date_field_value=now sort_field="_eventorganiser_schedule_start_start" sort_type="date" sort_date_format="Y-m-d H:i:s" sort_order="desc" />

Example Tangible block 1

<Loop query=saved_event_loop>
  <If field="image" exists>
    <Field image size=large />  
  </If>
</Loop>

However I imagine you want to list more than one event, and in the case of a loop with multiple events each of your blocks would be repeated one after the other instead of grouped the way it looks like you’re trying to build them. Since your layout is not too complex, I think it would be easier to simply create it in HTML:

<Loop type=event custom_date_field=_eventorganiser_schedule_start_start custom_date_field_format="Y-m-d H:i:s" custom_date_field_compare=before custom_date_field_value=now sort_field="_eventorganiser_schedule_start_start" sort_type="date" sort_date_format="Y-m-d H:i:s" sort_order="desc">
  <div class="my-item {Field post_class}">
     <If field=image>
       <div class="my-item-image"><Field image /></div>
    </If>
    <div class="my-item-content">
      <div class="my-item-title"><a href="{Field url}" class="my-item-link"><Field title /></a></div>
      <div class="my-item-meta">on <Date format="jS M Y"><Field _eventorganiser_schedule_start_start/></Date> at <Date format="g:i a"><Field _eventorganiser_schedule_start_start/></Date></div>
    </div>
  </div>
</Loop>

and use flex or grid to get the layout you’re looking for:

  .my-item {
    display: grid; /* create a grid container */
    grid-template-columns: 250px 1fr; /* define columns - the image has a fixed size while the content fills available space */
    align-items: center; /* vertically align content and image */
    gap: 20px; /* add a gap between the content and the image */
    position: relative; /* contain our link within the item */
  }
  .my-item-title a::after {
    content: ""; /* create a pseudo-element after the link to cover the whole card for better accessibility for keyboard users */
    position: absolute;
    inset: 0;
    display: block;
  }

You’ll have more control over responsive behaviour and exact positioning using HTML and CSS :slight_smile: Hope this helps somewhat! Looking forward to seeing what you build :smiley: