Verified Commit 21b2fcb8 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Update image handling of static images

parent 9dc406fa
......@@ -29,8 +29,10 @@ const useStyles = makeStyles(
textAlign: 'center',
marginBottom: '0.7em',
},
image: {
imageContainer: {
gridArea: 'image',
},
image: {
borderRadius: '4px',
overflow: 'hidden',
},
......@@ -46,7 +48,14 @@ const useStyles = makeStyles(
{ name: 'boardImageGroup' }
)
const BoardImageGroup = ({ title, image, children, className, ...props }) => {
const BoardImageGroup = ({
title,
image,
imageType,
children,
className,
...props
}) => {
const classes = useStyles()
return (
......@@ -56,8 +65,15 @@ const BoardImageGroup = ({ title, image, children, className, ...props }) => {
{title}
</Typography>
)}
<div className={classes.image}>
<Image src={image} alt={title} ratioX={3} ratioY={2} />
<div className={classes.imageContainer}>
<Image
className={classes.image}
type={imageType}
src={image}
alt={title}
ratioX={3}
ratioY={2}
/>
</div>
<div className={classes.description}>{children}</div>
</div>
......@@ -67,8 +83,10 @@ const BoardImageGroup = ({ title, image, children, className, ...props }) => {
BoardImageGroup.propTypes = {
/** Title visible above the image group */
title: PropTypes.string,
/** URL to the image */
image: PropTypes.string,
/** URL to the image or fixed/fluid data object (from gatsby-image plugin) */
image: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
/** Image type specification */
imageType: PropTypes.oneOf(['dynamic', 'fixed', 'fluid']),
/** Description element(s) */
children: PropTypes.node,
/** @ignore */
......
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import Img from 'gatsby-image'
import { FormattedMessage } from 'gatsby-plugin-intl'
import { makeStyles } from '@material-ui/core/styles'
import Skeleton from '@material-ui/lab/Skeleton'
......@@ -14,14 +15,16 @@ const useStyles = makeStyles(
position: 'relative',
'& > *': {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translateX(-50%) translateY(-50%)',
maxWidth: '100%',
maxHeight: '100%',
},
},
centered: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translateX(-50%) translateY(-50%)',
},
hidden: {
visibility: 'hidden',
},
......@@ -38,8 +41,9 @@ const useStyles = makeStyles(
{ name: 'image' }
)
const Img = ({
const Image = ({
src,
type,
ratioX,
ratioY,
alt,
......@@ -63,53 +67,101 @@ const Img = ({
setError(true)
}
return (
<div
className={[classes.root, className].join(' ')}
style={{ paddingBottom: `${ratio}%` }}
{...props}
>
<img
src={src}
alt={alt}
className={!loaded || error ? classes.hidden : undefined}
onLoad={handleImageLoaded}
onError={handleImageError}
/>
{!loaded &&
(loadingPlaceholder || (
<Skeleton
width="100%"
height="100%"
variant="rect"
animation="wave"
/>
))}
{loaded && error && (
<div className={classes.error}>
<ErrorOutlineIcon />
<Typography>
<FormattedMessage id="error.image" />
</Typography>
</div>
)}
</div>
)
if (type === 'dynamic') {
return (
<div
className={[classes.root, className].join(' ')}
style={{ paddingBottom: `${ratio}%` }}
{...props}
>
<img
src={src}
alt={alt}
className={[
classes.centered,
!loaded || error ? classes.hidden : undefined,
].join(' ')}
onLoad={handleImageLoaded}
onError={handleImageError}
/>
{!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>
)
}
if (type === 'fluid') {
return <Img className={className} fluid={src} alt={alt} {...props} />
}
if (type === 'fixed') {
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>
// )
}
Img.propTypes = {
/** Target URL */
src: PropTypes.string,
Image.propTypes = {
/** Target URL or fixed/fluid data object for static files (gatsby-image plugin) */
src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
/** Image type */
type: PropTypes.oneOf(['dynamic', 'fixed', 'fluid']),
/** Alternative text shown when image could not be loaded */
alt: PropTypes.string,
/** Ratio number for x direction */
/** Ratio number for x direction (only applicable for type `dynamic`!) */
ratioX: PropTypes.number.isRequired,
/** Ratio number for y direction */
/** Ratio number for y direction (only applicable for type `dynamic`!) */
ratioY: PropTypes.number.isRequired,
/** Placeholder shown when image is loading */
/** Placeholder shown when image is loading (only applicable for type `dynamic`!) */
loadingPlaceholder: PropTypes.node,
/** Additional class applied to the outermost box */
/** @ignore */
className: PropTypes.string,
}
export default Img
Image.defaultProps = {
type: 'dynamic',
}
export default Image
......@@ -83,6 +83,11 @@ const BoardPage = () => {
) {
nodes {
name
childImageSharp {
fluid(maxWidth: 960) {
...GatsbyImageSharpFluid_noBase64
}
}
publicURL
}
}
......@@ -95,6 +100,11 @@ const BoardPage = () => {
limit: 1
) {
nodes {
childImageSharp {
fluid(maxWidth: 1920) {
...GatsbyImageSharpFluid_noBase64
}
}
publicURL
}
}
......@@ -107,12 +117,14 @@ const BoardPage = () => {
...jsonData.data,
name: jsonData.name,
image: (imageNodes.find(node => node.name === jsonData.name) || {})
.publicURL,
.childImageSharp.fluid,
// image: (imageNodes.find(node => node.name === jsonData.name) || {})
// .publicURL,
}))
}, [jsonNodes, imageNodes])
const boardImage =
boardImageNodes && boardImageNodes.length > 0
? boardImageNodes[0].publicURL
? boardImageNodes[0].childImageSharp.fluid
: null
const handleTabChange = (group, newValue) => {
......@@ -140,6 +152,7 @@ const BoardPage = () => {
{boardImage && (
<div className={classes.boardImage}>
<Image
type="fluid"
src={boardImage}
alt={intl.formatMessage({ id: 'board.title' })}
ratioX={3}
......@@ -161,6 +174,7 @@ const BoardPage = () => {
key={groupIndex}
title={item.showRoles ? Array.from(roles).join(' & ') : null}
image={item.image}
imageType="fluid"
>
<Tabs
className={classes.tabs}
......
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