Verified Commit a22ce02a authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Fix image handling on board history page

parent 21b2fcb8
import React from 'react'
import PropTypes from 'prop-types'
import { useIntl } from 'gatsby-plugin-intl'
import { makeStyles } from '@material-ui/core/styles'
import { Typography } from '@material-ui/core'
......
......@@ -29,8 +29,6 @@ const useStyles = makeStyles(
visibility: 'hidden',
},
error: {
width: '100%',
'& > *': {
display: 'inline-block',
verticalAlign: 'middle',
......@@ -105,6 +103,22 @@ const Image = ({
</div>
)
}
if (!src) {
return (
<div
className={[classes.root, className].join(' ')}
style={{ paddingBottom: `${ratio}%` }}
{...props}
>
<div className={[classes.centered, classes.error].join(' ')}>
<ErrorOutlineIcon />
<Typography>
<FormattedMessage id="missing.image" />
</Typography>
</div>
</div>
)
}
if (type === 'fluid') {
return <Img className={className} fluid={src} alt={alt} {...props} />
}
......@@ -112,35 +126,6 @@ const Image = ({
return <Img className={className} fixed={src} alt={alt} {...props} />
}
return null
// return (
// <div
// className={[classes.root, className].join(' ')}
// style={styles}
// {...props}
// >
// {image}
// {!staticFile &&
// !loaded &&
// (loadingPlaceholder || (
// <Skeleton
// className={classes.centered}
// width="100%"
// height="100%"
// variant="rect"
// animation="wave"
// />
// ))}
// {loaded && error && (
// <div className={[classes.centered, classes.error].join(' ')}>
// <ErrorOutlineIcon />
// <Typography>
// <FormattedMessage id="error.image" />
// </Typography>
// </div>
// )}
// </div>
// )
}
Image.propTypes = {
......
......@@ -25,7 +25,7 @@ const useStyles = makeStyles(
listStyle: 'none',
padding: 0,
margin: 0,
fontSize: '1.75em',
fontSize: '1.5em',
lineHeight: '1.75em',
},
name: {
......@@ -74,7 +74,11 @@ const BoardHistoryPage = () => {
) {
nodes {
name
publicURL
childImageSharp {
fluid(maxWidth: 960) {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
}
......@@ -85,8 +89,11 @@ const BoardHistoryPage = () => {
return jsonNodes.map(jsonData => ({
members: jsonData.data.members,
name: jsonData.name,
image: (imageNodes.find(node => node.name === jsonData.name) || {})
.publicURL,
image: (
imageNodes.find(node => node.name === jsonData.name) || {
childImageSharp: {},
}
).childImageSharp.fluid,
}))
}, [jsonNodes, imageNodes])
......@@ -113,7 +120,12 @@ const BoardHistoryPage = () => {
id: `board.old.${semester}`,
})} ${year}`
return (
<ImageGroup key={name} title={title} image={item.image}>
<ImageGroup
key={name}
title={title}
image={item.image}
imageType="fluid"
>
<ul className={classes.members}>
{item.members.map((member, index) => {
return (
......
......@@ -88,7 +88,6 @@ const BoardPage = () => {
...GatsbyImageSharpFluid_noBase64
}
}
publicURL
}
}
boardImage: allFile(
......@@ -105,7 +104,6 @@ const BoardPage = () => {
...GatsbyImageSharpFluid_noBase64
}
}
publicURL
}
}
}
......@@ -116,10 +114,11 @@ const BoardPage = () => {
return jsonNodes.map(jsonData => ({
...jsonData.data,
name: jsonData.name,
image: (imageNodes.find(node => node.name === jsonData.name) || {})
.childImageSharp.fluid,
// image: (imageNodes.find(node => node.name === jsonData.name) || {})
// .publicURL,
image: (
imageNodes.find(node => node.name === jsonData.name) || {
childImageSharp: {},
}
).childImageSharp.fluid,
}))
}, [jsonNodes, imageNodes])
const boardImage =
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment