This is where the work on the Gallery System lives

components/gallerypager.js

@@ -1,12 +1,16 @@
 import ReactPaginate from "react-paginate";
 import { useRouter } from "next/router";
 import Image from 'next/image';
-import getConfig from 'next/config'
+import Link from 'next/link'
 
-const GalleryPager = ({gallery, basepath}) => {
+const GalleryPager = ({galleryImages, basepath, gallery}) => {
 
     const router = useRouter()
 
+    const handleImageClick = (e, path) => {
+        alert(path)
+    }
+
     const handlePagination = page => {
         const path = router.pathname
         const query = router.query
@@ -17,33 +21,77 @@ const GalleryPager = ({gallery, basepath}) => {
         })
     }
 
+    const carouselList = []
+    for (var i = 0; i < galleryImages.meta.pagination.total; i++) {
+        carouselList.push(<li data-target="carouselExample" data-slide-to={i}></li>)
+    }
+
     return (
         <div className="episode_pages col-sm-12">
             <div className="card-columns">
-                {gallery.data.map((galleryImage) => {
+                            {galleryImages.data.map((galleryImage) => {
-                    var imageUrl = basepath + galleryImage.attributes.Image.data.attributes.formats.small.url
+                                var imageUrl = basepath + galleryImage.attributes.Image.data.attributes.formats.small.url
-                    return (
+                                var imageLink = "/galleryimages/" + galleryImage.attributes.Slug
-                <div className="card p-3">
+                                return (
-                    <Image 
+                            <div className="card p-3 hover:cursor-pointer" data-target="#carouselExample" data-slide-to="0">
-                    src={imageUrl}
+                                <Link href={imageLink}><Image 
-                    layout="responsive"
+                                src={imageUrl}
-                    height={galleryImage.attributes.Image.data.attributes.formats.small.height}
+                                layout="responsive"
-                    width={galleryImage.attributes.Image.data.attributes.formats.small.width}
+                                height={galleryImage.attributes.Image.data.attributes.formats.small.height}
-                    key={galleryImage.attributes.id}
+                                width={galleryImage.attributes.Image.data.attributes.formats.small.width}
-                    className="card-img-top"
+                                key={galleryImage.attributes.id}
-                    alt={galleryImage.attributes.Title}></Image>
+                                className="card-img-top"
-                </div>
+                                alt={galleryImage.attributes.Title}
-                )})}
+                                ></Image></Link>
-            </div>
+                            </div>
-            
+                            )})}
+                        </div>
+           
+                <div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-hidden="true">
+                <div className="modal-dialog" role="document">
+                    <div className="modal-content">
+                    <div className="modal-header">
+                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                        </button>
+                    </div>
+                    <div className="modal-body">
+                    <div id="carouselExample" className="carousel slide" data-ride="carousel">
+                        <ol>
+                        {carouselList}
+                        </ol>
+                        <div className="carousel-inner">
+                         {galleryImages.data.map((galleryImage) => {
+                            <div className="carousel-item">
+                                <img className="d-block w-100"
+                                    src={basepath + galleryImage.attributes.Image.data.attributes.formats.medium.url}></img>
+                            </div>
+                         })}
+                         <a className="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
+            <span className="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span className="sr-only">Previous</span>
+          </a>
+          <a className="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
+            <span className="carousel-control-next-icon" aria-hidden="true"></span>
+            <span className="sr-only">Next</span>
+          </a>
+                        </div>
+                    </div>
+                    <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+        </div>
+    </div>
+</div>
+</div>
             <ReactPaginate
                 marginPagesDisplayed={2}
                 pageRangeDisplayed={5}
                 previousLabel={"previous"}
                 nextLabel={"next"}
                 breakLabel={"..."}
-                initialPage={gallery.page}
+                initialPage={galleryImages.page}
-                pageCount={gallery.meta.pagination.pageCount}
+                pageCount={galleryImages.meta.pagination.pageCount}
                 onPageChange={handlePagination} />
         </div>
     )

data/external/cms.js

@@ -292,6 +292,43 @@ export const getGallery = async (gallerySlug) => {
     return await galres.json()
 }
 
+export const getAllGalleryImages = async () => {
+    const { serverRuntimeConfig } = getConfig()
+    const qs = require('qs')
+
+    const imageres = await fetch(process.env.API + `gallery-images`, {
+        headers: new Headers({
+          'Authorization': serverRuntimeConfig.strapi_token,
+          'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    return imageres.json()
+}
+
+export const getGalleryImage = async (imageSlug) => {
+    const { serverRuntimeConfig } = getConfig()
+    const qs = require('qs')
+console.log("Imageslug: " +imageSlug)
+    var query = qs.stringify({
+        filters: {
+                Slug: {
+                    $eq: imageSlug
+                }
+        },
+        populate: '*'
+    })
+
+    const imageres = await fetch(process.env.API + `gallery-images?${query}`, {
+        headers: new Headers({
+          'Authorization': serverRuntimeConfig.strapi_token,
+          'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    return await imageres.json()
+}
+
 export const getGalleryImages = async (galleryId, page, limit) => {
     const { serverRuntimeConfig } = getConfig()
     const qs = require('qs')
@@ -324,7 +361,7 @@ export const getGalleryImages = async (galleryId, page, limit) => {
         })
     })
 
-    return galres.json()
+    return await galres.json()
 }
 
 export const getPodcastList = async (podcastStatus) => {

pages/galleries/[gallery].js

@@ -43,7 +43,7 @@ console.log(gallery)
             <meta name="og:description" content={ gallery.attributes.Description } key="description"></meta>
         </Head>
             <h1 className="page_title col-sm-12">{gallery.attributes.Title}</h1>
-            <GalleryPager gallery={galleryImages} basepath={serverRuntimeConfig.media_path}></GalleryPager>
+            <GalleryPager galleryImages={galleryImages} basepath={serverRuntimeConfig.media_path} gallery={gallery}></GalleryPager>
         </Layout>
     )
 }

pages/galleryimages/[galleryImage].js

@@ -0,0 +1,58 @@
+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";
+
+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>
+            <div className="col-sm-9"><h2>Photo Information</h2></div>
+        </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)
+
+    console.log(galImage.data[0].attributes.Title)
+
+    const pagedata = {
+        'title': "Angry Beanie - " + galImage.data[0].attributes.Title
+    }
+
+    return {
+        props: { pagedata, imageDetails: galImage, basepath: serverRuntimeConfig.media_path }
+    }
+}
+