michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* Add an alt tag for the hero image

* pass along

* Create heavy-pumas-cross.md
This commit is contained in:
Michael Stramel 2021-07-27 07:48:14 -05:00 • committed by GitHub
parent 4b94fc9f2e
commit 4591c1f5ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/heavy-pumas-cross.md Normal file
View file

@ -0,0 +1,5 @@
---
"@example/blog": patch
---
Add an alt tag for the hero image in the blog example

4
examples/blog/src/components/BlogPost.astro
View file

@ -8,14 +8,14 @@ export interface Props {
heroImage: string; heroImage: string;
} }
const { title, author, publishDate, heroImage } = Astro.props; const { title, author, publishDate, heroImage, alt } = Astro.props;
--- ---
<div class="layout"> <div class="layout">
<article class="content"> <article class="content">
<div> <div>
<header> <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> <p class="publish-date">{publishDate}</p>
<h1 class="title">{title}</h1> <h1 class="title">{title}</h1>
<Author name="@FredKSchott" href="https://twitter.com/FredKSchott" /> <Author name="@FredKSchott" href="https://twitter.com/FredKSchott" />

4
examples/blog/src/layouts/BlogPost.astro
View file

@ -5,7 +5,7 @@ import BlogHeader from '../components/BlogHeader.astro';
import BlogPost from '../components/BlogPost.astro'; import BlogPost from '../components/BlogPost.astro';
const {content} = Astro.props; 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' }> <html lang={ content.lang || 'en' }>
<head> <head>
@ -15,7 +15,7 @@ const {title, description, publishDate, author, heroImage, permalink} = content;
<body> <body>
<BlogHeader /> <BlogHeader />
<BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate}> <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}>
<slot /> <slot />
</BlogPost> </BlogPost>
</body> </body>

1
examples/blog/src/pages/posts/introducing-astro.md
View file

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