Add an alt tag for the hero image in the blog example (#868)

* Add an alt tag for the hero image * pass along * Create heavy-pumas-cross.md
withastro · Jul 27, 2021 · 4591c1f · 4591c1f · vercel · Jul 27, 2021
1 parent 4b94fc9
commit 4591c1f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/heavy-pumas-cross.md b/.changeset/heavy-pumas-cross.md
@@ -0,0 +1,5 @@
+---
+"@example/blog": patch
+---
+
+Add an alt tag for the hero image in the blog example
diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro
@@ -8,14 +8,14 @@ export interface Props {
   heroImage: string;
 }
 
-const { title, author, publishDate, heroImage } = Astro.props;
+const { title, author, publishDate, heroImage, alt } = Astro.props;
 ---
 
 <div class="layout">
   <article class="content">
   <div>
     <header>
-      {heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} />}
+      {heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} alt={alt} />}
       <p class="publish-date">{publishDate}</p>
       <h1 class="title">{title}</h1>
       <Author name="@FredKSchott" href="https://twitter.com/FredKSchott" />

diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
@@ -5,7 +5,7 @@ import BlogHeader from '../components/BlogHeader.astro';
 import BlogPost from '../components/BlogPost.astro';
 
 const {content} = Astro.props;
-const {title, description, publishDate, author, heroImage, permalink} = content;
+const {title, description, publishDate, author, heroImage, permalink, alt} = content;
 ---
 <html lang={ content.lang || 'en' }>
   <head>
@@ -15,7 +15,7 @@ const {title, description, publishDate, author, heroImage, permalink} = content;
 
   <body>
     <BlogHeader />
-    <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate}>
+    <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}>
       <slot />
     </BlogPost>
   </body>

diff --git a/examples/blog/src/pages/posts/introducing-astro.md b/examples/blog/src/pages/posts/introducing-astro.md
@@ -4,6 +4,7 @@ description: "We're excited to announce Astro as a new way to build static websi
 publishDate: 'Tuesday, June 8 2021'
 author: 'fred'
 heroImage: '/social.jpg'
+alt: 'Astro'
 layout: '../../layouts/BlogPost.astro'
 ---