mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26:16 +00:00
Use Picture element to automatically choose webp
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:
parent
16df5bc255
commit
2cf7bc9091
10 changed files with 119 additions and 124 deletions
|
|
@ -5,26 +5,8 @@ function imgFade(obj, time = 200) {
|
|||
|
||||
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 () {
|
||||
loadOnView();
|
||||
|
||||
const times = document.querySelectorAll('.time');
|
||||
for (let i = 0; i < times.length; i++) {
|
||||
// Remove milliseconds
|
||||
|
|
@ -70,8 +52,6 @@ window.onload = function () {
|
|||
}
|
||||
};
|
||||
window.onscroll = function () {
|
||||
loadOnView();
|
||||
|
||||
// Top Of Page button
|
||||
const topOfPage = document.querySelector('.top-of-page');
|
||||
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
||||
|
|
@ -90,6 +70,3 @@ window.onscroll = function () {
|
|||
}
|
||||
}
|
||||
};
|
||||
window.onresize = function () {
|
||||
loadOnView();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.image-container
|
||||
.image-container, picture
|
||||
margin: auto
|
||||
|
||||
width: 100%
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
object-position: center
|
||||
|
||||
@media (max-width: 1100px)
|
||||
.image-container
|
||||
.image-container, picture
|
||||
margin: 0 auto
|
||||
max-height: 69vh
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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"
|
||||
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;"
|
||||
alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
|
||||
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>
|
||||
<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 %}"
|
||||
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
|
||||
onload="imgFade(this)"
|
||||
style="opacity:0;"
|
||||
id="lazy-load"
|
||||
fetchpriority="low"
|
||||
/>
|
||||
</picture>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,17 +84,24 @@
|
|||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="background">
|
||||
<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">
|
||||
<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 }}"
|
||||
|
|
@ -106,6 +113,7 @@
|
|||
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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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
|
||||
fetchpriority="low"
|
||||
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
|
||||
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"
|
||||
fetchpriority="low"
|
||||
/>
|
||||
</picture>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<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
|
||||
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
|
||||
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;"
|
||||
id="lazy-load"
|
||||
class="data-{{ loop.index }}"
|
||||
{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}
|
||||
fetchpriority="low"
|
||||
/>
|
||||
</picture>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<img src="{{ url_for('static', filename='error.png') }}" class="loaded" alt="Error thumbnail"/>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<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
|
||||
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>
|
||||
{% 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>
|
||||
<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
|
||||
fetchpriority="low"
|
||||
alt="{{ image.alt }}"
|
||||
data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
|
||||
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;"
|
||||
id="lazy-load"
|
||||
fetchpriority="low"
|
||||
/>
|
||||
</picture>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue