Overview
Dialogs offer a fantastic way to display additional information without needing to load
a new page. However, dynamically loading data into them used to require significant
JavaScript effort. Thankfully, those days are behind us!
Client Content
Below is the Lava template for the front-end client. Here we'll load the inital list of articles. When an
individual clicks "Read More" we'll show the full article.
{% contentchannelitem where:'ContentChannelId == {{ ConfigurationRigging.ArticleContentChannelId }}' limit:'10'%}
<div class="row">
{% for item in contentchannelitemItems%}
<div class="col-sm-12 col-md-4 d-flex">
<div class="article card d-flex flex-column justify-content-between rounded-lg overflow-hidden mb-3">
<div class="card-img-top position-relative">
<div class="card-overlay bg-cover w-100 h-100" style="background-image:url({{ item | Attribute:'Image','RawValue'}});"></div>
</div>
<div class="card-body">
<h5 class="card-title mb-1 text-bold">{{ item.Title}}</h5>
<p class="card-text small text-muted">{{ item | Attribute:'Author'}}</p>
<p class="card-text">{{ item | Attribute:'Summary'}}</p>
</div>
<div class="card-footer">
<a class="btn btn-primary btn-sm"
hx-trigger="click"
hx-get="^/helix-gallery/article-detail?articleKey={{ item.IdKey}}"
hx-target="#article-detail-modal"
data-toggle="modal"
data-target="#article-detail-modal">Read More</a>
</div>
</div>
</div>
{% endfor%}
</div>
{% endcontentchannelitem%}
<div id="article-detail-modal"
class="modal modal-blur fade"
style="display: none"
aria-hidden="false"
tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content"></div>
</div>
</div>
Endpoint Template
Here is the Lava template for the endpoint.
{% assign articleId = QueryString.articleKey | FromIdHash%}
{% contentchannelitem id:'{{ articleId }}' securityenabled:'false'%}
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<img class="w-100 rounded-lg" src="{{ contentchannelitem | Attribute:'Image','RawValue'}}">
<h5 class="mt-3 text-bold">{{ contentchannelitem.Title}}</h5>
<p>
{{ contentchannelitem.Content}}
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
{% endcontentchannelitem%}
Demo
Here's the working demo of this feature, currently paging five items at a time. For most use cases, you
may want to load more items simultaneously.