-
Notifications
You must be signed in to change notification settings - Fork 0
/
Image.vue
67 lines (54 loc) · 1.84 KB
/
Image.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
<picture v-editable="blok">
<template v-if="art_direction">
<source
v-for="{ image, media_condition, width, height } in art_direction"
:media="media_condition"
:srcset="createImage(image.filename, width, height, image.focus)"
:width="width"
:height="height"
>
</template>
<img
:src="createImage(filename, width, height)"
:width="width"
:height="height"
:srcset="srcset"
:sizes="responsive_conditions"
:alt="alt"
:loading="loading"
class="shadow-lg w-full"
:class="{ 'rounded-xl': rounded }"
/>
</picture>
</template>
<script setup>
const props = defineProps({ blok: Object })
const { width, height, rounded, loading } = props.blok
const { art_direction } = props.blok
const { filename, alt, focus } = props.blok.original_image
const createImage = (original, width, height, focal = focus) => {
return `${original}/m/${width}x${height}/filters:focal(${focal})`
};
let srcset = ref('')
// Responsive images by density
const { density_2x, density_3x } = props.blok
if (density_2x || density_3x) {
let densitiesSrcset = `${createImage(filename, width, height)} 1x`
densitiesSrcset += density_2x ? `, ${createImage(filename, width * 2, height * 2)} 2x` : ''
densitiesSrcset += density_3x ? `, ${createImage(filename, width * 3, height * 3)} 3x` : ''
srcset.value = densitiesSrcset
}
// Responsive images by width
const { responsive_widths, responsive_conditions } = props.blok
if (responsive_widths) {
const aspectRatio = width / height
const responsiveImages = responsive_widths.split(',')
let widthsSrcset = ''
responsiveImages.map(imageWidth => {
widthsSrcset += `${createImage(filename, imageWidth, Math.round(imageWidth / aspectRatio))} ${imageWidth}w,`
return true
})
srcset.value = widthsSrcset
}
</script>