Merge pull request #16 from leon-luna-ray/dev

add image alt text from cms
leon-luna-ray · Feb 11, 2024 · e208252 · e208252
2 parents be78cae + 8444754
commit e208252
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/js/main.js b/src/js/main.js
@@ -39,7 +39,7 @@ Alpine.store("darkMode", {
 Alpine.store("data", {
   skills: skills || [],
   profile: profile,
-  image: profile.image ? getThumbnailUrl(profile.image) : "#",
+  image: profile.image,
   projectsIntro: portableTextToHTML(projects.description) || "",
   projects: projects.projects || [],
   getThumbnailUrl,

diff --git a/src/js/sanity.js b/src/js/sanity.js
@@ -21,7 +21,15 @@ export function getImageUrl(source) {
 }
 
 export async function fetchProfile() {
-  const query = `*[_type == "profileDetails"][0]`;
+  const query = `*[_type == "profileDetails"][0]{
+    ...,
+    "image": image.asset->{
+      _id,
+      title,
+      altText,
+      description,
+    },
+  }`;
   const profile = await client.fetch(query);
 
   return profile;

diff --git a/src/pages/home.html b/src/pages/home.html
@@ -35,7 +35,7 @@ <h2>About Me</h2>
                 <h3 x-text="$store.data.profile.greeting" class="font-orbitron h4 dark:!text-alpine-20 font-[100]"></h3>
             </div>
             <div class="flex-col-2 md:col-span-2">
-                <img :src="$store.data.image" alt="Profile picture"
+                <img :src="$store.data.getThumbnailUrl($store.data.image)" :alt="$store.data.image.altText || 'Profile picture'"
                     class="object-cover aspect-square md:aspect-video xl:aspect-[21/9] rounded-border" />
                 <p x-text="$store.data.profile.bio" class="flex-1 text-[1.25rem] leading-[2.2rem]"></p>
             </div>
@@ -54,7 +54,7 @@ <h2 class="">Projects</h2>
                 <template x-for="project in $store.data.projects">
                     <a native :href="project.url" target="_blank"
                         class="flex-col-1 hover:no-underline hover:!text-inherit zoom-in-out">
-                        <img :src="$store.data.getThumbnailUrl(project.mainImage)" :alt="project.title"
+                        <img :src="$store.data.getThumbnailUrl(project.mainImage)" :alt="project.mainImage.altText"
                             class="aspect-[16/9] object-cover rounded-border" />
                         <div class="flex-col-05">
                             <h3 x-text="project.title" class="font-dm font-bold h4 dark:!text-alpine-20 opacity-90">