🔥 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/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>