nyymix/muistox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Edge problem

Browse source
This commit is contained in:
Nyymix 2025-04-26 21:58:57 +03:00
parent 7fa067063c
commit 1930863979
2 changed files with 10 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
gallery/templates/gallery/partials/parallax.html
View file

@ -2,30 +2,26 @@
{% load static %} {% load static %}
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; autoplay: true; animation: fade; min-height: 300;"> <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; autoplay: true; animation: fade; min-height: 300;">
<ul class="uk-slideshow-items"> <ul class="uk-slideshow-items">
{% random_photos_landscape as top_photos %} {% random_photos_landscape as top_photos %}
{% if top_photos %} {% if top_photos %}
{% for photo in top_photos %} {% for photo in top_photos %}
<li> <li>
{% with photo.aspect_ratio|default:2.33 as ratio %} <img src="{{ photo.photo_md.url }}"
<img
src="{{ photo.photo_sm.url }}"
srcset=" srcset="
{{ photo.photo_sm.url }} 480w, {{ photo.photo_sm.url }} 480w,
{{ photo.photo_md.url }} 1024w, {{ photo.photo_md.url }} 1024w,
{{ photo.photo_bg.url }} 1920w {{ photo.photo_bg.url }} 1920w
" "
sizes="(max-width: 640px) 480px, (max-width: 1200px) 1024px, 1920px" sizes="100vw"
width="1920" width="{{ photo.width }}"
height="823" height="{{ photo.height }}"
style="aspect-ratio: {{ ratio }};" style="aspect-ratio: 7 / 3;"
alt="Photo from {{ photo.album.name }} album" alt="Foto from {{ photo.album.name }} album"
title="{{ photo.album.name }}" title="{{ photo.album.name }}"
{% if forloop.first %} loading="eager" decoding="async" {% else %} loading="lazy" decoding="async" {% endif %} {% if forloop.first %} loading="eager" decoding="async" {% else %} loading="lazy" decoding="async" {% endif %}
uk-cover uk-cover />
class="lazyfade"
/>
{% endwith %}
</li> </li>
{% endfor %} {% endfor %}
{% else %} {% else %}
@ -33,7 +29,7 @@
<img src="{% static 'img/placeholder.png' %}" <img src="{% static 'img/placeholder.png' %}"
width="1920" height="823" width="1920" height="823"
style="aspect-ratio: 7 / 3;" style="aspect-ratio: 7 / 3;"
alt="Placeholder" uk-cover class="lazyfade" /> alt="Placeholder" uk-cover />
</li> </li>
{% endif %} {% endif %}
</ul> </ul>

10
static/css/muistox.css
View file

@ -37,14 +37,4 @@ body {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
}
.lazyfade {
opacity: 0;
transition: opacity 1s ease;
}
.lazyfade[loading="eager"],
.lazyfade[loading="lazy"]:not([src=""]) {
opacity: 1;
} }