From 0407f82efa2eef45426aa1072ad95524ecfc5a91 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Mon, 5 Aug 2019 01:00:44 +0200
Subject: [PATCH] Add featured images to regular pages. Turn venue info into a
 table.

---
 src/pages/booking.js   | 42 ++++++++++++++++++++++++++++++++++++++----
 src/templates/event.js | 24 +++++++++++++++---------
 src/templates/page.js  | 32 ++++++++++++++++++++++++++++++--
 src/templates/venue.js | 22 +++++++++++-----------
 4 files changed, 94 insertions(+), 26 deletions(-)

diff --git a/src/pages/booking.js b/src/pages/booking.js
index e58be7f..8de3013 100644
--- a/src/pages/booking.js
+++ b/src/pages/booking.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Helmet from 'react-helmet'
 import { graphql, useStaticQuery } from 'gatsby'
+import Img from 'gatsby-image'
 import Layout from '../components/Layout'
 import { VenueTemplate } from '../templates/venue'
 
@@ -9,6 +10,12 @@ export const bookingPageQuery = graphql`
     wordpressPage(slug: { eq: "booking" }) {
       title
       content
+      featured_media {
+        caption
+        localFile {
+          ...FluidImage
+        }
+      }
     }
     allWordpressWpVenues(
       filter: { show_on_booking_page: { eq: "true" } }
@@ -52,8 +59,9 @@ const VenueList = ({ venues }) => {
 
 export const BookingPage = () => {
   const data = useStaticQuery(bookingPageQuery)
-  const { title, content } = data.wordpressPage
+  const { title, content, featured_media: featuredMedia } = data.wordpressPage
   const venues = data.allWordpressWpVenues.edges
+  const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
 
   return (
     <Layout>
@@ -61,9 +69,27 @@ export const BookingPage = () => {
       <section className="booking-page">
         <h1 className="page-title">{title}</h1>
         <p className="lead">
-          Chateau Neuf har lokaler til diverse arrangementer, og alle våre lokaler er tilgjengelige for utleie, både for studenter, utdanningsinstitusjoner og andre. Vi har blant annet huset Spellemannsprisen og Dalai Lama!
+          Chateau Neuf har lokaler til diverse arrangementer, og alle våre
+          lokaler er tilgjengelige for utleie, både for studenter,
+          utdanningsinstitusjoner og andre. Vi har blant annet huset
+          Spellemannsprisen og Dalai Lama!
         </p>
-        <a className="venue-anchor" href="#venue-list">Hopp til lokalene</a>
+        <a className="venue-anchor" href="#venue-list">
+          Hopp til lokalene
+        </a>
+        {hasFeaturedMedia && (
+          <div className="page-hero">
+            <div className="page-hero_image">
+              <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+            </div>
+            {featuredMedia.caption && (
+              <div
+                className="page-hero_image-caption"
+                dangerouslySetInnerHTML={{ __html: featuredMedia.caption }}
+              />
+            )}
+          </div>
+        )}
         <div
           className="page-content wp-content"
           dangerouslySetInnerHTML={{ __html: content }}
@@ -73,7 +99,15 @@ export const BookingPage = () => {
           <h2>Se utvalgte lokaler i vår 3D-løsning</h2>
           <p>
             Med vår 3D-løsning har du muligheten til å navigere deg rundt på
-            huset! Du kan bevege deg mellom etasjer ved å trykke på tallene i lille kolonnen nederst til høyre. Dra deg rundt fra rom til rom ved å klikke dit du vil, og bruk den røde og hvite krystallen i høyre hjørne til å få opptil en 360 graders rotasjon i alle rom. Pluss- og minus-knappene i høyre hjørne kan brukes for å zoome inn eller ut. På denne måten får du en rask og god oversikt over lokalene, og får et solid innblikk i hvordan rommene ser ut. Vi har valgt at løsningen starter i øverste etasje i Storsalen - men ta gjerne en titt på lokalene i alle etasjer!
+            huset! Du kan bevege deg mellom etasjer ved å trykke på tallene i
+            lille kolonnen nederst til høyre. Dra deg rundt fra rom til rom ved
+            å klikke dit du vil, og bruk den røde og hvite krystallen i høyre
+            hjørne til å få opptil en 360 graders rotasjon i alle rom. Pluss- og
+            minus-knappene i høyre hjørne kan brukes for å zoome inn eller ut.
+            På denne måten får du en rask og god oversikt over lokalene, og får
+            et solid innblikk i hvordan rommene ser ut. Vi har valgt at
+            løsningen starter i øverste etasje i Storsalen - men ta gjerne en
+            titt på lokalene i alle etasjer!
           </p>
         </div>
         <iframe
diff --git a/src/templates/event.js b/src/templates/event.js
index 58c804c..1fa83ce 100644
--- a/src/templates/event.js
+++ b/src/templates/event.js
@@ -21,6 +21,14 @@ const formatPrices = (regular, student) => {
   return cc === '' ? 'Gratis' : cc
 }
 
+const formatOrganizers = organizers => {
+  return organizers.map(organizer => (
+    <span className="event-organizer">
+      <Link to={organizer.path}>{organizer.name}</Link>
+    </span>
+  ))
+}
+
 export const EventTemplate = ({
   content,
   title,
@@ -95,11 +103,7 @@ export const EventTemplate = ({
               {organizers && (
                 <div className="event-organizers">
                   <span className="event-organizers-title">Arrangeres av </span>
-                  {organizers.map(organizer => (
-                    <span className="event-organizer">
-                      <Link to={organizer.path}>{organizer.name}</Link>
-                    </span>
-                  ))}
+                  {formatOrganizers(organizers)}
                 </div>
               )}
             </div>
@@ -153,10 +157,12 @@ EventTemplate.propTypes = {
   priceStudent: PropTypes.string,
   priceRegular: PropTypes.string,
   eventTypes: PropTypes.arrayOf(PropTypes.string),
-  organizers: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    path: PropTypes.string,
-  })),
+  organizers: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      path: PropTypes.string,
+    })
+  ),
 }
 
 const Event = ({ data }) => {
diff --git a/src/templates/page.js b/src/templates/page.js
index 937a6cc..4595858 100644
--- a/src/templates/page.js
+++ b/src/templates/page.js
@@ -2,12 +2,27 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Img from 'gatsby-image'
 import Layout from '../components/Layout'
 
-export const PageTemplate = ({ title, content }) => {
+export const PageTemplate = ({ title, content, featuredMedia }) => {
+  const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
   return (
     <section className="page">
       <h1 className="page-title">{title}</h1>
+      {hasFeaturedMedia && (
+        <div className="page-hero">
+          <div className="page-hero_image">
+            <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+          </div>
+          {featuredMedia.caption && (
+            <div
+              className="page-hero_image-caption"
+              dangerouslySetInnerHTML={{ __html: featuredMedia.caption }}
+            />
+          )}
+        </div>
+      )}
       <div
         className="page-content wp-content"
         dangerouslySetInnerHTML={{ __html: content }}
@@ -19,6 +34,9 @@ export const PageTemplate = ({ title, content }) => {
 PageTemplate.propTypes = {
   title: PropTypes.string.isRequired,
   content: PropTypes.string,
+  featuredMedia: PropTypes.shape({
+    caption: PropTypes.string,
+  }),
 }
 
 const Page = ({ data }) => {
@@ -27,7 +45,11 @@ const Page = ({ data }) => {
   return (
     <Layout>
       <Helmet title={page.title} />
-      <PageTemplate title={page.title} content={page.content} />
+      <PageTemplate
+        title={page.title}
+        content={page.content}
+        featuredMedia={page.featured_media}
+      />
     </Layout>
   )
 }
@@ -43,6 +65,12 @@ export const pageQuery = graphql`
     wordpressPage(id: { eq: $id }) {
       title
       content
+      featured_media {
+        caption
+        localFile {
+          ...FluidImage
+        }
+      }
     }
   }
 `
diff --git a/src/templates/venue.js b/src/templates/venue.js
index 8f70d06..e3310fa 100644
--- a/src/templates/venue.js
+++ b/src/templates/venue.js
@@ -51,17 +51,17 @@ export class VenueTemplate extends React.Component {
             dangerouslySetInnerHTML={{ __html: content }}
           />
           <div className="venue-meta">
-            <ul>
-              {floor && <li>Etasje: {floor}</li>}
-              {capacityLegal && <li>Branntillatelse for: {capacityLegal}</li>}
-              {capacityStanding && <li>Stående: {capacityStanding}</li>}
-              {capacitySitting && <li>Sittende: {capacitySitting}</li>}
-              {usedFor && <li>Bruk: {usedFor}</li>}
-              {bar && <li>Bar: {bar}</li>}
-              {audio && <li>Lyd: {audio}</li>}
-              {lighting && <li>Lys: {lighting}</li>}
-              {audioVideo && <li>A/V: {audioVideo}</li>}
-            </ul>
+            <table>
+              {floor && <tr><td>Etasje</td><td>{floor}</td></tr>}
+              {capacityLegal && <tr><td>Branntillatelse for</td><td>{capacityLegal}</td></tr>}
+              {capacityStanding && <tr><td>Stående</td><td>{capacityStanding}</td></tr>}
+              {capacitySitting && <tr><td>Sittende</td><td>{capacitySitting}</td></tr>}
+              {usedFor && <tr><td>Bruk</td><td>{usedFor}</td></tr>}
+              {bar && <tr><td>Bar</td><td>{bar}</td></tr>}
+              {audio && <tr><td>Lyd</td><td>{audio}</td></tr>}
+              {lighting && <tr><td>Lys</td><td>{lighting}</td></tr>}
+              {audioVideo && <tr><td>A/V</td><td>{audioVideo}</td></tr>}
+            </table>
           </div>
         </div>
         {isSingle && (