Add lazy loading on thumbnails

This commit is contained in:
Alexandre Iooss 2021-12-05 13:37:54 +01:00
parent 093ddf8cfd
commit 989c1803fd

View file

@ -67,7 +67,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
<div class="card-body row" id="lightgallery"> <div class="card-body row" id="lightgallery">
{% for photo in photos %} {% for photo in photos %}
<a class="col-6 col-md-3 mb-2 text-center" href="{{ photo.get_absolute_url }}" data-src="{{ photo.get_display_url }}" data-download-url="{{ photo.image.url }}"> <a class="col-6 col-md-3 mb-2 text-center" href="{{ photo.get_absolute_url }}" data-src="{{ photo.get_display_url }}" data-download-url="{{ photo.image.url }}">
<img src="{{ photo.get_thumbnail_url }}" class="img-thumbnail" alt="{{ photo.title }}{% if photo.date_taken %} - {{ photo.date_taken|date }} {{ photo.date_taken|time }}{% endif %} - {{ photo.extended.owner.get_full_name }}{% if photo.extended.license %} - {{ photo.extended.license }}{% endif %}"> <img src="{{ photo.get_thumbnail_url }}" loading="lazy" class="img-thumbnail" alt="{{ photo.title }}{% if photo.date_taken %} - {{ photo.date_taken|date }} {{ photo.date_taken|time }}{% endif %} - {{ photo.extended.owner.get_full_name }}{% if photo.extended.license %} - {{ photo.extended.license }}{% endif %}">
</a> </a>
{% endfor %} {% endfor %}
</div> </div>