Base Image WIP

components/Base/DirectusImage.vue

@@ -13,17 +13,94 @@ export interface DirectusImageProps {
 	 * Alt text for image
 	 */
 	alt: string;
+
+	/**
+	 * Sizes for srcset. Syntax is '375px:preset_name 768px:preset_name'
+	 */
+	sizes?: string | null | undefined;
+
+	/**
+	 * The key for the Directus image preset if you're not using sizes.
+	 */
+	preset?: string | null | undefined;
+
+	/**
+	 * Width of the image
+	 */
+	width?: string | number;
+
+	/**
+	 * Height of the image
+	 */
+	height?: string | number;
+
+	/**
+	 * Lazy load the image
+	 */
+	loading?: 'lazy' | 'eager' | 'auto';
 }
 
 const props = defineProps<DirectusImageProps>();
 
 const src = computed(() => {
 	const url = new URL(`/assets/${props.uuid}`, directusUrl);
 	url.searchParams.set('token', directusToken);
+
+	if (!props.sizes && props.preset) {
+		url.searchParams.set('key', props.preset);
+	}
+
 	return url.toString();
 });
+
+const srcsetAttr = computed(() => {
+	const sizes = unref(props.sizes);
+	if (!sizes) return null;
+
+	const sizesArray = sizes.split(' ');
+
+	const srcsetValue = sizesArray
+		.map((size) => {
+			let [width, preset] = size.split(':');
+			width = width.replace('px', '');
+
+			// Use URLSearchParams to encode the preset name
+			const url = new URL(unref(src));
+			url.searchParams.set('key', preset);
+
+			return `${url.toString()} ${width}w`;
+		})
+		.join(', ');
+
+	return srcsetValue;
+});
+
+const sizesAttr = computed(() => {
+	const sizes = unref(props.sizes);
+	if (!sizes) return null;
+
+	const sizesArray = sizes.split(' ');
+
+	const sizesValue = sizesArray
+		.map((size, index) => {
+			const [width] = size.split(':');
+			if (index === sizesArray.length - 1) return `${width}`;
+			else return `(max-width: ${width}) ${width}`;
+		})
+		.join(', ');
+
+	return sizesValue;
+});
 </script>
 
 <template>
-	<img :src="src" :alt="alt" />
+	<img
+		:src="src"
+		:alt="alt"
+		:srcset="srcsetAttr!"
+		:sizes="sizesAttr!"
+		:height="height"
+		:width="width"
+		:loading="loading"
+	/>
 </template>

components/Block/MediaFullWidth.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DirectusImage from '../Base/DirectusImage.vue';
 import type { BlockProps } from './types';
 
 const { $directus, $readItem } = useNuxtApp();
@@ -23,13 +24,12 @@
 		color="white"
 	>
 		<BaseVideo v-if="block.type === 'video' && block.video" :url="block.video.url!" />
-
-		<BaseDirectusImage
+		<DirectusImage
 			v-else-if="block.type === 'image' && block.image"
 			:uuid="block.image.id"
-			:alt="block.image.description!"
+			:alt="block.image.description"
+			sizes="320px:page 640px:page2x"
 		/>
-
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else-if="block.type === 'embed' && block.embed" v-html="block.embed" />
 	</BaseFrame>

components/Comp/Quote.vue

@@ -16,10 +16,10 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 
 <template>
 	<div v-if="comp" class="comp-quote">
-		<BaseDirectusImage class="company-logo" height="25" :uuid="comp.company_logo!" alt="" />
+		<BaseDirectusImage v-if="comp.company_logo" class="company-logo" height="25" :uuid="comp.company_logo!" alt="" />
 		<BaseText v-if="comp.quote" :content="comp.quote" />
 		<div class="avatar">
-			<BaseDirectusImage width="64" height="64" :uuid="comp.person_image!" alt="" />
+			<BaseDirectusImage v-if="comp.person_image" width="64" height="64" :uuid="comp.person_image!" alt="" />
 			<div>
 				<p>{{ comp.person_name }}</p>
 				<p>{{ comp.person_title }}</p>