From ece9569d666b731e7c96cb11f9e5cc520a1c04c7 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Tue, 16 Mar 2021 03:55:20 +0100
Subject: [PATCH] Improved content reflow for lazy loading scene banner.

---
 assets/components/album/album.vue     | 6 ++++++
 assets/components/releases/banner.vue | 9 ++++++++-
 assets/js/fragments.js                | 6 ++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/assets/components/album/album.vue b/assets/components/album/album.vue
index c6b201fd..e0e9c484 100644
--- a/assets/components/album/album.vue
+++ b/assets/components/album/album.vue
@@ -27,6 +27,9 @@
 					>
 						<img
 							:src="getPath(item, 'thumbnail', { local })"
+							:style="{ 'background-image': `url('${getPath(item, 'lazy', { local })}')` }"
+							:width="item.width"
+							:height="item.height"
 							:title="item.title"
 							loading="lazy"
 							class="item image"
@@ -183,6 +186,9 @@ export default {
 .item {
 	max-width: 100%;
 	max-height: 100%;
+	height: auto;
+	background-size: cover;
+	background-position: center;
 }
 
 .item-comment {
diff --git a/assets/components/releases/banner.vue b/assets/components/releases/banner.vue
index b9658230..eae8cf70 100644
--- a/assets/components/releases/banner.vue
+++ b/assets/components/releases/banner.vue
@@ -33,6 +33,8 @@
 					v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
 					:src="getPath(release.teaser, 'thumbnail', { original: true })"
 					:alt="release.title"
+					:width="photo.width"
+					:height="photo.height"
 					loading="lazy"
 					class="item trailer"
 				>
@@ -66,6 +68,8 @@
 					<img
 						:src="getPath(cover, 'thumbnail')"
 						:style="{ 'background-image': getBgPath(cover, 'lazy') }"
+						:width="photo.width"
+						:height="photo.height"
 						class="item cover"
 						loading="lazy"
 						@load="$emit('load', $event)"
@@ -87,8 +91,10 @@
 				>
 					<img
 						:src="getPath(photo, 'thumbnail')"
-						:style="{ 'background-image': getPath(photo, 'lazy') }"
+						:style="{ 'background-image': `url('${getPath(photo, 'lazy')}` }"
 						:alt="`Photo ${photo.index + 1}`"
+						:width="photo.width"
+						:height="photo.height"
 						loading="lazy"
 						class="item"
 						@load="$emit('load', $event)"
@@ -273,6 +279,7 @@ export default {
 
 .item {
 	max-width: 100%;
+	width: auto;
 	height: 18rem;
 	box-shadow: 0 0 3px var(--shadow-weak);
 	background-size: cover;
diff --git a/assets/js/fragments.js b/assets/js/fragments.js
index 20c3779f..d4e6a0e5 100644
--- a/assets/js/fragments.js
+++ b/assets/js/fragments.js
@@ -108,6 +108,8 @@ const releasePosterFragment = `
             index
             path
             thumbnail
+			width
+			height
             lazy
 			isS3
             comment
@@ -129,6 +131,8 @@ const releaseCoversFragment = `
             index
             path
             thumbnail
+			width
+			height
             lazy
 			isS3
             comment
@@ -150,6 +154,8 @@ const releasePhotosFragment = `
             index
             path
             thumbnail
+			width
+			height
             lazy
 			isS3
             comment