2020-05-22 14:38:19 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2019-10-02 13:35:50 +02:00
|
|
|
import { graphql } from 'gatsby'
|
2019-10-28 23:00:55 +01:00
|
|
|
import Img from 'gatsby-image'
|
|
|
|
import { ImageProps } from '../../@types/Image'
|
2021-03-06 01:35:05 +01:00
|
|
|
import * as styles from './Image.module.css'
|
2019-10-02 13:35:50 +02:00
|
|
|
|
2020-05-22 14:38:19 +02:00
|
|
|
export const Image = ({
|
|
|
|
title,
|
|
|
|
fluid,
|
|
|
|
fixed,
|
|
|
|
alt,
|
2021-03-04 01:20:39 +01:00
|
|
|
original,
|
|
|
|
className
|
2020-05-22 14:38:19 +02:00
|
|
|
}: ImageProps): ReactElement => (
|
2021-03-04 01:20:39 +01:00
|
|
|
<figure
|
|
|
|
className={`${styles.image} ${className ? className : ''}`}
|
|
|
|
data-original={original && original.src}
|
|
|
|
>
|
2021-03-07 02:48:05 +01:00
|
|
|
<Img
|
|
|
|
backgroundColor="transparent"
|
|
|
|
fluid={fluid}
|
|
|
|
fixed={fixed}
|
|
|
|
alt={alt}
|
|
|
|
imgStyle={{ objectFit: 'contain' }}
|
|
|
|
/>
|
2019-11-08 18:06:56 +01:00
|
|
|
{title && <figcaption className={styles.imageTitle}>{title}</figcaption>}
|
|
|
|
</figure>
|
2019-10-28 23:00:55 +01:00
|
|
|
)
|
2019-10-02 13:35:50 +02:00
|
|
|
|
|
|
|
export const imageSizeDefault = graphql`
|
|
|
|
fragment ImageFluid on ImageSharp {
|
2019-10-28 23:00:55 +01:00
|
|
|
original {
|
|
|
|
src
|
|
|
|
}
|
2021-03-04 22:53:35 +01:00
|
|
|
fluid(maxWidth: 950, quality: 85) {
|
2019-10-02 13:35:50 +02:00
|
|
|
...GatsbyImageSharpFluid_withWebp_noBase64
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
|
|
|
export const imageSizeThumb = graphql`
|
|
|
|
fragment ImageFluidThumb on ImageSharp {
|
2019-10-28 23:00:55 +01:00
|
|
|
original {
|
|
|
|
src
|
|
|
|
}
|
2020-07-19 13:31:27 +02:00
|
|
|
fluid(maxWidth: 420, maxHeight: 140, quality: 85, cropFocus: CENTER) {
|
|
|
|
...GatsbyImageSharpFluid_withWebp_noBase64
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
|
|
|
export const photoSizeThumb = graphql`
|
|
|
|
fragment PhotoFluidThumb on ImageSharp {
|
|
|
|
original {
|
|
|
|
src
|
|
|
|
}
|
|
|
|
fluid(maxWidth: 300, maxHeight: 300, quality: 85, cropFocus: CENTER) {
|
2019-10-02 13:35:50 +02:00
|
|
|
...GatsbyImageSharpFluid_withWebp_noBase64
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|