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

onlylegs/static/js/index.js

@@ -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();
-};

onlylegs/static/js/webp.js

@@ -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;
-}

onlylegs/static/sass/components/image-view/image.sass

@@ -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
 

onlylegs/templates/group.html

@@ -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 }}),
+                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) {
                 .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 {
-                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"
+                    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>

onlylegs/templates/image.html

@@ -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 %}

onlylegs/templates/index.html

@@ -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>

onlylegs/templates/layout.html

@@ -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>

onlylegs/templates/list.html

@@ -1,9 +1,7 @@
 {% extends 'layout.html' %}
 {% block nav_groups %}selected{% endblock %}
 {% 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 %}
         <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"
+                                        fetchpriority="low"
-                                    class="data-{{ loop.index }}"
-                                    {% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}
                                     />
+                                </picture>
                             {% endfor %}
                         {% else %}
                             <img src="{{ url_for('static', filename='error.png') }}" class="loaded" alt="Error thumbnail"/>

onlylegs/templates/profile.html

@@ -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 %}
+    {% 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">
 
     <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"
+                            src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
-                        alt="{{ image.alt }}"
+                            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>