Bit of fiddling around with the Gallery code.

Still needs so much work

components/gallerylist.js

@@ -22,7 +22,7 @@ const GalleryList = ({gallery, basepath}) => {
             var image = gall.attributes.gallery_images.data[0].attributes.Image
             var imageUrl = basepath + image.data.attributes.formats.small.url
             return (
-                <a href={"/galleries/" + gall.attributes.Slug}>
+                <a href={"/gallery/" + gall.attributes.Slug}>
                     <div>{gall.attributes.Title}
                     <Image 
                     src={imageUrl}

components/gallerypager.js

@@ -5,6 +5,8 @@ import Link from 'next/link'
 
 const GalleryPager = ({galleryImages, basepath, gallery}) => {
 
+    console.log(gallery)
+
     const router = useRouter()
 
     const handleImageClick = (e, path) => {
@@ -31,7 +33,7 @@ const GalleryPager = ({galleryImages, basepath, gallery}) => {
             <div className="card-columns">
                             {galleryImages.data.map((galleryImage) => {
                                 var imageUrl = basepath + galleryImage.attributes.Image.data.attributes.formats.small.url
-                                var imageLink = "/galleryimages/" + galleryImage.attributes.Slug
+                                var imageLink = "/gallery/" + gallery.attributes.Slug + "/" + galleryImage.attributes.Slug
                                 return (
                             <div className="card p-3 hover:cursor-pointer" data-target="#carouselExample" data-slide-to="0">
                                 <Link href={imageLink}><Image 

data/external/cms.js

@@ -314,8 +314,11 @@ export const getGallery = async (gallerySlug) => {
 export const getAllGalleryImages = async () => {
     const { serverRuntimeConfig } = getConfig()
     const qs = require('qs')
+    var query = qs.stringify({
+        populate: '*'
+    })
 
-    const imageres = await fetch(process.env.API + `gallery-images`, {
+    const imageres = await fetch(process.env.API + `gallery-images?${query}`, {
         headers: new Headers({
           'Authorization': serverRuntimeConfig.strapi_token,
           'Content-Type': 'application/x-www-form-urlencoded'

pages/gallery/[gallery].js

@@ -4,7 +4,7 @@ import Layout from "../../components/main.js"
 import { getGallery, getGalleryImages } from "../../data/external/cms.js"
 import GalleryPager from "../../components/gallerypager.js"
 import Head from 'next/head'
-import config from "../../data/internal/config"
+import config from "../../data/internal/config.js"
 
 export async function getServerSideProps(context) {
 
@@ -24,12 +24,15 @@ export async function getServerSideProps(context) {
         'title': "Angry Beanie - " + gallery.data[0].attributes.Title
     }
     
+    const og_image = serverRuntimeConfig.media_path + galleryImages.data[0].attributes.Image.data.attributes.formats.large.url
+
     return {
-        props: {pagedata, gallery: gallery.data[0], galleryImages, serverRuntimeConfig},
+        props: {pagedata, gallery: gallery.data[0], galleryImages, serverRuntimeConfig, og_image},
     }
+
 }
 
-const Gallery = ({pagedata, gallery, galleryImages, serverRuntimeConfig}) => {
+const Gallery = ({pagedata, gallery, galleryImages, serverRuntimeConfig, og_image}) => {
     if (!gallery) return null
 
     return(
@@ -40,6 +43,7 @@ const Gallery = ({pagedata, gallery, galleryImages, serverRuntimeConfig}) => {
             <meta name="og:url" content={config.siteURL + "/galleries/" + gallery.attributes.Slug}></meta>
             <meta name="og:type" content="Photo Gallery"></meta>
             <meta name="og:title" content={ gallery.attributes.Title } key="title"></meta>
+            <meta name="og:image" content={og_image}></meta>
             <meta name="og:description" content={ gallery.attributes.Description } key="description"></meta>
         </Head>
             <h1 className="page_title col-sm-12">{gallery.attributes.Title}</h1>

pages/gallery/[gallery]/[galleryImage].js

@@ -1,10 +1,10 @@
 import Head from "next/head";
 import Image from "next/legacy/image";
 import getConfig from 'next/config'
-import "../../components/main.js"
+import "../../../components/main"
-import Layout from "../../components/main.js"
+import Layout from "../../../components/main.js"
-import { getAllGalleryImages, getGalleryImage } from "../../data/external/cms.js";
+import { getAllGalleryImages, getGalleryImage } from "../../../data/external/cms.js";
-import config from "../../data/internal/config"
+import config from "../../../data/internal/config.js"
 
 
 const galleryImage = ({pagedata, imageDetails, basepath, config} ) => {
@@ -36,7 +36,7 @@ const galleryImage = ({pagedata, imageDetails, basepath, config} ) => {
                 <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><strong>Gallery:</strong> <a href={"/gallery/" + 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.Description}}></p>
                 </div>
             </div>
@@ -48,8 +48,9 @@ export default galleryImage
 
 export async function getStaticPaths() {
     const posts = await getAllGalleryImages()
+    console.log(posts.data[1].attributes.galleries.data[0].attributes)
     const paths = posts.data.map((post) => ({
-        params: { galleryImage: post.attributes.Slug },
+        params: { galleryImage: post.attributes.Slug, gallery: post.attributes.galleries.data[0].attributes.Slug },
       }))
     return {
         paths,