add image alt text from sanity

leon-luna-ray · Feb 12, 2024 · 2e84830 · 2e84830
1 parent b784a85
commit 2e84830
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/cards/CardProject.jsx b/src/components/cards/CardProject.jsx
@@ -6,7 +6,8 @@ export const CardProject = ({ project }) => {
         <div className='card project'>
 
             <div className="img-wrap">
-                <img src={getImageUrl(project.mainImage).size(300, 300).url()} alt={project.title} />
+                <img src={getImageUrl(project.mainImage).size(300, 300).url()} alt={project.mainImage.altText || 
+                'Project screenshot'} />
             </div>
 
             <div className="details">

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -6,7 +6,7 @@ import ContactForm from '../components/ContactForm';
 import CardProject from '../components/cards/CardProject';
 
 export const HomePage = () => {
-  const { profile, profileImage, projects, skills } = useGlobalContext();
+  const { profile, profileImageURL, projects, skills } = useGlobalContext();
 
   const mapListItems = (items) => {
     return items.map((item, index) => <li key={index}>{item.title}</li>);
@@ -27,7 +27,7 @@ export const HomePage = () => {
   return (
     <main className='home page container'>
       <div className="about">
-        {profileImage && <img src={profileImage} alt="Profile" />}
+        {profile && <img src={profileImageURL} alt={profile.image.altText || 'Profile Image'} />}
         {profile && <TypingEffect text={profile.bio} />}
       </div>
       <div className="skills section mobile-container">

diff --git a/src/store/GlobalContext.jsx b/src/store/GlobalContext.jsx
@@ -18,7 +18,7 @@ export function useGlobalContext() {
 export function GlobalProvider({ children }) {
     const [profile, setProfile] = useState(null);
     const [global, setGlobal] = useState(null);
-    const [profileImage, setProfileImage] = useState(null);
+    const [profileImageURL, setProfileImageURL] = useState(null);
     const [skills, setSkills] = useState([]);
     const [projects, setProjects] = useState([]);
     const [error, setError] = useState(null);
@@ -34,7 +34,7 @@ export function GlobalProvider({ children }) {
                 setProjects(data?.projects.projects);
 
                 if (data?.profile.image) {
-                    setProfileImage(getImageUrl(data?.profile.image).size(300, 300).url());
+                    setProfileImageURL(getImageUrl(data?.profile.image).size(300, 300).url());
                 }
             } catch (err) {
                 console.error(err);
@@ -48,7 +48,7 @@ export function GlobalProvider({ children }) {
     const contextValue = {
         profile,
         global,
-        profileImage,
+        profileImageURL,
         skills,
         projects,
         error,