Optimize templates & clean code

This commit is contained in:
Nyymix 2025-04-26 20:39:57 +03:00
parent 0c1c888547
commit 86d9ca5066
11 changed files with 98 additions and 48 deletions

View file

@ -30,15 +30,19 @@
<!-- Album cover image -->
<div class="uk-card-media-top">
<a href="{{ album.get_absolute_url }}">
{% with album|cover_image_data as img %}
<img
src="{{ img.url }}"
width="{{ img.width }}"
height="{{ img.height }}"
style="aspect-ratio: {{ img.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy">
{% with album.cover|photo_image_data as img %}
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
<img
src="{{ img.url }}"
width="{{ img.width }}"
height="{{ img.height }}"
style="aspect-ratio: {{ img.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy"
decoding="async"
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
</div>
{% endwith %}
</a>
</div>

View file

@ -31,15 +31,19 @@
<!-- Album cover image -->
<div class="uk-card-media-top">
<a href="{{ album.get_absolute_url }}">
{% with album|cover_image_data as img %}
<img
src="{{ img.url }}"
width="{{ img.width }}"
height="{{ img.height }}"
style="aspect-ratio: {{ img.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy">
{% with album.cover|photo_image_data as img %}
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
<img
src="{{ img.url }}"
width="{{ img.width }}"
height="{{ img.height }}"
style="aspect-ratio: {{ img.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy"
decoding="async"
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
</div>
{% endwith %}
</a>
</div>

View file

@ -15,6 +15,7 @@
<!-- Favorite random portrait photos -->
{% load top_tags %}
{% load image_tags %}
{% random_favorite_photos_portrait 10 as top_portrait_photos %}
{% if top_portrait_photos %}
@ -22,11 +23,13 @@
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
{% for photo in top_portrait_photos %}
{% with photo|photo_image_data as data %}
<div>
<a href="{{ photo.get_absolute_url }}">
<img src="{{ photo.photo_md.url }}" alt="{{ photo.album.slug }}" width="400" height="600" style="object-fit: cover;">
<img src="{{ data.url }}" alt="{{ photo.album.slug }}" width="{{ data.width }}" height="{{ data.height }}" style="object-fit: cover;" loading="lazy">
</a>
</div>
{% endwith %}
{% endfor %}
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
@ -46,15 +49,19 @@
<!-- Album cover image -->
<div class="uk-card-media-top">
<a href="{{ album.get_absolute_url }}">
{% with album|cover_image_data as img %}
<img
src="{{ img.url }}"
width="{{ img.width }}"
height="{{ img.height }}"
style="aspect-ratio: {{ img.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy">
{% with album.cover|photo_image_data as img %}
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
<img
src="{{ img.url }}"
width="{{ img.width }}"
height="{{ img.height }}"
style="aspect-ratio: {{ img.aspect_ratio }};"
alt="Cover image for {{ album.name }}"
title="{{ album.name }}"
loading="lazy"
decoding="async"
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
</div>
{% endwith %}
</a>
</div>