🔥 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
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -202,7 +202,13 @@
|
||||
value={filterCountry}
|
||||
>
|
||||
{#if countryFlagId}
|
||||
<Image id={countryFlagId} width={26} height={26} alt="{filterCountry} flag" class="icon" />
|
||||
<Image
|
||||
class="icon"
|
||||
id={countryFlagId}
|
||||
sizeKey="square"
|
||||
width={26} height={26}
|
||||
alt="{filterCountry} flag"
|
||||
/>
|
||||
{:else}
|
||||
<IconEarth class="icon" />
|
||||
{/if}
|
||||
@@ -262,6 +268,7 @@
|
||||
<a href="/{location.country.slug}/{location.slug}/{slug}">
|
||||
<Image
|
||||
id={image.id}
|
||||
sizeKey="photo-grid"
|
||||
sizes={{
|
||||
small: { width: 500 },
|
||||
medium: { width: 900 },
|
||||
|
||||
@@ -29,7 +29,12 @@
|
||||
{#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
|
||||
<li class="issue">
|
||||
<a href={link} target="_blank" rel="external noreferrer noopener">
|
||||
<Image id={id} width={160} height={112} alt="Issue {issue} thumbnail" />
|
||||
<Image
|
||||
id={id}
|
||||
sizeKey="issue-thumbnail"
|
||||
width={160} height={112}
|
||||
alt="Issue {issue} thumbnail"
|
||||
/>
|
||||
<dl>
|
||||
<dt>Issue #{issue}</dt>
|
||||
<dd>
|
||||
|
||||
Reference in New Issue
Block a user