NoLog.cz/gancio
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

improve MyPicture

Browse source
This commit is contained in:
lesion 2022-04-27 11:27:08 +02:00
parent 5ae3a9eeb3
commit 6776b1b1b1
No known key found for this signature in database
GPG key ID: 352918250B012177
1 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
components/MyPicture.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<figure :class='{ thumb, img: true }' <figure :class='{ thumb, img: true }'
:height="media.height" :width="media.width" :height="height" :width="width"
:style="{ 'background-position': thumbnailPosition, 'background-image': preview }"> :style="backgroundPreview">
<picture> <picture>
<source :srcset="srcset" type='image/webp' /> <source :srcset="srcset" type='image/webp' />
@ -12,7 +12,7 @@
:alt='media.name' :loading='lazy?"lazy":"eager"' :alt='media.name' :loading='lazy?"lazy":"eager"'
:src="src" :src="src"
itemprop="image" itemprop="image"
:height="media.height" :width="media.width" :height="height" :width="width"
:style="{ 'object-position': thumbnailPosition }" :style="{ 'object-position': thumbnailPosition }"
@load="loaded"> @load="loaded">
@ -36,12 +36,22 @@ export default {
return { loading: true } return { loading: true }
}, },
computed: { computed: {
preview () { backgroundPreview () {
return "url('data:image/png;base64," + this.media?.preview + "')" if (this.media) {
return {
backgroundPosition: this.thumbnailPosition,
backgroundImage: "url('data:image/png;base64," + this.media.preview + "')" }
}
}, },
media () { media () {
return this.event.media[0] return this.event.media[0]
}, },
height () {
return this.media ? this.media.height : 'auto'
},
width () {
return this.media ? this.media.width : 'auto'
},
src () { src () {
if (this.media) { if (this.media) {
return '/media/' + (this.thumb ? 'thumb/' : '') + this.media.url return '/media/' + (this.thumb ? 'thumb/' : '') + this.media.url
@ -54,7 +64,7 @@ export default {
return this.src.replace(/.jpg$/, '.webp') return this.src.replace(/.jpg$/, '.webp')
}, },
thumbnailPosition () { thumbnailPosition () {
if (this.media?.focalpoint) { if (this.media.focalpoint) {
const focalpoint = this.media.focalpoint const focalpoint = this.media.focalpoint
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%` return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
} }
@ -71,12 +81,12 @@ export default {
<style> <style>
.img { .img {
display: inline-flex;
width: 100%; width: 100%;
height: auto; height: auto;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-size: 100%; display: flex;
background-size: cover;
} }
.img img { .img img {
@ -100,6 +110,7 @@ export default {
.img picture { .img picture {
width: 100%; width: 100%;
display: flex;
} }
.img picture img.loading { .img picture img.loading {