Create a profile for our listing!
The markup:
<If loop type=gravity_form_entry form_id=1>
<!-- Set up a list of profile names for use in the modal navigation -->
<List profileNames>
<Loop type=gravity_form_entry form_id=1 orderby=date_created order=desc>
<Item>
<Loop type=gravity_form_entry_fields entry_id="{Field id}" field_id="1,2">
<Loop field=value>
<Field text />
</Loop>
<If first> </If>
</Loop>
</Item>
</Loop>
</List>
<ul class="tt-loop" cols=3 id="profile-listing">
<Loop type=gravity_form_entry form_id=1 orderby=date_created order=desc paged=9>
<!-- Set multiselect social link values as variables to simplify using them in the layout -->
<Loop field=fields>
<If field=id is value=7>
<List profileSocial>
<Loop field=value>
<Item>
<Field value />
</Item>
</Loop>
</List>
</If>
</Loop>
<!-- Main profile card -->
<li class="tt-item tt-item-card">
<button class="tt-item-wrapper tt-item-link" onclick="MicroModal.show('modal-{Get loop=count}')">
<div class="tt-item-image tt-item-image-circle">
<Loop type=businesses include="{GField select id=5 value_key=value}">
<If field=image>
<div class="tt-item-image-badge">
<Field image size=thumbnail />
</div>
</If>
</Loop>
<img src="{GField select id=3 value_key=value}" />
</div>
<div class="tt-item-text">
<div class="tt-item-title">
<GField select id=1 value_key=text />
<GField select id=2 value_key=text />
</div>
<div class="tt-item-subtitle">
<Loop type=businesses include="{GField select id=5 value_key=value}">
<Field title />
</Loop>
</div>
<div class="tt-item-meta">
<div><span class="tt-item-meta-label">Sector: </span>
<GField select id=6 value_key=text />
</div>
</div>
<div class="tt-item-meta">
<ul class="tt-icon-list">
<Loop list=profileSocial>
<li><i class="icon-{Field}"></i></li>
</Loop>
</ul>
</div>
</div> <!-- / .tt-item-text -->
</button>
</li>
<!-- Modal powered by Micromodal.js -->
<div class="modal micromodal-slide" id="modal-{Get loop=count}" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__nav">
<If first>
<div class="modal__nav-empty"></div>
<Else />
<Set prevID><Math>
<Get loop=count /> - 1
</Math></Set>
<Set prevIndex><Math>
<Get loop=count /> - 2
</Math></Set>
<button class="tt-button-link prev" tabindex="2" onclick="MicroModal.close('modal-{Get loop=count}');MicroModal.show('modal-{Get prevID}')">
<Field name="{Get prevIndex}" list=profileNames />
</button>
</If>
<If last>
<div class="modal__nav-empty"></div>
<Else />
<Set nextID><Math>
<Get loop=count /> + 1
</Math></Set>
<button class="tt-button-link next" tabindex="3" onclick="MicroModal.close('modal-{Get loop=count}');MicroModal.show('modal-{Get nextID}')">
<Field name="{Get loop=count}" list=profileNames />
</button>
</If>
</div>
<div class="modal__container" tabindex="1" role="dialog" aria-modal="true" aria-labelledby="modal-{Get loop=count}-title">
<button class="modal__close" tabindex="4" aria-label="Close modal" data-micromodal-close></button>
<header class="modal__header">
<div class="tt-item-image tt-item-image-circle">
<Loop type=businesses include="{GField select id=5 value_key=value}">
<If field=image>
<div class="tt-item-image-badge">
<Field image size=thumbnail />
</div>
</If>
</Loop>
<img src="{GField select id=3 value_key=value}" />
</div>
<h2 class="modal__title" id="modal-{Get loop=count}-title">
<GField select id=1 value_key=text />
<GField select id=2 value_key=text />
</h2>
<div class="tt-item-subtitle">
<Loop type=businesses include="{GField select id=5 value_key=value}">
<Field title />
</Loop>
</div>
<div class="tt-item-meta">
<div><span class="tt-item-meta-label">Sector: </span>
<GField select id=6 value_key=text />
</div>
</div>
<div class="tt-item-meta">
<ul class="tt-icon-list">
<Loop list="{GField checkbox id=7}">
<Loop map="{Field}">
<li><i class="icon-{Field value}"></i></li>
</Loop>
</Loop>
</ul>
</div>
</header>
<main class="modal__content" id="modal-{Get loop=count}-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed fringilla ex, eu pulvinar urna.
Pellentesque quis orci non tellus facilisis scelerisque. Fusce ultricies justo nec ultricies lobortis.
Sed ullamcorper dui neque, ut laoreet nulla laoreet ac. Mauris massa nulla, pharetra et consectetur ut,
sodales eget diam. Ut facilisis ultricies elementum. Ut feugiat porttitor ante sit amet ultrices.
</p>
<p>
Mauris vel orci quam. Praesent congue tortor nisl, sit amet convallis justo tincidunt sit amet.
Nullam efficitur turpis nunc, id blandit elit dictum ac. Aenean eu convallis risus, eget suscipit lacus.
Quisque id nisi ac felis maximus tincidunt. Praesent dictum lectus arcu, quis efficitur elit tempor quis.
Sed rutrum vulputate metus, accumsan commodo eros ornare ac. Quisque sit amet elit ac quam viverra ornare
quis ut leo. Suspendisse consequat laoreet molestie. Aenean nec consectetur erat. Phasellus et metus tempus,
volutpat leo nec, sodales dolor. Integer magna diam, ultricies at dignissim nec, sagittis feugiat ligula.
</p>
</main>
</div>
</div>
</div> <!-- / .modal -->
</Loop>
</ul>
<If check="{Get loop=previous_total}" more_than value=9>
<PaginateButtons />
</If>
<Else />
No listings yet. Add one with the form!
</If>