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