failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2024-12-28 02:16:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimise loading and reduce image size

Browse source
This commit is contained in:
Michał 2023-04-22 10:29:57 +00:00
parent df2b2091ec
commit 16df5bc255
9 changed files with 59 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
onlylegs/static/js/index.js
View file

@ -1,7 +1,9 @@
// fade in images
function imgFade(obj, time = 250) {
obj.style.transition = `opacity ${time}ms`;
obj.style.opacity = 1;
function imgFade(obj, time = 200) {
obj.style.opacity = null;
obj.style.animation = `imgFadeIn ${time}ms`;
setTimeout(() => { obj.style.animation = null; }, time);
}
// Lazy load images when they are in view
function loadOnView() {

8
onlylegs/static/sass/animations.sass
View file

@ -9,3 +9,11 @@
left: -100%
100%
left: 100%
@keyframes imgFadeIn
0%
opacity: 0
// filter: blur(0.5rem)
100%
opacity: 1
// filter: blur(0)

13
onlylegs/static/sass/components/gallery.sass
View file

@ -88,15 +88,8 @@
object-position: center
background-color: RGB($bg-bright)
filter: blur(0.5rem)
opacity: 0
transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
&.loaded
filter: blur(0)
opacity: 1
&:after
content: ""
display: block
@ -187,15 +180,9 @@
background-color: RGB($bg-bright)
border-radius: $rad-inner
box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1)
filter: blur(0.5rem)
opacity: 0
transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
&.loaded
filter: blur(0)
opacity: 1
&.size-1
.data-1
transform: scale(0.8) rotate(3deg)

15
onlylegs/templates/group.html
View file

@ -224,7 +224,12 @@
{% block content %}
{% if images %}
<div class="banner">
<img src="{{ url_for('media_api.media', path='uploads/' + images.0.filename ) }}?r=prev" onload="imgFade(this)" style="opacity:0;" alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"/>
<img
src="{{ url_for('media_api.media', path='uploads/' + images.0.filename ) }}?r=prev"
onload="imgFade(this)"
style="opacity:0;"
alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
/>
<span class="banner-filter"></span>
<div class="banner-content">
<p class="banner-info"><a href="{{ url_for('profile.profile', id=group.author.id) }}" class="link">By {{ group.author.username }}</a></p>
@ -270,7 +275,13 @@
<div class="image-filter">
<p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div>
<img alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}" data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
<img
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
onload="imgFade(this)"
style="opacity:0;"
id="lazy-load"
/>
</a>
{% endfor %}
</div>

9
onlylegs/templates/image.html
View file

@ -84,7 +84,12 @@
{% endblock %}
{% block content %}
<div class="background">
<img src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev" alt="{{ image.alt }}" onload="imgFade(this)" style="opacity:0;"/>
<img
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
alt="{{ image.alt }}"
onload="imgFade(this)"
style="opacity:0;"
/>
<span></span>
</div>
<div class="image-grid">
@ -94,7 +99,7 @@
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
alt="{{ image.alt }}"
onload="imgFade(this)"
style="opacity: 0;"
style="opacity:0;"
onerror="this.src='{{ url_for('static', filename='error.png')}}'"
{% if "File" in image.exif %}
width="{{ image.exif.File.Width.raw }}"

9
onlylegs/templates/index.html
View file

@ -40,7 +40,14 @@
<div class="image-filter">
<p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div>
<img fetchpriority="low" alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}" data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
<img
fetchpriority="low"
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
onload="imgFade(this)"
style="opacity:0;"
id="lazy-load"
/>
</a>
{% endfor %}
</div>

9
onlylegs/templates/list.html
View file

@ -126,7 +126,14 @@
<div class="images size-{{ group.images|length }}">
{% if group.images|length > 0 %}
{% for image in group.images %}
<img data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load" class="data-{{ loop.index }}" {% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}/>
<img
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
onload="imgFade(this)"
style="opacity:0;"
id="lazy-load"
class="data-{{ loop.index }}"
{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}
/>
{% endfor %}
{% else %}
<img src="{{ url_for('static', filename='error.png') }}" class="loaded" alt="Error thumbnail"/>

9
onlylegs/templates/profile.html
View file

@ -75,7 +75,14 @@
<div class="image-filter">
<p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div>
<img fetchpriority="low" alt="{{ image.alt }}" data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
<img
fetchpriority="low"
alt="{{ image.alt }}"
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
onload="imgFade(this)"
style="opacity:0;"
id="lazy-load"
/>
</a>
{% endfor %}
</div>

2
onlylegs/utils/generate_image.py
View file

@ -33,7 +33,7 @@ def generate_thumbnail(file_path, resolution, ext=None):
if resolution in ["prev", "preview"]:
res_x, res_y = (1920, 1080)
elif resolution in ["thumb", "thumbnail"]:
res_x, res_y = (400, 400)
res_x, res_y = (300, 300)
elif resolution in ["pfp", "profile"]:
res_x, res_y = (150, 150)
elif resolution in ["icon", "favicon"]: