🔥 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/routes/[country]/[location]/[photo].svelte

@@ -56,10 +56,11 @@
 <Image
     id={currentPhoto.image.id}
     alt={currentPhoto.title}
+    sizeKey="photo-list"
     sizes={{
         small: { width: 500 },
-        medium: { width: 900 },
-        large: { width: 1440 },
+        medium: { width: 850 },
+        large: { width: 1280 },
     }}
     ratio={1.5}
 />

src/routes/[country]/[location]/index.svelte

@@ -3,14 +3,14 @@
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
-    import { getAssetUrl } from '$utils/helpers'
+    import { getAssetUrlKey } from '$utils/helpers'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
 
-    export let data: any
+    export let location: any
     export let photos: any[]
     export let lastUpdated: string
     export let totalPhotos: number
@@ -88,9 +88,9 @@
 <main class="location-page">
     <section class="location-page__intro grid"
         style="
-            --illus-desktop: url({getAssetUrl(data.illustration_desktop.id, 1600, 1466, 90)});
-            --illus-desktop-2x: url({getAssetUrl(data.illustration_desktop_2x.id, 3200, 2932, 90)});
-            --illus-mobile: url({getAssetUrl(data.illustration_mobile.id, 1125, 2317, 90)});
+            --illus-desktop: url({getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')});
+            --illus-desktop-2x: url({getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
+            --illus-mobile: url({getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')});
         "
     >
         <h1 class="title">
@@ -99,19 +99,19 @@
                 <span>of</span>
             </span>
             <strong class="city">
-                {data.name}
+                {location.name}
             </strong>
         </h1>
 
         <div class="location-page__description grid" bind:this={descriptionEl}>
             <div class="wrap">
                 <div class="text-medium">
-                    Houses of {data.name} {data.description}
+                    Houses of {location.name} {location.description}
                 </div>
                 <div class="info">
                     <p class="text-label">
                         Photos by
-                        {#each data.credits as { credit_id: { name, website }}}
+                        {#each location.credits as { credit_id: { name, website }}}
                             {#if website}
                                 <a href={website} target="_blank" rel="noopener external">
                                     {name}
@@ -159,18 +159,24 @@
                             </time>
                         </a>
                     </div>
-                    <a class="house__photo" href="/{params.country}/{params.location}/{slug}">
-                        <Image
-                            id={id}
-                            alt="{alt}"
-                            width={1280}
-                            height={853}
-                            class="shadow-photo"
-                        />
-                        <span class="house__index title-index">
-                            {(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
-                        </span>
-                    </a>
+                    <div class="photo house__photo shadow-photo">
+                        <a href="/{params.country}/{params.location}/{slug}">
+                            <Image
+                                id={id}
+                                sizeKey="photo-list"
+                                sizes={{
+                                    small: { width: 500 },
+                                    medium: { width: 850 },
+                                    large: { width: 1280 },
+                                }}
+                                ratio={1.5}
+                                alt="{alt}"
+                            />
+                            <span class="house__index title-index">
+                                {(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
+                            </span>
+                        </a>
+                    </div>
                 </div>
             {/each}
         </section>
@@ -199,7 +205,7 @@
     {:else}
         <div class="location-page__message">
             <p>
-                No photos available for {data.name}.<br>
+                No photos available for {location.name}.<br>
                 Come back later!
             </p>
         </div>
@@ -268,7 +274,7 @@
 
         return {
             props: {
-                data: data.location[0],
+                location: data.location[0],
                 photos: data.photos,
                 totalPhotos: data.photos.length ? locationPhotosCount.count.id : 0,
                 lastUpdated: data.photos.length ? data.photos[0].date_created : undefined,