2022-08-23 14:26:48 +10:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import Image from "next/image";
|
|
|
|
|
import getConfig from 'next/config'
|
|
|
|
|
import "../../components/main.js"
|
|
|
|
|
import Layout from "../../components/main.js"
|
|
|
|
|
import { getAllGalleryImages, getGalleryImage } from "../../data/external/cms.js";
|
|
|
|
|
|
2022-09-08 16:41:46 +10:00
|
|
|
|
2022-08-23 14:26:48 +10:00
|
|
|
const galleryImage = ({pagedata, imageDetails, basepath} ) => {
|
|
|
|
|
if(!imageDetails) return null
|
|
|
|
|
|
|
|
|
|
return (<Layout pagedata={pagedata} imageDetails={imageDetails}>
|
|
|
|
|
<Head>
|
|
|
|
|
|
|
|
|
|
</Head>
|
|
|
|
|
<div className="main_content col-sm-12">
|
|
|
|
|
<Image
|
|
|
|
|
src={basepath + imageDetails.data[0].attributes.Image.data.attributes.formats.large.url}
|
|
|
|
|
layout="responsive"
|
|
|
|
|
width={imageDetails.data[0].attributes.Image.data.attributes.formats.large.width}
|
|
|
|
|
height={imageDetails.data[0].attributes.Image.data.attributes.formats.large.height}
|
|
|
|
|
></Image>
|
2022-09-08 16:41:46 +10:00
|
|
|
<div className="col-sm-9 article_body">
|
|
|
|
|
<h2>Photo Information</h2>
|
|
|
|
|
<div>
|
|
|
|
|
<p><strong>Title:</strong> {imageDetails.data[0].attributes.Title}</p>
|
|
|
|
|
<p><strong>Gallery:</strong> <a href={"/galleries/" + imageDetails.data[0].attributes.galleries.data[0].attributes.Slug}>{imageDetails.data[0].attributes.galleries.data[0].attributes.Title}</a></p>
|
|
|
|
|
<p dangerouslySetInnerHTML={{ __html: imageDetails.data[0].attributes.galleries.data[0].attributes.Description}}></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-08-23 14:26:48 +10:00
|
|
|
</div>
|
|
|
|
|
</Layout>)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default galleryImage
|
|
|
|
|
|
|
|
|
|
export async function getStaticPaths() {
|
|
|
|
|
const posts = await getAllGalleryImages()
|
|
|
|
|
const paths = posts.data.map((post) => ({
|
|
|
|
|
params: { galleryImage: post.attributes.Slug },
|
|
|
|
|
}))
|
|
|
|
|
return {
|
|
|
|
|
paths,
|
|
|
|
|
fallback: true // false or 'blocking'
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function getStaticProps (context){
|
|
|
|
|
|
|
|
|
|
const { serverRuntimeConfig } = getConfig()
|
|
|
|
|
|
|
|
|
|
const slug = context.params.galleryImage
|
|
|
|
|
|
|
|
|
|
const galImage = await getGalleryImage(slug)
|
|
|
|
|
|
|
|
|
|
const pagedata = {
|
|
|
|
|
'title': "Angry Beanie - " + galImage.data[0].attributes.Title
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
2022-09-08 16:41:46 +10:00
|
|
|
props: { pagedata, imageDetails: galImage, basepath: serverRuntimeConfig.media_path },
|
|
|
|
|
revalidate: 60
|
2022-08-23 14:26:48 +10:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
