<a href="#open-modal-{{ index }}-{{ pageno }}">
    <img src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="img-thumbnail" id="img-result-thumb-{{ index }}" />
</a>

<style type="text/css" media="screen">
#open-modal-{{ index }}-{{ pageno }}:target .image-container::before {
    background: url({{ image_proxify(result.img_src)|safe }}) no-repeat center/contain;
}
</style>

<div id="open-modal-{{ index }}-{{ pageno }}" class="modal-image">
    <div class="container modal-dialog">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 modal-header">
                <a {% if index != 1 %}href="#open-modal-{{ index-1 }}-{{ pageno }}"{% endif %}>
                    <span class="pull-left glyphicon glyphicon-chevron-left image-paging-left"></span>
                 </a>
                <a href="#open-modal-{{ index+1 }}-{{ pageno }}">
                    <span class="image-paging-right pull-right glyphicon glyphicon-chevron-right"></span>
                </a>
                <h4 class="modal-title image-title">{{ result.title|striptags }}</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 modal-body">
                <a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><div class="image-container"></div></a>
            </div>
        </div>
        {% if result.content %}
        <div class="row">
            <div class="col-md-12 hidden-sm hidden-xs modal-body">
                <p class="result-content">{{ result.content|safe }}</p>
                {% if result.author %}<span class="photo-author">{{ result.author }}</span><br />{% endif %}
            </div>
        </div>
        {% endif %}
        <div class="modal-footer">
            <div class="row">
                <div class="col-md-10 col-xs-12">
                    <p class="text-muted pull-left">{{ result.pretty_url }}</p>
                </div>
                <div class="col-md-2 hidden-sm hidden-xs">
                    <span class="label label-default pull-right">{{ result.engine }}</span>
                </div>
            </div>
            <div class="row">
                <a href="{{ result.url }}" class="btn btn-default">
                    {{ _('View source') }}
                </a>
            </div>
        </div>
    </div>
    <a href="#img-result-thumb-{{ index }}-{{ pageno }}" class="modal-close"></a>
</div>