Add featured images to regular pages. Turn venue info into a table.
This commit is contained in:
ponas committed
1 parent
26cdddd41a
commit
0407f82efa
4 files changed
+94
-26
No files matched your search
+38
-4
@@ -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
|
||||
|
||||
+15
-9
@@ -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 }) => {
|
||||
|
||||
+30
-2
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
+11
-11
@@ -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 && (
|
||||
|
||||
Reference in new issue
Block a user