Use an `<img>` element with lazy loading for embedded content

diff --git a/com.woltlab.wcf/templates/articleBBCode.tpl b/com.woltlab.wcf/templates/articleBBCode.tpl
index 9de3adef55bc5cfa7417325d5171d77b2fb0e2a7..7ce169740767d5cddec7e577e3f399774e80005b 100644 (file)
--- a/com.woltlab.wcf/templates/articleBBCode.tpl
+++ b/com.woltlab.wcf/templates/articleBBCode.tpl
@@ -1,6 +1,12 @@
 <article class="articleEmbeddedEntry embeddedContent" aria-labelledby="{$titleHash}_entryTitle{@$article->articleID}">
        <div class="embeddedContentLink">
-               <div class="embeddedContentImage" style="background-image: url({if $article->getTeaserImage()}{$article->getTeaserImage()->getThumbnailLink('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoURL()}{/if})"></div>
+               <img
+                       class="embeddedContentImageElement"
+                       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="">
 
         <div class="embeddedContentCategory">{lang}wcf.article.bbcode.type{/lang}</div>
                

diff --git a/wcfsetup/install/files/style/ui/embeddedContent.scss b/wcfsetup/install/files/style/ui/embeddedContent.scss
index f1f3eb64bddcf9a8ca2a910b1dc757be50be70d0..d3107ae3cf025365fe0d444a50f5f88ccf0d38c4 100644 (file)
--- a/wcfsetup/install/files/style/ui/embeddedContent.scss
+++ b/wcfsetup/install/files/style/ui/embeddedContent.scss
@@ -7,6 +7,7 @@
        overflow: hidden;
 }
 
+/* @deprecated 5.4 Use `<img class="embeddedContentImageElement">` instead */
 .embeddedContentImage {
        background-position: center;
        background-repeat: no-repeat;
@@ -15,6 +16,20 @@
        min-height: 150px;
 }
 
+.embeddedContentImageElement {
+       margin: -10px -10px 10px -10px;
+       object-fit: cover;
+       object-position: center;
+}
+
+/* This repetition is required because of `.messageBody > .messageText img`. */
+.embeddedContentImageElement.embeddedContentImageElement.embeddedContentImageElement {
+       height: 150px !important;
+
+       // The `100% + 20px` are the result of the negative margins.
+       max-width: calc(100% + 20px);
+}
+
 .embeddedContentLink {
        display: block;
        padding: 10px;