Support for lazy loading of rich embeds

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
index dc0ed1d4bc85ee766c338e8c753e829552b28946..3d85f6bafb6890654135aa0a672fdf768fc1633d 100644 (file)
--- a/com.woltlab.wcf/templates/unfurlUrl.tpl
+++ b/com.woltlab.wcf/templates/unfurlUrl.tpl
@@ -2,13 +2,13 @@
        {if $object->isPlainUrl()}
                <a {anchorAttributes url=$object->url isUgc=$enableUgc}>{$object->title}</a>
        {else}
-               <div class="
-                       unfurlUrlCard
-                       {if $object->hasCoverImage()}unfurlUrlCardCoverImage{/if}
-                       {if $object->hasSquaredImage()}unfurlUrlCardSquaredImage{/if}
-               ">
-
-                       <div class="unfurlUrlImage"{if !$object->getImageUrl()|empty} style="background-image: url('{$object->getImageUrl()}')"{/if}></div>
+               <div class="unfurlUrlCard{*
+                       *}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
+                       *}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
+               *}">
+                       {if !$object->getImageUrl()|empty}
+                               <img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
+                       {/if}
                        <div class="unfurlUrlInformation">
                                <div class="unfurlUrlTitle">{$object->title}</div>
                                <div class="unfurlUrlDescription">{$object->description}</div>

diff --git a/wcfsetup/install/files/style/ui/unfurlUrl.scss b/wcfsetup/install/files/style/ui/unfurlUrl.scss
index 53d164214efc8d64c349468d608424c665cd1d48..f02fc763a5126d60b59690f563c18df56a361315 100644 (file)
--- a/wcfsetup/install/files/style/ui/unfurlUrl.scss
+++ b/wcfsetup/install/files/style/ui/unfurlUrl.scss
@@ -15,8 +15,11 @@
                width: 400px;
 
                .unfurlUrlImage {
-                       height: 200px;
-                       position: relative;
+                       /* The `!important` is required because of `.messageBody > .messageText img`. */
+                       height: 200px !important;
+                       object-fit: cover;
+                       object-position: center;
+                       width: 600px;
                }
        }
 
@@ -26,17 +29,18 @@
                .unfurlUrlImage {
                        border-radius: 3px;
                        flex: 0 0 auto;
-                       height: 128px;
+                       /* The `!important` is required because of `.messageBody > .messageText img`. */
+                       height: 128px !important;
                        margin: 10px;
                        width: 128px;
 
                        @include screen-sm {
-                               height: 64px;
+                               height: 64px !important;
                                width: 64px;
                        }
 
                        @include screen-xs {
-                               height: 24px;
+                               height: 24px !important;
                                position: absolute;
                                width: 24px;
                        }
@@ -56,12 +60,6 @@
        }
 }
 
-.unfurlUrlImage {
-       background-position: center;
-       background-repeat: no-repeat;
-       background-size: cover;
-}
-
 .unfurlUrlInformation {
        position: relative;
        padding: 10px 10px 25px 10px;