This is where the work on the Gallery System lives
This commit is contained in:
parent
d5a8feacdc
commit
027915e981
4 changed files with 165 additions and 22 deletions
|
|
@ -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 imageLink = "/galleryimages/" + galleryImage.attributes.Slug
|
||||
return (
|
||||
<div className="card p-3">
|
||||
<Image
|
||||
<div className="card p-3 hover:cursor-pointer" data-target="#carouselExample" data-slide-to="0">
|
||||
<Link href={imageLink}><Image
|
||||
src={imageUrl}
|
||||
layout="responsive"
|
||||
height={galleryImage.attributes.Image.data.attributes.formats.small.height}
|
||||
width={galleryImage.attributes.Image.data.attributes.formats.small.width}
|
||||
key={galleryImage.attributes.id}
|
||||
className="card-img-top"
|
||||
alt={galleryImage.attributes.Title}></Image>
|
||||
alt={galleryImage.attributes.Title}
|
||||
></Image></Link>
|
||||
</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}
|
||||
pageCount={gallery.meta.pagination.pageCount}
|
||||
initialPage={galleryImages.page}
|
||||
pageCount={galleryImages.meta.pagination.pageCount}
|
||||
onPageChange={handlePagination} />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
39
data/external/cms.js
vendored
39
data/external/cms.js
vendored
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
58
pages/galleryimages/[galleryImage].js
Executable file
58
pages/galleryimages/[galleryImage].js
Executable file
|
|
@ -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 }
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue