From 7f1bef6b75734d967b0f3ae447d6a4a9b69c42e5 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 1 Jun 2021 14:11:04 +0200
Subject: [PATCH] Use an `<img>` element with lazy loading for embedded content

---
 com.woltlab.wcf/templates/articleBBCode.tpl       |  8 +++++++-
 .../install/files/style/ui/embeddedContent.scss   | 15 +++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/com.woltlab.wcf/templates/articleBBCode.tpl b/com.woltlab.wcf/templates/articleBBCode.tpl
index 9de3adef55..7ce1697407 100644
--- 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 f1f3eb64bd..d3107ae3cf 100644
--- 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;
-- 
2.20.1