flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Manage Images sizes & srcset only if is set

Browse Source
This commit is contained in:
Félix Péault
2021-11-23 12:02:50 +01:00
parent 43708399e4
commit 7b94685451
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/atoms/Image.svelte
View File

@@ -48,16 +48,22 @@
$: imgHeight = sizes && sizes.small ? sizes.small.height : height $: imgHeight = sizes && sizes.small ? sizes.small.height : height
$: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
$: srcSet = { $: srcSet = {
webp: [ // WebP
`${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`, webp:
sizes && sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : undefined, sizes ? [
sizes && sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : undefined, `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
], sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
jpg: [ sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
`${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`, ]
sizes && sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : undefined, : [getAssetUrlKey(id, `${sizeKey}-webp`)],
sizes && sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : undefined, // JPG
] jpg:
sizes ? [
`${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null,
sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null,
]
: [getAssetUrlKey(id, `${sizeKey}-jpg`)]
} }
</script> </script>
@@ -68,7 +74,7 @@
> >
<img <img
src={imgSrc} src={imgSrc}
sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%" sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : null}
srcset={srcSet.jpg.join(', ').trim()} srcset={srcSet.jpg.join(', ').trim()}
width={imgWidth} width={imgWidth}
height={imgHeight} height={imgHeight}