Building A Photo Blog on Strapi Gatsby And Typescript: Part 3 Frontend

Before JPG quality increase on left, notice the chunks. White square to highlight compression
childImageSharp {
fluid(maxWidth: 4000, quality: 90) {
...GatsbyImageSharpFluid
}
Blue Mink Picture at image quality 10
Chunky
const Photo: React.FC<PhotoProps> = ({ data }) => {
const photo = data.strapiPhoto
const aspectRatio = photo.image.imageFile.childImageSharp.fluid.aspectRatio
const isPortraitOrientation = aspectRatio < 1
return (
<LayoutRoot>
{isPortraitOrientation ? (
<div className={styles.portraitPhotoContainer}>
<div className={styles.portraitRowContainer}>
<div className={classnames(styles.imageContainer, styles.portraitImageContainer)}>
<Img fluid={photo.image.imageFile.childImageSharp.fluid} />
</div>
<div className={styles.portraitTextContainer}>
<PhotoDesc photoData={photo} />
</div>
</div>
</div>
) : (
<div className={styles.photoContainer}>
<div className={classnames(styles.imageContainer)}>
<Img fluid={photo.image.imageFile.childImageSharp.fluid} />
</div>
<PhotoDesc photoData={photo} />
</div>
)}
</LayoutRoot>
)
}
/* Portrait */
@media screen and (min-width: 600px) {
.portraitImageContainer {
max-width: 550px;
}
}
@media screen and (max-width: 900px) {
.portraitRowContainer {
flex-direction: column;
align-items: center;
}
.portraitTextContainer {
padding-left: 0;
}
}
Desktop and mobile views of a portrait image of kangaroos
Mobile vs Desktop views
const PhotoSeo: React.FC<PhotoSeoProps> = ({ seoProps }) => (
<Helmet
meta={[
{
name: `description`,
content: seoProps.description
},
{
name: `keywords`,
content: seoProps.keywords.join(' ')
},
{
property: `og:title`,
content: seoProps.title
},
{
property: `og:description`,
content: seoProps.description
}
]}
></Helmet>
)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store