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

Optimize templates & clean code

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
gallery/admin.py
View file

@ -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')

1
gallery/context_processors.py
View file

@ -18,4 +18,3 @@ def site_config(request):
config = {}
return {'site_config': config}

2
gallery/models/album.py
View file

@ -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}')

1
gallery/models/location.py
View file

@ -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)

1
gallery/models/photo.py
View file

@ -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:

8
gallery/templates/gallery/album_list.html
View file

@ -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>

8
gallery/templates/gallery/album_search.html
View file

@ -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>

13
gallery/templates/gallery/main.html
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,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>

23
gallery/templatetags/image_tags.py
View file

@ -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)

28
static/css/muistox.css
View file

@ -1,8 +1,10 @@
body {
font: 400 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
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);
}
}