2019-10-02 13:35:50 +02:00
|
|
|
import React from 'react'
|
|
|
|
import { graphql } from 'gatsby'
|
2019-10-28 23:00:55 +01:00
|
|
|
import Img from 'gatsby-image'
|
|
|
|
import { ImageProps } from '../../@types/Image'
|
2019-11-08 18:06:56 +01:00
|
|
|
import styles from './Image.module.scss'
|
2019-10-02 13:35:50 +02:00
|
|
|
|
2019-11-08 18:06:56 +01:00
|
|
|
export const Image = ({ title, fluid, fixed, alt, original }: ImageProps) => (
|
|
|
|
<figure className={styles.image} data-original={original && original.src}>
|
|
|
|
<Img backgroundColor="transparent" fluid={fluid} fixed={fixed} alt={alt} />
|
|
|
|
{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
|
|
|
|
}
|
2019-10-02 13:35:50 +02:00
|
|
|
fluid(maxWidth: 940, quality: 85) {
|
|
|
|
...GatsbyImageSharpFluid_withWebp_noBase64
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
|
|
|
export const imageSizeThumb = graphql`
|
|
|
|
fragment ImageFluidThumb on ImageSharp {
|
2019-10-28 23:00:55 +01:00
|
|
|
original {
|
|
|
|
src
|
|
|
|
}
|
|
|
|
fluid(maxWidth: 400, maxHeight: 170, quality: 85, cropFocus: CENTER) {
|
2019-10-02 13:35:50 +02:00
|
|
|
...GatsbyImageSharpFluid_withWebp_noBase64
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|