78 lines
2.6 KiB
Svelte
78 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { getAssetUrlKey } from '$utils/helpers'
|
|
|
|
export let src: string = undefined
|
|
export let id: string = undefined
|
|
export let sizeKey: string = undefined
|
|
export let sizes: Sizes = undefined
|
|
export let width: number = sizes && sizes.medium && sizes.medium.width
|
|
export let height: number = sizes && sizes.medium && sizes.medium.height
|
|
export let ratio: number = undefined
|
|
export let alt: string
|
|
export let lazy: boolean = true
|
|
|
|
interface Sizes {
|
|
small?: { width?: number, height?: number }
|
|
medium?: { width?: number, height?: number }
|
|
large?: { width?: number, height?: number }
|
|
}
|
|
|
|
let srcSet = { webp: [], jpg: [] }
|
|
|
|
|
|
/**
|
|
* Define height from origin ratio if not defined
|
|
*/
|
|
const setHeightFromRatio = (w: number, r: number = ratio) => {
|
|
return Math.round(w / r)
|
|
}
|
|
|
|
if (ratio && !height) {
|
|
// Set height from width using ratio
|
|
height = setHeightFromRatio(width)
|
|
|
|
// Add height to all sizes
|
|
if (sizes) {
|
|
Object.entries(sizes).forEach(size => {
|
|
const [key, value]: [string, { width?: number, height?: number }] = size
|
|
sizes[key].height = setHeightFromRatio(value.width)
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Image attributes
|
|
*/
|
|
$: imgWidth = sizes && sizes.small ? sizes.small.width : width
|
|
$: imgHeight = sizes && sizes.small ? sizes.small.height : height
|
|
$: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
|
|
$: srcSet = {
|
|
webp: [
|
|
`${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
|
|
sizes && sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : undefined,
|
|
sizes && sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : undefined,
|
|
],
|
|
jpg: [
|
|
`${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
|
|
sizes && sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : undefined,
|
|
sizes && sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : undefined,
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<picture class={$$props.class ? $$props.class : ''}>
|
|
<source
|
|
type="image/webp"
|
|
srcset={srcSet.webp.join(', ').trim()}
|
|
>
|
|
<img
|
|
src={imgSrc}
|
|
sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%"
|
|
srcset={srcSet.jpg.join(', ').trim()}
|
|
width={imgWidth}
|
|
height={imgHeight}
|
|
alt={alt}
|
|
loading={lazy ? 'lazy' : undefined}
|
|
/>
|
|
</picture> |