<div x-data=“{ open: false }”>
<a @click="open = true" title="View large image"> <figure class="image {{ include.ratio | default: is-16by9 }}"> <img src="{{ include.link | absolute_url }}" alt="{{ include.alt }}"> </figure> </a> <div class="modal" :class="{ 'is-active': open }"> <div class="modal-background" @click="open = false"></div> <div class="modal-content"> {% if include.large_link %} <img src="{{ include.large_link | absolute_url }}" alt="{{ include.alt }}"> {% else %} <img src="{{ include.link | absolute_url }}" alt="{{ include.alt }}"> {% endif %} </div> <button class="modal-close is-large" aria-label="close" @click="{ open = false }"></button> </div>
</div>