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

Use Picture element to automatically choose webp

Browse source 
Remove loadOnView function as has to be remade for new picture element
Remove broken way of checking for Webp support
This commit is contained in:
Michał Gdula 2023-04-22 11:46:20 +00:00
parent 16df5bc255
commit 2cf7bc9091
10 changed files with 119 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

53
onlylegs/templates/group.html
View file

@ -4,7 +4,7 @@
{% if images %}
<meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}"/>
<meta name="twitter:image" content="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}">
<meta name="theme-color" content="rgb({{ images.0.colours.0.0 }}{{ images.0.colours.0.1 }}{{ images.0.colours.0.2 }})"/>
<meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>
<meta name="twitter:card" content="summary_large_image">
{% endif %}
@ -180,7 +180,7 @@
<style>
{% if images %}
.banner::after {
box-shadow: 0 calc(var(--rad) * -1) 0 0 rgb({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }});
box-shadow: 0 calc(var(--rad) * -1) 0 0 rgb{{ images.0.colours.0 }};
}
.banner-content p {
color: {{ text_colour }} !important;
@ -191,26 +191,24 @@
.banner-content .link {
background-color: {{ text_colour }} !important;
color: rgb({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}) !important;
color: rgb{{ images.0.colours.0 }} !important;
}
.banner-content .link:hover {
background-color: rgb({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}) !important;
background-color: rgb{{ images.0.colours.0 }} !important;
color: {{ text_colour }} !important;
}
.banner-filter {
background: linear-gradient(90deg, rgb({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}),
rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.3)) !important;
background: linear-gradient(90deg, rgb{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.3)) !important;
}
@media (max-width: 800px) {
.banner-filter {
background: linear-gradient(180deg, rgba({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}, 1),
rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.5)) !important;
background: linear-gradient(180deg, rgba{{ images.0.colours.0 }}), rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.5)) !important;
}
}
.navigation {
background-color: rgb({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}) !important;
background-color: rgb{{ images.0.colours.0 }} !important;
}
.navigation-item > i {
color: {{ text_colour }} !important;
@ -224,12 +222,17 @@
{% 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 %}"
/>
<picture>
<source srcset="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}?r=prev&e=webp">
<source srcset="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}?r=prev&e=png">
<img
src="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}?r=prev"
alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
onload="imgFade(this)"
style="opacity:0;"
fetchpriority="low"
/>
</picture>
<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>
@ -271,17 +274,21 @@
{% if images %}
<div class="gallery-grid">
{% for image in images %}
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('group.group_post', group_id=group.id, image_id=image.id) }}" style="background-color: rgb({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }})">
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('group.group_post', group_id=group.id, image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}">
<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="imgFade(this)"
style="opacity:0;"
id="lazy-load"
/>
<picture>
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
<img
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
onload="imgFade(this)"
style="opacity:0;"
fetchpriority="low"
/>
</picture>
</a>
{% endfor %}
</div>

44
onlylegs/templates/image.html
View file

@ -4,7 +4,7 @@
{% block head %}
<meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}"/>
<meta name="twitter:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}">
<meta name="theme-color" content="rgb({{ image.colours.0.0 }}{{ image.colours.0.1 }}{{ image.colours.0.2 }})"/>
<meta name="theme-color" content="rgb{{ image.colours.0 }}"/>
<meta name="twitter:card" content="summary_large_image">
<script type="text/javascript">
@ -84,28 +84,36 @@
{% 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;"
/>
<picture>
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
<img
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
alt="{{ image.alt }}"
onload="imgFade(this)"
style="opacity:0;"
/>
</picture>
<span></span>
</div>
<div class="image-grid">
<div class="image-block">
<div class="image-container">
<img
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
alt="{{ image.alt }}"
onload="imgFade(this)"
style="opacity:0;"
onerror="this.src='{{ url_for('static', filename='error.png')}}'"
{% if "File" in image.exif %}
width="{{ image.exif.File.Width.raw }}"
height="{{ image.exif.File.Height.raw }}"
{% endif %}
/>
<picture>
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
<img
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
alt="{{ image.alt }}"
onload="imgFade(this)"
style="opacity:0;"
onerror="this.src='{{ url_for('static', filename='error.png')}}'"
{% if "File" in image.exif %}
width="{{ image.exif.File.Width.raw }}"
height="{{ image.exif.File.Height.raw }}"
{% endif %}
/>
</picture>
</div>
<div class="pill-row">
{% if next_url %}<div><a class="pill-item" href="{{ next_url }}"><i class="ph ph-arrow-left"></i></a></div>{% endif %}

21
onlylegs/templates/index.html
View file

@ -36,18 +36,21 @@
{% if images %}
<div class="gallery-grid">
{% for image in images %}
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }})">
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}">
<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="imgFade(this)"
style="opacity:0;"
id="lazy-load"
/>
<picture>
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
<img
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
onload="imgFade(this)"
style="opacity:0;"
fetchpriority="low"
/>
</picture>
</a>
{% endfor %}
</div>

16
onlylegs/templates/layout.html
View file

@ -89,12 +89,16 @@
<a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}">
{% if current_user.picture %}
<span class="nav-pfp">
<img
src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon"
alt="Profile picture"
onload="imgFade(this)"
style="opacity:0;"
/>
<picture>
<source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=webp">
<source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=png">
<img
src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon"
alt="Profile picture"
onload="imgFade(this)"
style="opacity:0;"
/>
</picture>
</span>
{% else %}
<i class="ph-fill ph-folder-simple-user"></i>

26
onlylegs/templates/list.html
View file

@ -1,9 +1,7 @@
{% extends 'layout.html' %}
{% block nav_groups %}selected{% endblock %}
{% block head %}
{% if images %}
<meta name="theme-color" content="rgb({{ images.0.colours.0.0 }}{{ images.0.colours.0.1 }}{{ images.0.colours.0.2 }})"/>
{% endif %}
{% if images %}<meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>{% endif %}
{% if current_user.is_authenticated %}
<script type="text/javascript">
@ -118,7 +116,7 @@
{% if groups %}
<div class="gallery-grid">
{% for group in groups %}
<a id="group-{{ group.id }}" class="group-item" href="{{ url_for('group.group', group_id=group.id) }}" {% if group.images|length > 0 %} style="background-color: rgba({{ group.images.0.colours.0.0 }}, {{ group.images.0.colours.0.1 }}, {{ group.images.0.colours.0.2 }}, 0.4);" {% endif %}>
<a id="group-{{ group.id }}" class="group-item" href="{{ url_for('group.group', group_id=group.id) }}" {% if group.images|length > 0 %} style="background-color: rgba{{ group.images.0.colours.0 }};" {% endif %}>
<div class="image-filter">
<p class="image-subtitle">By {{ group.author.username }}</p>
<p class="image-title">{{ group.name }}</p>
@ -126,14 +124,18 @@
<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="imgFade(this)"
style="opacity:0;"
id="lazy-load"
class="data-{{ loop.index }}"
{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}
/>
<picture>
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
<img
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
class="data-{{ loop.index }}"
onload="imgFade(this)"
style="opacity:0;"
fetchpriority="low"
/>
</picture>
{% endfor %}
{% else %}
<img src="{{ url_for('static', filename='error.png') }}" class="loaded" alt="Error thumbnail"/>

44
onlylegs/templates/profile.html
View file

@ -4,9 +4,7 @@
<meta property="og:image" content="{{ url_for('media_api.media', path='pfp/' + user.picture) }}"/>
<meta name="twitter:image" content="{{ url_for('media_api.media', path='pfp/' + user.picture) }}">
{% endif %}
{% if user.colour %}
<meta name="theme-color" content="rgb({{ user.colour.0 }}, {{ user.colour.1 }}, {{ user.colour.2 }})"/>
{% endif %}
{% if user.colour %}<meta name="theme-color" content="rgb{{ user.colour }}"/>{% endif %}
<meta name="twitter:card" content="summary">
<script type="text/javascript">
@ -20,7 +18,7 @@
<style>
.banner-picture {
background-color: rgb({{ user.colour.0 }}, {{ user.colour.1 }}, {{ user.colour.2 }}) !important;
background-color: rgb{{ user.colour }} !important;
}
</style>
{% endblock %}
@ -35,13 +33,16 @@
<span class="banner-filter"></span>
<div class="banner-content">
{% if user.picture %}
<img
class="banner-picture"
src="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp"
alt="Profile picture"
onload="imgFade(this)"
style="opacity:0;"
/>
<picture class="banner-picture">
<source srcset="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp&e=webp">
<source srcset="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp&e=png">
<img
src="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp"
alt="Profile picture"
onload="imgFade(this)"
style="opacity:0;"
/>
</picture>
{% else %}
<img
class="banner-picture"
@ -71,18 +72,21 @@
<h1 class="gallery-header">Images</h1>
<div class="gallery-grid">
{% for image in images %}
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }})">
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}">
<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="imgFade(this)"
style="opacity:0;"
id="lazy-load"
/>
<picture>
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
<img
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
onload="imgFade(this)"
style="opacity:0;"
fetchpriority="low"
/>
</picture>
</a>
{% endfor %}
</div>