Step 4: Add Images

You can add images to your event tiles, as shown in the example below.

To do so, simply retrieve images from the appropriate field in Yext using Handlebars. The code below shows how to add the first photo from your Event’s photos field to the event’s tile:

<script id="result-template" type="text/template">
    <div class="container mb-4">
        <div class="row border" style="border-radius: 10px;">
            <div class="col px-0 background-image" style="background-image: url('{{Event.photos.0.url}}'); border-top-left-radius: 10px; border-bottom-left-radius: 10px;">
            </div>

            <div class="col-8 px-3 pt-3">
                <h4 class="card-text">{{Event.name}}</h4>
                <p class="card-text"><strong>{{formatDate Event.startDateTime day="numeric" month="long" year="numeric"}}</strong></p>
                <p class="card-text description">{{Event.description}}</p>

                <div class="event-tickets pb-3">
                    <a class="btn btn-outline-secondary" role="button" href="{{Event.url}}">View Website</a> {{#if Event.ticketUrl}}
                    <a class="btn btn-outline-secondary" role="button" href="{{Event.ticketUrl}}">Get Tickets</a> {{/if}}
                </div>
            </div>
        </div>
    </div>
</script>

<% elem.innerText %>