Use `<img>` elements for articles to enable lazy loading

diff --git a/com.woltlab.wcf/templates/articleListItems.tpl b/com.woltlab.wcf/templates/articleListItems.tpl
index da76424a928b75b8ae3bb48e7da2da39c0fd905c..d8cfc0102a48372d13b8ef61c2326cbae3590a8e 100644 (file)
--- a/com.woltlab.wcf/templates/articleListItems.tpl
+++ b/com.woltlab.wcf/templates/articleListItems.tpl
@@ -4,7 +4,15 @@
        {foreach from=$objects item='article' name='articles'}
                <article class="contentItem contentItemMultiColumn" role="article">
                        <div class="contentItemLink">
-                               <div class="contentItemImage contentItemImageLarge" style="background-image: url({if $article->getTeaserImage()}{$article->getTeaserImage()->getThumbnailLink('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoURL()}{/if})">
+                               <div class="contentItemImage contentItemImageLarge">
+                                       <img
+                                               class="contentItemImageElement"
+                                               src="{if $article->getTeaserImage()}{$article->getTeaserImage()->getThumbnailLink('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoURL()}{/if}"
+                                               height="{if $article->getTeaserImage()}{@$article->getTeaserImage()->getThumbnailHeight('medium')}{else}{@$__wcf->getStyleHandler()->getStyle()->getCoverPhotoHeight()}{/if}"
+                                               width="{if $article->getTeaserImage()}{@$article->getTeaserImage()->getThumbnailWidth('medium')}{else}{@$__wcf->getStyleHandler()->getStyle()->getCoverPhotoWidth()}{/if}"
+                                               loading="lazy"
+                                               alt="">
+                                       
                                        {hascontent}
                                                <div class="contentItemBadges">
                                                        {content}

diff --git a/wcfsetup/install/files/style/ui/contentItem.scss b/wcfsetup/install/files/style/ui/contentItem.scss
index a13e6478ecf6ccfc7be41bec42da32cd2efda81f..df266420768560d2ac073d3e1e3e4102be8bd433 100644 (file)
--- a/wcfsetup/install/files/style/ui/contentItem.scss
+++ b/wcfsetup/install/files/style/ui/contentItem.scss
@@ -94,10 +94,27 @@
 
 .contentItemImageSmall {
        min-height: 75px;
+
+       .contentItemImageElement {
+               height: 75px;
+       }
 }
 
 .contentItemImageLarge {
        min-height: 150px;
+
+       .contentItemImageElement {
+               height: 150px;
+       }
+}
+
+.contentItemImageElement {
+       margin: -10px -10px 10px -10px;
+       object-fit: cover;
+       object-position: center;
+
+       // The `100% + 20px` are the result of the negative margins.
+       max-width: calc(100% + 20px);
 }
 
 .contentItemBadges,
@@ -107,6 +124,13 @@
        flex-direction: column;
 }
 
+.contentItemImageElement + .contentItemBadges {
+       left: 10px;
+       position: absolute;
+       top: 10px;
+       z-index: 1;
+}
+
 .contentItemOptions {
        position: absolute;
        right: 10px;