From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 14 May 2021 15:55:13 +0000 (+0200)
Subject: Support for lazy loading of rich embeds
X-Git-Tag: 5.4.0_Alpha_3~33
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c038b70225b2ab7fba7f3fe80592c03855633f5f;p=GitHub%2FWoltLab%2FWCF.git

Support for lazy loading of rich embeds
---

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
index dc0ed1d4bc..3d85f6bafb 100644
--- 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 53d164214e..f02fc763a5 100644
--- 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;