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">
-            <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>
             <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
+                    <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>
             {% 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,28 +84,36 @@
 {% endblock %}
 {% block content %}
     <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>
     </div>
     <div class="image-grid">
         <div class="image-block">
             <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 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>
-                    <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>
             {% 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">
-                            <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>
                     {% 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 %}
-                                <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 %}
                         {% 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 %}
-                <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 %}
                 <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
+                    <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>
             {% endfor %}
         </div>