Merge pull request #304 from blz-it/fix/team-images-broken

Fix Team Images Not Working in Prod

src/assets/data/team.json

@@ -1,12 +1,12 @@
 [
   {
-    "img": "/src/assets/img/team/Benjamin Frost.webp",
+    "img": "/src/assets/img/team/benjamin-frost.webp",
     "name": "Benjamin Frost",
     "lastRole": { "de": "Jury", "en": "Jury" },
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Jonas Wanke.webp",
+    "img": "/src/assets/img/team/jonas-wanke.webp",
     "name": "Jonas Wanke",
     "lastRole": { "en": "Expert", "de": "Bundestrainer" },
     "skill": {
@@ -16,7 +16,7 @@
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Dr. Olaf Kappler.webp",
+    "img": "/src/assets/img/team/olaf-kappler.webp",
     "name": "Dr. Olaf Kappler",
     "lastRole": { "en": "Expert", "de": "Bundestrainer" },
     "skill": {
@@ -25,12 +25,12 @@
     }
   },
   {
-    "img": "/src/assets/img/team/Doreen Kappler.webp",
+    "img": "/src/assets/img/team/doreen-kappler.webp",
     "name": "Doreen Kappler",
     "lastRole": { "de": "Good Fairy", "en": "Good Fairy" }
   },
   {
-    "img": "/src/assets/img/team/Glenn Skrzypczak.webp",
+    "img": "/src/assets/img/team/glenn-skrzypczak.webp",
     "name": "Glenn Skrzypczak",
     "lastRole": { "en": "Expert", "de": "Bundestrainer" },
     "skill": {
@@ -40,39 +40,39 @@
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Elisa Boose.webp",
+    "img": "/src/assets/img/team/elisa-boose.webp",
     "name": "Elisa Boose",
     "lastRole": { "en": "Trainer", "de": "Trainer" }
   },
   {
-    "img": "/src/assets/img/team/Michael Boose.webp",
+    "img": "/src/assets/img/team/michael-boose.webp",
     "name": "Michael Boose",
     "lastRole": { "en": "Trainer", "de": "Trainer" }
   },
   {
-    "img": "/src/assets/img/team/Joachim Schiller.webp",
+    "img": "/src/assets/img/team/joachim-schiller.webp",
     "name": "Joachim Schiller",
     "lastRole": { "de": "Jury", "en": "Jury" },
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Justin Konratt.webp",
+    "img": "/src/assets/img/team/justin-konratt.webp",
     "name": "Justin Konratt",
     "lastRole": { "de": "Jury", "en": "Jury" },
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Kai Redmann.webp",
+    "img": "/src/assets/img/team/kai-redmann.webp",
     "name": "Kai Redmann",
     "lastRole": { "en": "Workshop-Manager", "de": "Workshop Manager" }
   },
   {
-    "img": "/src/assets/img/team/Lukas Fischer.webp",
+    "img": "/src/assets/img/team/lukas-fischer.webp",
     "name": "Lukas Fischer",
     "lastRole": { "en": "Workshop-Manager", "de": "Workshop Manager" }
   },
   {
-    "img": "/src/assets/img/team/Thomas Steinfeld.webp",
+    "img": "/src/assets/img/team/thomas-steinfeld.webp",
     "name": "Thomas Steinfeld",
     "lastRole": { "en": "Mr. Speed Programming", "de": "Mr. Speed Programming" }
   }

src/components/team/Person.astro

@@ -1,24 +1,30 @@
 ---
-import { getLangFromUrl, useTranslations } from "~/i18n/utils";
-import { PersonImage } from "./PersonImage";
 import type { Language } from "~/i18n";
+import { getLangFromUrl, useTranslations } from "~/i18n/utils";
+import PersonImage from "./PersonImage.astro";
 
 interface Props {
   name: string;
   lastRole: Record<Language, string>;
-  img?: string;
+  imagePath?: string;
   skill?: Record<Language, string>;
   hasMultipleRoles?: boolean;
 }
 
-const { name, img, lastRole, skill, hasMultipleRoles = false } = Astro.props;
+const {
+  name,
+  imagePath,
+  lastRole,
+  skill,
+  hasMultipleRoles = false,
+} = Astro.props;
 
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 ---
 
 <div class="space-y-6">
-  <PersonImage img={img} />
+  <PersonImage imagePath={imagePath} />
   <div class="text-md text-center font-light">
     <h3 class="mb-1 text-lg font-medium">{name}</h3>
     <div>

src/components/team/PersonImage.astro

@@ -0,0 +1,23 @@
+---
+import { Image } from "astro:assets";
+import { clsx } from "clsx";
+import WsgHandsImage from "~/assets/img/wsg-hands.svg";
+
+interface Props {
+  imagePath?: string;
+}
+
+const { imagePath } = Astro.props;
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  "/src/assets/**/*.{jpeg,jpg,png,gif,webp}",
+);
+---
+
+<Image
+  class={clsx(
+    "mx-auto h-40 w-40 rounded-full object-cover shadow-lg xl:h-56 xl:w-56",
+    imagePath && "p-5",
+  )}
+  src={imagePath ? images[imagePath]() : WsgHandsImage}
+  alt=""
+/>

src/components/team/Team.astro

@@ -1,6 +1,6 @@
 ---
-import Person from "./Person.astro";
 import team from "~/assets/data/team.json";
+import Person from "./Person.astro";
 ---
 
 <div class="bg-white py-16">
@@ -13,7 +13,7 @@ import team from "~/assets/data/team.json";
         .map((member) => (
           <Person
             name={member["name"]}
-            img={member["img"]}
+            imagePath={member["img"]}
             lastRole={member["lastRole"]}
             skill={member["skill"]}
             hasMultipleRoles={member["hasMultipleRoles"]}

src/pages/[lang]/our-team.astro

@@ -1,9 +1,9 @@
 ---
+import TeamImage from "~/assets/img/team.webp";
 import { getLangFromUrl, localeParams, useTranslations } from "~/i18n/utils";
 import Hero from "../../components/Hero.astro";
-import TeamPage from "../../components/team/Team.astro";
+import TeamList from "../../components/team/Team.astro";
 import Layout from "../../layouts/Layout.astro";
-import TeamImage from "~/assets/img/team.webp";
 
 export const getStaticPaths = localeParams;
 
@@ -13,5 +13,5 @@ const t = useTranslations(lang);
 
 <Layout title={t({ de: "Unser Team", en: "Our Team" })}>
   <Hero title={t({ de: "Unser Team", en: "Our Team" })} img={TeamImage} />
-  <TeamPage />
+  <TeamList />
 </Layout>