Skip to content

Refactor: using-contentful to use gatsby-plugin-image exclusively #30717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 13, 2021
Merged

Refactor: using-contentful to use gatsby-plugin-image exclusively #30717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3904c3
refactor: use gatsby-plugin-image only
axe312ger Apr 6, 2021
a235716
fix: improve header layout and use layout on image example page
axe312ger Apr 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion examples/using-contentful/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
"dependencies": {
"gatsby": "next",
"gatsby-core-utils": "next",
"gatsby-image": "next",
"gatsby-plugin-image": "next",
"gatsby-plugin-sharp": "next",
"gatsby-plugin-typography": "next",
Expand Down
74 changes: 42 additions & 32 deletions examples/using-contentful/src/layouts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,48 @@ const propTypes = {
}

const DefaultLayout = ({ children }) => (
<div
style={{
margin: `0 auto`,
marginTop: rhythm(1.5),
marginBottom: rhythm(1.5),
maxWidth: 650,
paddingLeft: rhythm(3 / 4),
paddingRight: rhythm(3 / 4),
}}
>
<Link style={{ textDecoration: `none` }} to="/">
<h3 style={{ color: `tomato`, marginBottom: rhythm(1.5) }}>
Example of using Contentful as a data source for a Gatsby site
</h3>
</Link>
{children}
<hr style={{ marginTop: rhythm(3) }} />
<p>
The src for this website is at
{` `}
<a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful">
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful
</a>
</p>
<p>
The Contentful site that is providing the data for this site is at
{` `}
<a href="https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1">
https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1
</a>
</p>
</div>
<>
<header
style={{
textAlign: "center",
backgroundColor: `tomato`,
padding: rhythm(1 / 2),
}}
>
<Link style={{ textDecoration: `none` }} to="/">
<h4 style={{ color: `white`, marginBottom: 0 }}>
Example of using Contentful as a data source for a Gatsby site
</h4>
</Link>
</header>
<div
style={{
margin: `0 auto`,
marginTop: rhythm(1.5),
marginBottom: rhythm(1.5),
maxWidth: 650,
paddingLeft: rhythm(3 / 4),
paddingRight: rhythm(3 / 4),
}}
>
{children}
<hr style={{ marginTop: rhythm(3) }} />
<p>
The src for this website is at
{` `}
<a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful">
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful
</a>
</p>
<p>
The Contentful site that is providing the data for this site is at
{` `}
<a href="https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1">
https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1
</a>
</p>
</div>
</>
)

DefaultLayout.propTypes = propTypes
Expand Down
199 changes: 99 additions & 100 deletions examples/using-contentful/src/pages/image-api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React from "react"
import { graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"

import Layout from "../layouts"
import { rhythm } from "../utils/typography"

const ImageAPI = props => {
const assets = props.data.allContentfulAsset.edges
return (
<>
<Layout>
<div
style={{
margin: `0 auto`,
Expand Down Expand Up @@ -161,12 +162,11 @@ const ImageAPI = props => {
image={assets[1].node.fullWidth}
style={{}}
/>
<Layout>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
allContentfulAsset {
edges {
node {
Expand All @@ -176,36 +176,36 @@ const ImageAPI = props => {
}
}
}`,
}}
/>
</pre>
<h2 id="dominant">Dominant color previews</h2>
<p>
This calculates the dominant color of the source image and uses it as
a solid background color.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, dominant } }) => (
<div key={id}>
<GatsbyImage
image={dominant}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
/>
</pre>
<h2 id="dominant">Dominant color previews</h2>
<p>
This calculates the dominant color of the source image and uses it as a
solid background color.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, dominant } }) => (
<div key={id}>
<GatsbyImage
image={dominant}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
allContentfulAsset {
edges {
node {
Expand All @@ -219,36 +219,36 @@ const ImageAPI = props => {
}
}
}`,
}}
/>
</pre>
<h2 id="blurred">Blurred previews</h2>
<p>
This generates a very low-resolution version of the source image and
displays it as a blurred background.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, blurred } }) => (
<div key={id}>
<GatsbyImage
image={blurred}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
/>
</pre>
<h2 id="blurred">Blurred previews</h2>
<p>
This generates a very low-resolution version of the source image and
displays it as a blurred background.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, blurred } }) => (
<div key={id}>
<GatsbyImage
image={blurred}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
allContentfulAsset {
edges {
node {
Expand All @@ -262,37 +262,37 @@ const ImageAPI = props => {
}
}
}`,
}}
/>
</pre>
<h2 id="traced">Traced SVG previews</h2>
<p>
This generates a simplified, flat SVG version of the source image,
which it displays as a placeholder. This works well for images with
simple shapes or that include transparency.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, traced } }) => (
<div key={id}>
<GatsbyImage
image={traced}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
/>
</pre>
<h2 id="traced">Traced SVG previews</h2>
<p>
This generates a simplified, flat SVG version of the source image, which
it displays as a placeholder. This works well for images with simple
shapes or that include transparency.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, traced } }) => (
<div key={id}>
<GatsbyImage
image={traced}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
allContentfulAsset {
edges {
node {
Expand All @@ -306,11 +306,10 @@ const ImageAPI = props => {
}
}
}`,
}}
/>
</pre>
</Layout>
</>
}}
/>
</pre>
</Layout>
)
}

Expand Down
21 changes: 11 additions & 10 deletions examples/using-contentful/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from "react"
import { Link, graphql } from "gatsby"
import * as PropTypes from "prop-types"
import Img from "gatsby-image"

import { Link, graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"

import { rhythm } from "../utils/typography"
import Layout from "../layouts"

Expand All @@ -25,8 +27,11 @@ const Product = ({ node }) => (
}}
>
<div style={{ marginRight: rhythm(1 / 2) }}>
{node.image[0].fixed.src && (
<Img style={{ margin: 0 }} fixed={node.image[0].fixed} />
{node.image[0].gatsbyImageData && (
<GatsbyImage
style={{ margin: 0 }}
image={node.image[0].gatsbyImageData}
/>
)}
</div>
<div style={{ flex: 1 }}>{node.productName.productName}</div>
Expand Down Expand Up @@ -89,9 +94,7 @@ export const pageQuery = graphql`
productName
}
image {
fixed(width: 75) {
...GatsbyContentfulFixed
}
gatsbyImageData(layout: FIXED, width: 75)
}
}
}
Expand All @@ -104,9 +107,7 @@ export const pageQuery = graphql`
productName
}
image {
fixed(width: 75) {
...GatsbyContentfulFixed
}
gatsbyImageData(layout: FIXED, width: 75)
}
}
}
Expand Down
Loading