Restyle feature image to make full-width

src/components/common/Layout.js

@@ -18,7 +18,7 @@ import '../../styles/app.css'
 * styles, and meta data for each page.
 *
 */
-const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
+const DefaultLayout = ({ data, children, bodyClass, isHome, hasFeatureImage }) => {
     const site = data.allGhostSettings.edges[0].node
     const twitterUrl = site.twitter ? `https://twitter.com/${site.twitter.replace(/^@/, ``)}` : null
     const facebookUrl = site.facebook ? `https://www.facebook.com/${site.facebook.replace(/^\//, ``)}` : null
@@ -70,7 +70,9 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
                     </div>
                 </header>
 
-                <main className="site-main">
+                <main className={
+                    hasFeatureImage ? "site-main has-feature-image" : "site-main"
+                }>
                     {/* All the main content gets inserted here, index.js, post.js */}
                     {children}
                 </main>
@@ -101,6 +103,7 @@ DefaultLayout.propTypes = {
     children: PropTypes.node.isRequired,
     bodyClass: PropTypes.string,
     isHome: PropTypes.bool,
+    hasFeatureImage: PropTypes.bool,
     data: PropTypes.shape({
         file: PropTypes.object,
         allGhostSettings: PropTypes.object.isRequired,

src/styles/app.css

@@ -551,7 +551,8 @@ h6 {
 .post-feature-image img {
     margin: 0 0 3vw;
     width: 100%;
-    height: 500px;
+    height: auto;
+    max-height: calc(100vh - 123px); /* leave space for header */
     object-fit: cover;
 }
 
@@ -762,6 +763,10 @@ h6 {
     padding: 4vw 0;
 }
 
+.site-main.has-feature-image {
+    padding: 0 0 4vw 0; /* Leave space for pic */
+}
+
 /* Index
 /* ---------------------------------------------------------- */
 

src/templates/post.js

@@ -25,13 +25,13 @@ const Post = ({ data, location }) => {
                 <Helmet>
                     <style type="text/css">{`${post.codeinjection_styles}`}</style>
                 </Helmet>
-                <Layout>
+                <Layout hasFeatureImage={ post.feature_image }>
+                { post.feature_image ?
+                    <figure className="post-feature-image">
+                        <img src={ post.feature_image } alt={ post.title } />
+                    </figure> : null }
                     <div className="container">
                         <article className="content">
-                            { post.feature_image ?
-                                <figure className="post-feature-image">
-                                    <img src={ post.feature_image } alt={ post.title } />
-                                </figure> : null }
                             <section className="post-full-content">
                                 <h1 className="content-title">{post.title}</h1>