Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 03:26:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Optimise loading and reduce image size

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

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>