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>
)

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Removing memory leaks in Angular is easy

Algorithms and Data Structures Part IV

3 Ways You May Don’t Know About Swap Two Numeric Variable Without a Temporary Variable

Creating a simple Safari App Extension in 10 minutes

Implement Debouncing in React in 3 Different Ways

Coding diary day 5: Arrays var fruits = [‘🍉’, ‘🍓’, ‘🍍’, ‘🍎’]

Android Native-React Native (cross-language Communication )

ElectronReact boilerplate package auto update

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

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

More from Medium

Painless development setup for React using Parcel (Part 1)

Svelte JS || Skill to add for 2022

Simple implementation of drag and drop between lists using React and Typescript without additional…