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

Added image support to featured article on homepage

Browse source
This commit is contained in:
James Purser 2022-06-27 11:31:19 +10:00
parent a0c10974c9
commit 4a13a87a51
1 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
pages/index.js
View file

@ -22,8 +22,10 @@ export async function getStaticProps(context) {
pagination: { pagination: {
limit: 1 limit: 1
}, },
populate: {
FeatureImage: '*'
},
sort: ['publishedAt:desc'], sort: ['publishedAt:desc'],
fields: ['Title', 'Slug', 'Abstract']
}, { }, {
encodeValuesOnly: true, encodeValuesOnly: true,
}) })
@ -37,9 +39,9 @@ export async function getStaticProps(context) {
const artdata = await res.json() const artdata = await res.json()
const article = artdata.data[0].attributes const article = artdata.data[0].attributes
console.log(article)
const epdata = await getLatestPodcastEpisode() const epdata = await getLatestPodcastEpisode()
console.log(epdata.Logo.data.attributes)
const flickr = await fetch('https://www.flickr.com/services/feeds/photos_public.gne?id=25875680@N05&lang=en-us&format=json&nojsoncallback=1') const flickr = await fetch('https://www.flickr.com/services/feeds/photos_public.gne?id=25875680@N05&lang=en-us&format=json&nojsoncallback=1')
const flickrdata = await flickr.json() const flickrdata = await flickr.json()
@ -71,7 +73,15 @@ 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">
{/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */}
<Image
src={props.article.FeatureImage.data.attributes.formats.thumbnail.url}
alt={props.article.Title}
layout="fixed"
height={props.article.FeatureImage.data.attributes.formats.thumbnail.height}
width={props.article.FeatureImage.data.attributes.formats.thumbnail.width}
className="card-img-top"
></Image>
</div> </div>
<div className="card-title"> <div className="card-title">
<h3>Latest Blog Post</h3> <h3>Latest Blog Post</h3>
@ -88,7 +98,7 @@ function HomePage (props) {
<div className="card-img-top"> <div className="card-img-top">
{/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */} {/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */}
<Image <Image
src={props.siteConfig.siteURL + props.episodedata.Logo.data.attributes.formats.thumbnail.url} src={props.episodedata.Logo.data.attributes.formats.thumbnail.url}
alt={episode.show} alt={episode.show}
layout="fixed" layout="fixed"
height={props.episodedata.Logo.data.attributes.formats.thumbnail.height} height={props.episodedata.Logo.data.attributes.formats.thumbnail.height}