fix images

trueberryless-org · Dec 4, 2024 · 6d1c4ac · 6d1c4ac
1 parent 0c47b0a
commit 6d1c4ac
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 8 deletions.
diff --git a/.changeset/tricky-ducks-refuse.md b/.changeset/tricky-ducks-refuse.md
@@ -0,0 +1,5 @@
+---
+"trueberryless": patch
+---
+
+Fix image links and use real Astro optimised Images with Image component
diff --git a/src/src/assets/trueberryless.png → src/public/trueberryless.png b/src/src/assets/trueberryless.png → src/public/trueberryless.png
diff --git a/src/src/components/MainHead.astro b/src/src/components/MainHead.astro
@@ -18,7 +18,7 @@ const {
 <meta name="generator" content={Astro.generator} />
 <title>{title}</title>
 
-<link rel="icon" type="image/png"" href="/src/assets/trueberryless.png" />
+<link rel="icon" type="image/png"" href="/trueberryless.png" />
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link

diff --git a/src/src/components/PortfolioPreview.astro b/src/src/components/PortfolioPreview.astro
@@ -1,16 +1,23 @@
 ---
 import type { CollectionEntry } from 'astro:content';
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
 
 interface Props {
 	project: CollectionEntry<'work'>;
 }
 
 const { data, id } = Astro.props.project;
+
+const imagePath = "/src/assets/work/" + data.img;
+
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/work/*.{jpeg,jpg,png,gif}');
+if (!images[imagePath]) throw new Error(`"${imagePath}" does not exist in glob: "src/assets/work/*.{jpeg,jpg,png,gif}"`);
 ---
 
 <a class="card" href={`/work/${id}`}>
 	<span class="title">{data.title}</span>
-	<img src={data.img} alt={data.img_alt || ''} loading="lazy" decoding="async" />
+	<Image src={images[imagePath]()} alt={data.img_alt || ''} loading="lazy" decoding="async" />
 </a>
 
 <style>

diff --git a/src/src/content/work/starlight/starlight-cooler-credit.md b/src/src/content/work/starlight/starlight-cooler-credit.md
@@ -1,7 +1,7 @@
 ---
 title: Starlight Cooler Credit
 publishDate: 2024-11-12 00:00:00
-img: /src/assets/work/starlight-cooler-credit.png
+img: starlight-cooler-credit.png
 img_alt: A bright pink sheet of paper used to wrap flowers curves in front of rich blue background
 description: |
   Inspired by the Starlight credit in Astro docs, I made a customizable plugin that links to Starlight, Astro, and the Starlight Blog, with multilingual support.

diff --git a/src/src/pages/about.astro b/src/src/pages/about.astro
@@ -1,8 +1,12 @@
 ---
+import { Image } from 'astro:assets';
+
 import BaseLayout from '../layouts/BaseLayout.astro';
 
 import ContactCTA from '../components/ContactCTA.astro';
 import Hero from '../components/Hero.astro';
+
+import holiday from '../assets/holiday.jpg';
 ---
 
 <BaseLayout title="About | trueberryless" description="About trueberryless">
@@ -12,10 +16,10 @@ import Hero from '../components/Hero.astro';
 				title="About"
 				tagline="Thanks for stopping by. Read below to learn more about myself and my background."
 			>
-				<img
+				<Image
 					width="1553"
 					height="873"
-					src="/src/assets/holiday.jpg"
+					src={holiday}
 					alt="Felix Schneider with his dads at a family holiday eating his favorite dessert, crapes."
 				/>
 			</Hero>

diff --git a/src/src/pages/index.astro b/src/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+import { Image } from 'astro:assets';
 
 // Layout import — provides basic page elements: <head>, <nav>, <footer> etc.
 import BaseLayout from '../layouts/BaseLayout.astro';
@@ -23,6 +24,8 @@ const projects = (await getCollection('work'))
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/basics/astro-components/
+
+import portrait from '../assets/portrait.jpg';
 ---
 
 <BaseLayout>
@@ -41,11 +44,11 @@ const projects = (await getCollection('work'))
 					</div>
 				</Hero>
 
-				<img
+				<Image
 					alt="Felix Schneider smiling in a formal gray shirt and silver tie, arms crossed against a dark background."
 					width="480"
 					height="620"
-					src="/src/assets/portrait.jpg"
+					src={portrait}
 				/>
 			</header>
 

diff --git a/src/src/pages/work/[...slug].astro b/src/src/pages/work/[...slug].astro
@@ -1,5 +1,7 @@
 ---
 import { type CollectionEntry, getCollection } from 'astro:content';
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
 
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
@@ -26,6 +28,11 @@ export async function getStaticPaths() {
 
 const { entry } = Astro.props;
 const { Content } = await render(entry);
+
+const imagePath = "/src/assets/work/" + entry.data.img;
+
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/work/*.{jpeg,jpg,png,gif}');
+if (!images[imagePath]) throw new Error(`"${imagePath}" does not exist in glob: "src/assets/work/*.{jpeg,jpg,png,gif}"`);
 ---
 
 <BaseLayout title={entry.data.title} description={entry.data.description}>
@@ -46,7 +53,7 @@ const { Content } = await render(entry);
 			</header>
 			<main class="wrapper">
 				<div class="stack gap-10 content">
-					{entry.data.img && <img src={entry.data.img} alt={entry.data.img_alt || ''} />}
+					{entry.data.img && <Image src={images[imagePath]()} alt={entry.data.img_alt || ''} />}
 					<div class="content">
 						<Content />
 					</div>