Optimize templates & clean code
This commit is contained in:
parent
0c1c888547
commit
86d9ca5066
11 changed files with 98 additions and 48 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue