Commit 25684c13 authored by Seth A Johnson's avatar Seth A Johnson
Browse files

add map image to homepage

parent e1de0b48
...@@ -57,8 +57,12 @@ body { ...@@ -57,8 +57,12 @@ body {
background: darkorange; background: darkorange;
} }
.map-area { .map-container {
background: aqua;
.map-image {
width: 20rem;
}
} }
// card stuff // card stuff
......
import React from "react"
import Img from "gatsby-image"
const MapImage = ({mapImage}) => {
return (
<div>
<h2>{mapImage.heading}</h2>
<figure><Img fluid={mapImage.mapImage.childImageSharp.fluid} alt="map" className="map-image"/></figure>
<p>{mapImage.description}</p>
</div>
)
}
export default MapImage
...@@ -10,6 +10,7 @@ import Newsletter from "../components/newsletter" ...@@ -10,6 +10,7 @@ import Newsletter from "../components/newsletter"
import NewsList from "../components/news/newsList" import NewsList from "../components/news/newsList"
import EventList from "../components/events/eventList" import EventList from "../components/events/eventList"
import Video from "../components/video" import Video from "../components/video"
import MapImage from "../components/mapImage"
export const IndexQuery = graphql` export const IndexQuery = graphql`
query { query {
...@@ -29,6 +30,17 @@ query { ...@@ -29,6 +30,17 @@ query {
description description
embed embed
} }
mapSection {
heading
description
mapImage {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
} }
} }
books: allMarkdownRemark ( books: allMarkdownRemark (
...@@ -125,6 +137,7 @@ const IndexPage = ({data}) => { ...@@ -125,6 +137,7 @@ const IndexPage = ({data}) => {
const tagline = data.home.frontmatter.taglineSection const tagline = data.home.frontmatter.taglineSection
const newsletter = data.home.frontmatter.newsletterSection const newsletter = data.home.frontmatter.newsletterSection
const video = data.home.frontmatter.videoSection const video = data.home.frontmatter.videoSection
const map = data.home.frontmatter.mapSection
const books = data.books.edges const books = data.books.edges
const news = data.news.edges const news = data.news.edges
const events = data.events.edges const events = data.events.edges
...@@ -157,6 +170,9 @@ const IndexPage = ({data}) => { ...@@ -157,6 +170,9 @@ const IndexPage = ({data}) => {
<div className="video-container"> <div className="video-container">
<Video video={video} /> <Video video={video} />
</div> </div>
<div className="map-container">
<MapImage mapImage={map} />
</div>
</div> </div>
</Layout> </Layout>
) )
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment