🔥 Use Directus Storage Assets Presets only for images

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

src/components/atoms/Image.svelte

@@ -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}
     />

src/components/molecules/Location.svelte

@@ -55,7 +55,13 @@
         on:mouseleave={handleMouseLeave}
         sveltekit-noscroll
     >
-        <Image class="location__flag" id={location.country.flag.id} alt="Flag of {location.country.name}" width={32} height={32} />
+        <Image
+            class="location__flag"
+            id={location.country.flag.id}
+            sizeKey="square"
+            width={32} height={32}
+            alt="Flag of {location.country.name}"
+        />
         <div class="text">
             <dl>
                 <dt class="location__name">
@@ -75,8 +81,10 @@
             {#each location.photos as { image }, index}
                 <Image
                     class={index === photoIndex ? 'is-visible' : null}
-                    id={image.id} alt={image.title}
-                    width={340} height={226} quality={70}
+                    id={image.id}
+                    sizeKey="photo-thumbnail"
+                    width={340} height={226}
+                    alt={image.title}
                 />
             {/each}
         </div>

src/components/molecules/PhotoCard.svelte

@@ -17,6 +17,7 @@
     <a href={url}>
         <Image
             id={id}
+            sizeKey="postcard"
             {sizes}
             ratio={1.5}
             alt={alt}
@@ -25,6 +26,7 @@
     {:else}
         <Image
             id={id}
+            sizeKey="postcard"
             {sizes}
             ratio={1.5}
             alt={alt}

src/components/molecules/PostCard.svelte

@@ -20,7 +20,13 @@
             <div class="frame">
                 <img src="/images/icons/stamp.svg" width="32" height="42" alt="Stamp">
             </div>
-            <Image class="flag" id={flagId} width={32} height={32} alt="Flag of {country}" />
+            <Image
+                class="flag"
+                id={flagId}
+                sizeKey="square"
+                width={32} height={32}
+                alt="Flag of {country}"
+            />
         </div>
         <ul class="postcard__address">
             <li>{street}</li>

src/components/organisms/Shop.svelte

@@ -14,7 +14,15 @@
 <div class="shop shadow-box-dark">
     <div class="content">
         <div class="shop__image">
-            <Image id={shop.module_image.id} alt={shop.module_image.title} width={800} height={800} />
+            <Image
+                id={shop.module_image.id}
+                sizeKey="square"
+                sizes={{
+                    small: { width: 400, height: 400 },
+                    large: { width: 800, height: 800 },
+                }}
+                alt={shop.module_image.title}
+            />
         </div>
 
         <div class="shop__content">