Fix lazy load & Update photo model
This commit is contained in:
parent
1017ca86b7
commit
8eca12ce11
3 changed files with 61 additions and 40 deletions
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue