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

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

@ -5,26 +5,8 @@ function imgFade(obj, time = 200) {
setTimeout(() => { obj.style.animation = null; }, time); setTimeout(() => { obj.style.animation = null; }, time);
} }
// Lazy load images when they are in view
function loadOnView() {
const lazyLoad = document.querySelectorAll('#lazy-load');
const webpSupport = checkWebpSupport();
for (let i = 0; i < lazyLoad.length; i++) {
const image = lazyLoad[i];
if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
if (!image.src && webpSupport) {
image.src = `${image.getAttribute('data-src')}&e=webp`;
} else if (!image.src) {
image.src = image.getAttribute('data-src');
}
}
}
}
window.onload = function () { window.onload = function () {
loadOnView();
const times = document.querySelectorAll('.time'); const times = document.querySelectorAll('.time');
for (let i = 0; i < times.length; i++) { for (let i = 0; i < times.length; i++) {
// Remove milliseconds // Remove milliseconds
@ -70,8 +52,6 @@ window.onload = function () {
} }
}; };
window.onscroll = function () { window.onscroll = function () {
loadOnView();
// Top Of Page button // Top Of Page button
const topOfPage = document.querySelector('.top-of-page'); const topOfPage = document.querySelector('.top-of-page');
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
@ -90,6 +70,3 @@ window.onscroll = function () {
} }
} }
}; };
window.onresize = function () {
loadOnView();
};

10
onlylegs/static/js/webp.js
View file

@ -1,10 +0,0 @@
function checkWebpSupport() {
let webpSupport = false;
try {
webpSupport = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
} catch (e) {
webpSupport = false;
}
return webpSupport;
}

4
onlylegs/static/sass/components/image-view/image.sass
View file

@ -1,4 +1,4 @@
.image-container .image-container, picture
margin: auto margin: auto
width: 100% width: 100%
@ -20,7 +20,7 @@
object-position: center object-position: center
@media (max-width: 1100px) @media (max-width: 1100px)
.image-container .image-container, picture
margin: 0 auto margin: 0 auto
max-height: 69vh max-height: 69vh

2
onlylegs/static/sass/components/settings.sass
View file

@ -26,4 +26,4 @@
padding: 0 padding: 0
font-size: 1.25rem font-size: 1.25rem
font-weight: 700 font-weight: 700

53
onlylegs/templates/group.html
View file

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

44
onlylegs/templates/image.html
View file

@ -4,7 +4,7 @@
{% block head %} {% block head %}
<meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}"/> <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="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"> <meta name="twitter:card" content="summary_large_image">
<script type="text/javascript"> <script type="text/javascript">
@ -84,28 +84,36 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="background"> <div class="background">
<img <picture>
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
alt="{{ image.alt }}" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
onload="imgFade(this)" <img
style="opacity:0;" src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
/> alt="{{ image.alt }}"
onload="imgFade(this)"
style="opacity:0;"
/>
</picture>
<span></span> <span></span>
</div> </div>
<div class="image-grid"> <div class="image-grid">
<div class="image-block"> <div class="image-block">
<div class="image-container"> <div class="image-container">
<img <picture>
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
alt="{{ image.alt }}" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
onload="imgFade(this)" <img
style="opacity:0;" src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
onerror="this.src='{{ url_for('static', filename='error.png')}}'" alt="{{ image.alt }}"
{% if "File" in image.exif %} onload="imgFade(this)"
width="{{ image.exif.File.Width.raw }}" style="opacity:0;"
height="{{ image.exif.File.Height.raw }}" onerror="this.src='{{ url_for('static', filename='error.png')}}'"
{% endif %} {% if "File" in image.exif %}
/> width="{{ image.exif.File.Width.raw }}"
height="{{ image.exif.File.Height.raw }}"
{% endif %}
/>
</picture>
</div> </div>
<div class="pill-row"> <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 %} {% 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 %} {% if images %}
<div class="gallery-grid"> <div class="gallery-grid">
{% for image in images %} {% 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"> <div class="image-filter">
<p class="image-title"><span class="time">{{ image.created_at }}</span></p> <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div> </div>
<img <picture>
fetchpriority="low" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" <img
onload="imgFade(this)" src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
style="opacity:0;" alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
id="lazy-load" onload="imgFade(this)"
/> style="opacity:0;"
fetchpriority="low"
/>
</picture>
</a> </a>
{% endfor %} {% endfor %}
</div> </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 %}"> <a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}">
{% if current_user.picture %} {% if current_user.picture %}
<span class="nav-pfp"> <span class="nav-pfp">
<img <picture>
src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon" <source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=webp">
alt="Profile picture" <source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=png">
onload="imgFade(this)" <img
style="opacity:0;" src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon"
/> alt="Profile picture"
onload="imgFade(this)"
style="opacity:0;"
/>
</picture>
</span> </span>
{% else %} {% else %}
<i class="ph-fill ph-folder-simple-user"></i> <i class="ph-fill ph-folder-simple-user"></i>

26
onlylegs/templates/list.html
View file

@ -1,9 +1,7 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block nav_groups %}selected{% endblock %} {% block nav_groups %}selected{% endblock %}
{% block head %} {% block head %}
{% if images %} {% if images %}<meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>{% endif %}
<meta name="theme-color" content="rgb({{ images.0.colours.0.0 }}{{ images.0.colours.0.1 }}{{ images.0.colours.0.2 }})"/>
{% endif %}
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<script type="text/javascript"> <script type="text/javascript">
@ -118,7 +116,7 @@
{% if groups %} {% if groups %}
<div class="gallery-grid"> <div class="gallery-grid">
{% for group in groups %} {% 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"> <div class="image-filter">
<p class="image-subtitle">By {{ group.author.username }}</p> <p class="image-subtitle">By {{ group.author.username }}</p>
<p class="image-title">{{ group.name }}</p> <p class="image-title">{{ group.name }}</p>
@ -126,14 +124,18 @@
<div class="images size-{{ group.images|length }}"> <div class="images size-{{ group.images|length }}">
{% if group.images|length > 0 %} {% if group.images|length > 0 %}
{% for image in group.images %} {% for image in group.images %}
<img <picture>
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
onload="imgFade(this)" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
style="opacity:0;" <img
id="lazy-load" src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
class="data-{{ loop.index }}" alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %} class="data-{{ loop.index }}"
/> onload="imgFade(this)"
style="opacity:0;"
fetchpriority="low"
/>
</picture>
{% endfor %} {% endfor %}
{% else %} {% else %}
<img src="{{ url_for('static', filename='error.png') }}" class="loaded" alt="Error thumbnail"/> <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 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) }}"> <meta name="twitter:image" content="{{ url_for('media_api.media', path='pfp/' + user.picture) }}">
{% endif %} {% endif %}
{% if user.colour %} {% if user.colour %}<meta name="theme-color" content="rgb{{ user.colour }}"/>{% endif %}
<meta name="theme-color" content="rgb({{ user.colour.0 }}, {{ user.colour.1 }}, {{ user.colour.2 }})"/>
{% endif %}
<meta name="twitter:card" content="summary"> <meta name="twitter:card" content="summary">
<script type="text/javascript"> <script type="text/javascript">
@ -20,7 +18,7 @@
<style> <style>
.banner-picture { .banner-picture {
background-color: rgb({{ user.colour.0 }}, {{ user.colour.1 }}, {{ user.colour.2 }}) !important; background-color: rgb{{ user.colour }} !important;
} }
</style> </style>
{% endblock %} {% endblock %}
@ -35,13 +33,16 @@
<span class="banner-filter"></span> <span class="banner-filter"></span>
<div class="banner-content"> <div class="banner-content">
{% if user.picture %} {% if user.picture %}
<img <picture class="banner-picture">
class="banner-picture" <source srcset="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp&e=webp">
src="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp" <source srcset="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp&e=png">
alt="Profile picture" <img
onload="imgFade(this)" src="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp"
style="opacity:0;" alt="Profile picture"
/> onload="imgFade(this)"
style="opacity:0;"
/>
</picture>
{% else %} {% else %}
<img <img
class="banner-picture" class="banner-picture"
@ -71,18 +72,21 @@
<h1 class="gallery-header">Images</h1> <h1 class="gallery-header">Images</h1>
<div class="gallery-grid"> <div class="gallery-grid">
{% for image in images %} {% 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"> <div class="image-filter">
<p class="image-title"><span class="time">{{ image.created_at }}</span></p> <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div> </div>
<img <picture>
fetchpriority="low" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
alt="{{ image.alt }}" <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" <img
onload="imgFade(this)" src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
style="opacity:0;" alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
id="lazy-load" onload="imgFade(this)"
/> style="opacity:0;"
fetchpriority="low"
/>
</picture>
</a> </a>
{% endfor %} {% endfor %}
</div> </div>