Improved content reflow for lazy loading scene banner.
This commit is contained in:
parent
3bebf5bf51
commit
ece9569d66
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue