Fix lazy load & Update photo model

This commit is contained in:
Nyymix 2025-03-19 16:37:50 +02:00
parent 1017ca86b7
commit 8eca12ce11
3 changed files with 61 additions and 40 deletions

View file

@ -27,20 +27,24 @@
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">
{% for photo in photos %}
<a href="{{ photo.get_absolute_url }}">
<img
loading="lazy"
src="{{ photo.photo_sm.url }}"
srcset="
{{ photo.photo_sm.url }} 320w,
{{ photo.photo_md.url }} 720w,
{{ photo.photo_bg.url }} 1920w
"
sizes="(max-width: 640px) 320px,
(max-width: 960px) 720px,
1920px"
alt="{{ photo.album.name }} - {{ photo.slug }}">
</a>
<a href="{{ photo.get_absolute_url }}">
<img
loading="lazy"
src="{{ photo.photo_sm.url }}"
srcset="
{{ photo.photo_sm.url }} 320w,
{{ photo.photo_md.url }} 720w,
{{ photo.photo_bg.url }} 1920w
"
sizes="(max-width: 640px) 50vw,
(max-width: 960px) 33vw,
(max-width: 1200px) 25vw,
20vw"
width="{{ photo.width }}"
height="{{ photo.height }}"
style="aspect-ratio: {{ photo.aspect_ratio }};"
alt="{{ photo.album.name }} - {{ photo.slug }}">
</a>
{% endfor %}
</div>

View file

@ -31,10 +31,14 @@
{{ photo.photo_sm.url }} 320w,
{{ photo.photo_md.url }} 720w,
{{ photo.photo_bg.url }} 1920w
"
sizes="(max-width: 640px) 320px,
(max-width: 960px) 720px,
1920px"
"
sizes="(max-width: 640px) 50vw,
(max-width: 960px) 33vw,
(max-width: 1200px) 25vw,
20vw"
width="{{ photo.width }}"
height="{{ photo.height }}"
style="aspect-ratio: {{ photo.aspect_ratio }};"
alt="{{ photo.album.name }} - {{ photo.slug }}">
</a>
{% endfor %}