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
Taylor Nodell

Taylor Nodell

31 Followers

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor