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

🔥 Use Directus Storage Assets Presets only for images

Browse Source 
Block the generation of other image sizes from the URL

TODO: Block the access to root asset url as it still displays the original file
This commit is contained in:
Félix Péault
2021-10-17 22:17:52 +02:00
parent 56857fe30d
commit f29b4c3bb0
10 changed files with 103 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,13 @@
<script lang="ts">
import { getAssetUrl } from '$utils/helpers'
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 quality: number = 80
export let fit: string = 'inside'
export let alt: string
export let lazy: boolean = true
@@ -18,6 +17,17 @@
large?: { width?: number, height?: number }
}
/**
* Get asset url from size
* @description Adds the size and the format to the result
* @returns string `id?key={key}-{size}-{format}`
*/
const getSizeUrl = (key: string, size: string, format: string) => {
return getAssetUrlKey(id, `${key}-${size}-${format}`)
}
/**
* Define height from origin ratio if not defined
*/
@@ -44,28 +54,20 @@
*/
const imgWidth: number = sizes && sizes.small ? sizes.small.width : width
const imgHeight: number = sizes && sizes.small ? sizes.small.height : height
const imgSrc = id ? getAssetUrl(id, imgWidth, imgHeight, quality, fit, 'jpg') : src ? src : null
const imgSrc = id ? getSizeUrl(sizeKey, 'small', 'jpg') : src ? src : null
</script>
<picture class={$$props.class ? $$props.class : ''}>
<source
type="image/webp"
srcset="
{getAssetUrl(id, imgWidth, imgHeight, quality, fit, 'webp')} 345w,
{sizes && sizes.medium ? `${getAssetUrl(id, sizes.medium.width, sizes.medium.height, quality, fit, 'webp')} 768w,` : ''}
{sizes && sizes.large ? `${getAssetUrl(id, sizes.large.width, sizes.large.height, quality, fit, 'webp')} 1280w,` : ''}
"
srcset="{getSizeUrl(sizeKey, 'small', 'webp')} 345w {sizes && sizes.medium ? `, ${getSizeUrl(sizeKey, 'medium', 'webp')} 768w,` : ''} {sizes && sizes.large ? `, ${getSizeUrl(sizeKey, 'large', 'webp')} 1280w` : ''}"
>
<img
src={imgSrc}
sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%"
srcset="
{getAssetUrl(id, imgWidth, imgHeight, quality, fit)} 300w,
{sizes && sizes.medium ? `${getAssetUrl(id, sizes.medium.width, sizes.medium.height, quality, fit)} 768w,` : ''}
{sizes && sizes.large ? `${getAssetUrl(id, sizes.large.width, sizes.large.height, quality, fit)} 1280w,` : ''}
"
width={width}
height={height}
srcset="{getSizeUrl(sizeKey, 'small', 'jpg')} 300w {sizes && sizes.medium ? `, ${getSizeUrl(sizeKey, 'medium', 'jpg')} 768w` : ''} {sizes && sizes.large ? `, ${getSizeUrl(sizeKey, 'large', 'jpg')} 1280w` : ''}"
width={imgWidth}
height={imgHeight}
alt={alt}
loading={lazy ? 'lazy' : undefined}
/>