mirror of
https://framagit.org/les/gancio.git
synced 2025-01-31 16:42:22 +01:00
120 lines
No EOL
2.4 KiB
Vue
120 lines
No EOL
2.4 KiB
Vue
<template>
|
|
<figure :class='{ thumb, img: true }'
|
|
:height="height" :width="width"
|
|
:style="backgroundPreview">
|
|
|
|
<picture>
|
|
<source :srcset="srcset" type='image/webp' />
|
|
|
|
<img
|
|
v-if='media'
|
|
:class='{ "u-featured": true, loading }'
|
|
:alt='media.name' :loading='lazy?"lazy":"eager"'
|
|
:src="src"
|
|
itemprop="image"
|
|
:height="height" :width="width"
|
|
:style="{ 'object-position': thumbnailPosition }"
|
|
@load="loaded">
|
|
|
|
<img v-else-if='!media && thumb' class='thumb' src="noimg.svg" alt=''>
|
|
|
|
</picture>
|
|
|
|
|
|
</figure>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
event: { type: Object, default: () => ({}) },
|
|
thumb: { type: Boolean, default: false },
|
|
lazy: { type: Boolean, default: false },
|
|
showPreview: { type: Boolean, default: true }
|
|
},
|
|
data () {
|
|
return { loading: true }
|
|
},
|
|
computed: {
|
|
backgroundPreview () {
|
|
if (this.media) {
|
|
return {
|
|
backgroundPosition: this.thumbnailPosition,
|
|
backgroundImage: "url('data:image/png;base64," + this.media.preview + "')" }
|
|
}
|
|
},
|
|
media () {
|
|
return this.event.media[0]
|
|
},
|
|
height () {
|
|
return this.media ? this.media.height : 'auto'
|
|
},
|
|
width () {
|
|
return this.media ? this.media.width : 'auto'
|
|
},
|
|
src () {
|
|
if (this.media) {
|
|
return '/media/' + (this.thumb ? 'thumb/' : '') + this.media.url
|
|
}
|
|
if (this.thumb) {
|
|
return '/noimg.svg'
|
|
}
|
|
},
|
|
srcset () {
|
|
return this.src.replace(/.jpg$/, '.webp')
|
|
},
|
|
thumbnailPosition () {
|
|
if (this.media.focalpoint) {
|
|
const focalpoint = this.media.focalpoint
|
|
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
|
|
}
|
|
return 'center center'
|
|
},
|
|
},
|
|
methods: {
|
|
loaded () {
|
|
this.loading = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
background-size: cover;
|
|
}
|
|
|
|
.img img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
overflow: hidden;
|
|
transition: opacity 1s;
|
|
opacity: 1;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.img.thumb img {
|
|
display: flex;
|
|
max-height: 250px;
|
|
min-height: 160px;
|
|
object-fit: cover;
|
|
object-position: top;
|
|
aspect-ratio: 1.7778;
|
|
}
|
|
|
|
.img picture {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.img picture img.loading {
|
|
opacity: 0;
|
|
}
|
|
|
|
</style> |