purserj/angrybeanie-front-end
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Finished integrating basic Gallery image page

Browse source
This commit is contained in:
James Purser 2022-09-08 16:41:46 +10:00
parent 027915e981
commit 89a8069f1a
4 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
data/external/cms.js vendored
View file

@ -306,10 +306,31 @@ export const getAllGalleryImages = async () => {
return imageres.json() return imageres.json()
} }
export const getLatestGalleryImage = async () => {
const { serverRuntimeConfig } = getConfig()
const qs = require('qs')
var query = qs.stringify({
pagination: {
page: 1,
pageSize: 1
},
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 imageres.json()
}
export const getGalleryImage = async (imageSlug) => { export const getGalleryImage = async (imageSlug) => {
const { serverRuntimeConfig } = getConfig() const { serverRuntimeConfig } = getConfig()
const qs = require('qs') const qs = require('qs')
console.log("Imageslug: " +imageSlug)
var query = qs.stringify({ var query = qs.stringify({
filters: { filters: {
Slug: { Slug: {
@ -337,8 +358,6 @@ export const getGalleryImages = async (galleryId, page, limit) => {
page = 0 page = 0
} }
console.log(page)
var query = qs.stringify({ var query = qs.stringify({
filters: { filters: {
galleries: { galleries: {

2
pages/galleries/[gallery].js
View file

@ -31,7 +31,7 @@ export async function getServerSideProps(context) {
const Gallery = ({pagedata, gallery, galleryImages, serverRuntimeConfig}) => { const Gallery = ({pagedata, gallery, galleryImages, serverRuntimeConfig}) => {
if (!gallery) return null if (!gallery) return null
console.log(gallery)
return( return(
<Layout pagedata={pagedata}> <Layout pagedata={pagedata}>
<Head> <Head>

15
pages/galleryimages/[galleryImage].js
View file

@ -5,6 +5,7 @@ import "../../components/main.js"
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";
const galleryImage = ({pagedata, imageDetails, basepath} ) => { const galleryImage = ({pagedata, imageDetails, basepath} ) => {
if(!imageDetails) return null if(!imageDetails) return null
@ -19,7 +20,14 @@ const galleryImage = ({pagedata, imageDetails, basepath} ) => {
width={imageDetails.data[0].attributes.Image.data.attributes.formats.large.width} width={imageDetails.data[0].attributes.Image.data.attributes.formats.large.width}
height={imageDetails.data[0].attributes.Image.data.attributes.formats.large.height} height={imageDetails.data[0].attributes.Image.data.attributes.formats.large.height}
></Image> ></Image>
<div className="col-sm-9"><h2>Photo Information</h2></div> <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>
</div> </div>
</Layout>) </Layout>)
} }
@ -45,14 +53,13 @@ export async function getStaticProps (context){
const galImage = await getGalleryImage(slug) const galImage = await getGalleryImage(slug)
console.log(galImage.data[0].attributes.Title)
const pagedata = { const pagedata = {
'title': "Angry Beanie - " + galImage.data[0].attributes.Title 'title': "Angry Beanie - " + galImage.data[0].attributes.Title
} }
return { return {
props: { pagedata, imageDetails: galImage, basepath: serverRuntimeConfig.media_path } props: { pagedata, imageDetails: galImage, basepath: serverRuntimeConfig.media_path },
revalidate: 60
} }
} }

9
pages/index.js
View file

@ -9,6 +9,7 @@ import { FEEDS, getFeed } from "../lib/rss"
import { generatePodcastFeeds, generateRssFeed } from "../data/internal/feed-generator" import { generatePodcastFeeds, generateRssFeed } from "../data/internal/feed-generator"
import { generateSitemap } from "../data/internal/sitemap-generator" import { generateSitemap } from "../data/internal/sitemap-generator"
import { getLatestPodcastEpisode } from "../data/external/cms" import { getLatestPodcastEpisode } from "../data/external/cms"
import { getLatestGalleryImage } from "../data/external/cms"
export async function getStaticProps(context) { export async function getStaticProps(context) {
generateRssFeed() generateRssFeed()
@ -42,9 +43,7 @@ export async function getStaticProps(context) {
const epdata = await getLatestPodcastEpisode() const epdata = await getLatestPodcastEpisode()
const flickr = await fetch('https://www.flickr.com/services/feeds/photos_public.gne?id=25875680@N05&lang=en-us&format=json&nojsoncallback=1') const firstimage = await getLatestGalleryImage()
const flickrdata = await flickr.json()
const firstimage = flickrdata.items[0]
const pagedata = {'title': 'Angry Beanie'} const pagedata = {'title': 'Angry Beanie'}
@ -118,8 +117,8 @@ function HomePage (props) {
<div className="col-sm-4"> <div className="col-sm-4">
<div className="card"> <div className="card">
<div className="card-img-top"> <div className="card-img-top">
<a href={props.firstimage.link} target="_blank"> <a href={"/galleryimages/" + props.firstimage.data[0].attributes.Slug}>
<img className="featuredFlickr" src={ props.firstimage.media.m }></img> <img className="featuredFlickr" src={ props.config.media_path + props.firstimage.data[0].attributes.Image.data.attributes.formats.thumbnail.url }></img>
</a> </a>
</div> </div>
<div className="card-title"> <div className="card-title">