Optimize templates & clean code
This commit is contained in:
parent
0c1c888547
commit
86d9ca5066
11 changed files with 98 additions and 48 deletions
|
|
@ -61,6 +61,7 @@ class LocationAdmin(admin.ModelAdmin):
|
|||
search_fields = ('place', 'city__name')
|
||||
list_per_page = 30
|
||||
|
||||
|
||||
class AlbumAdmin(admin.ModelAdmin):
|
||||
prepopulated_fields = {'slug': ('name',)}
|
||||
list_display = ('name', 'location', 'album_date', 'is_public', 'upload_link', 'thumbnail')
|
||||
|
|
|
|||
|
|
@ -18,4 +18,3 @@ def site_config(request):
|
|||
config = {}
|
||||
|
||||
return {'site_config': config}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,4 +65,4 @@ class Album(models.Model):
|
|||
|
||||
@receiver(post_save, sender=Album)
|
||||
def delete_album_cover_cache(sender, instance, **kwargs):
|
||||
cache.delete(f'cover_image_data_{instance.pk}')
|
||||
cache.delete(f'photo_md_image_data_{instance.pk}')
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ class Location(models.Model):
|
|||
unique_together = ('place', "city")
|
||||
ordering = ['city']
|
||||
|
||||
|
||||
def __str__(self):
|
||||
if self.place:
|
||||
return '{0}, {1}'.format(self.city, self.place)
|
||||
|
|
|
|||
|
|
@ -79,7 +79,6 @@ class Photo(models.Model):
|
|||
return f'{self.slug} ({self.orientation}) {self.is_favorite}'
|
||||
|
||||
|
||||
|
||||
@receiver(post_save, sender=Photo)
|
||||
def handle_photo_creation(sender, instance, created, **kwargs):
|
||||
if not created:
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@
|
|||
<!-- Album cover image -->
|
||||
<div class="uk-card-media-top">
|
||||
<a href="{{ album.get_absolute_url }}">
|
||||
{% with album|cover_image_data as img %}
|
||||
{% with album.cover|photo_image_data as img %}
|
||||
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
|
||||
<img
|
||||
src="{{ img.url }}"
|
||||
width="{{ img.width }}"
|
||||
|
|
@ -38,7 +39,10 @@
|
|||
style="aspect-ratio: {{ img.aspect_ratio }};"
|
||||
alt="Cover image for {{ album.name }}"
|
||||
title="{{ album.name }}"
|
||||
loading="lazy">
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
|
||||
</div>
|
||||
{% endwith %}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@
|
|||
<!-- Album cover image -->
|
||||
<div class="uk-card-media-top">
|
||||
<a href="{{ album.get_absolute_url }}">
|
||||
{% with album|cover_image_data as img %}
|
||||
{% with album.cover|photo_image_data as img %}
|
||||
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
|
||||
<img
|
||||
src="{{ img.url }}"
|
||||
width="{{ img.width }}"
|
||||
|
|
@ -39,7 +40,10 @@
|
|||
style="aspect-ratio: {{ img.aspect_ratio }};"
|
||||
alt="Cover image for {{ album.name }}"
|
||||
title="{{ album.name }}"
|
||||
loading="lazy">
|
||||
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,7 +49,8 @@
|
|||
<!-- Album cover image -->
|
||||
<div class="uk-card-media-top">
|
||||
<a href="{{ album.get_absolute_url }}">
|
||||
{% with album|cover_image_data as img %}
|
||||
{% with album.cover|photo_image_data as img %}
|
||||
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
|
||||
<img
|
||||
src="{{ img.url }}"
|
||||
width="{{ img.width }}"
|
||||
|
|
@ -54,7 +58,10 @@
|
|||
style="aspect-ratio: {{ img.aspect_ratio }};"
|
||||
alt="Cover image for {{ album.name }}"
|
||||
title="{{ album.name }}"
|
||||
loading="lazy">
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
|
||||
</div>
|
||||
{% endwith %}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,24 +6,36 @@ from django.templatetags.static import static
|
|||
|
||||
register = template.Library()
|
||||
|
||||
@register.filter
|
||||
def cover_image_data(album):
|
||||
|
||||
cache_key = f'cover_image_data_{album.pk}'
|
||||
@register.filter
|
||||
def photo_image_data(photo):
|
||||
"""
|
||||
Generate resized image data for Photo objects.
|
||||
"""
|
||||
if not photo:
|
||||
return {
|
||||
"url": static("img/placeholder.png"),
|
||||
"width": 1200,
|
||||
"height": 800,
|
||||
"aspect_ratio": round(1200 / 800, 3),
|
||||
"is_placeholder": True,
|
||||
}
|
||||
|
||||
cache_key = f'photo_md_image_data_{photo.pk}'
|
||||
data = cache.get(cache_key)
|
||||
|
||||
if data:
|
||||
return data
|
||||
|
||||
photo = getattr(album, "cover", None)
|
||||
max_w, max_h = 720, 720
|
||||
|
||||
if not photo or not photo.width or not photo.height:
|
||||
if not photo.width or not photo.height:
|
||||
data = {
|
||||
"url": static("img/placeholder.png"),
|
||||
"width": 1200,
|
||||
"height": 800,
|
||||
"aspect_ratio": round(1200 / 800, 3),
|
||||
"is_placeholder": True,
|
||||
}
|
||||
else:
|
||||
aspect = photo.aspect_ratio
|
||||
|
|
@ -39,6 +51,7 @@ def cover_image_data(album):
|
|||
"width": w,
|
||||
"height": h,
|
||||
"aspect_ratio": round(aspect, 3),
|
||||
"is_placeholder": False,
|
||||
}
|
||||
|
||||
cache.set(cache_key, data, 60 * 60 * 24)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ body {
|
|||
font: 400 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
|
||||
.uk-navbar-item,
|
||||
.uk-navbar-nav>li>a,
|
||||
.uk-navbar-toggle {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -14,3 +16,25 @@ body {
|
|||
.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
|
||||
margin: 0 10px 0 calc(10px - 4px);
|
||||
}
|
||||
|
||||
.uk-blur img {
|
||||
filter: blur(8px);
|
||||
transform: scale(1.05);
|
||||
transition: filter 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.8s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue