Skip to content

Commit e5b9222

Browse files
axe312geraxe312ger
authored
Refactor: using-contentful to use gatsby-plugin-image exclusively (#30717)
* refactor: use gatsby-plugin-image only * fix: improve header layout and use layout on image example page
1 parent 7ebf454 commit e5b9222

File tree

6 files changed

+184
-179
lines changed

6 files changed

+184
-179
lines changed

‎examples/using-contentful/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
"dependencies": {
88
"gatsby": "next",
99
"gatsby-core-utils": "next",
10-
"gatsby-image": "next",
1110
"gatsby-plugin-image": "next",
1211
"gatsby-plugin-sharp": "next",
1312
"gatsby-plugin-typography": "next",

‎examples/using-contentful/src/layouts/index.js‎

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,48 @@ const propTypes = {
99
}
1010

1111
const DefaultLayout = ({ children }) => (
12-
<div
13-
style={{
14-
margin: `0 auto`,
15-
marginTop: rhythm(1.5),
16-
marginBottom: rhythm(1.5),
17-
maxWidth: 650,
18-
paddingLeft: rhythm(3 / 4),
19-
paddingRight: rhythm(3 / 4),
20-
}}
21-
>
22-
<Link style={{ textDecoration: `none` }} to="/">
23-
<h3 style={{ color: `tomato`, marginBottom: rhythm(1.5) }}>
24-
Example of using Contentful as a data source for a Gatsby site
25-
</h3>
26-
</Link>
27-
{children}
28-
<hr style={{ marginTop: rhythm(3) }} />
29-
<p>
30-
The src for this website is at
31-
{` `}
32-
<a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful">
33-
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful
34-
</a>
35-
</p>
36-
<p>
37-
The Contentful site that is providing the data for this site is at
38-
{` `}
39-
<a href="https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1">
40-
https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1
41-
</a>
42-
</p>
43-
</div>
12+
<>
13+
<header
14+
style={{
15+
textAlign: "center",
16+
backgroundColor: `tomato`,
17+
padding: rhythm(1 / 2),
18+
}}
19+
>
20+
<Link style={{ textDecoration: `none` }} to="/">
21+
<h4 style={{ color: `white`, marginBottom: 0 }}>
22+
Example of using Contentful as a data source for a Gatsby site
23+
</h4>
24+
</Link>
25+
</header>
26+
<div
27+
style={{
28+
margin: `0 auto`,
29+
marginTop: rhythm(1.5),
30+
marginBottom: rhythm(1.5),
31+
maxWidth: 650,
32+
paddingLeft: rhythm(3 / 4),
33+
paddingRight: rhythm(3 / 4),
34+
}}
35+
>
36+
{children}
37+
<hr style={{ marginTop: rhythm(3) }} />
38+
<p>
39+
The src for this website is at
40+
{` `}
41+
<a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful">
42+
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful
43+
</a>
44+
</p>
45+
<p>
46+
The Contentful site that is providing the data for this site is at
47+
{` `}
48+
<a href="https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1">
49+
https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1
50+
</a>
51+
</p>
52+
</div>
53+
</>
4454
)
4555

4656
DefaultLayout.propTypes = propTypes

‎examples/using-contentful/src/pages/image-api.js‎

Lines changed: 99 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from "react"
22
import { graphql } from "gatsby"
33
import { GatsbyImage } from "gatsby-plugin-image"
4+
45
import Layout from "../layouts"
56
import { rhythm } from "../utils/typography"
67

78
const ImageAPI = props => {
89
const assets = props.data.allContentfulAsset.edges
910
return (
10-
<>
11+
<Layout>
1112
<div
1213
style={{
1314
margin: `0 auto`,
@@ -161,12 +162,11 @@ const ImageAPI = props => {
161162
image={assets[1].node.fullWidth}
162163
style={{}}
163164
/>
164-
<Layout>
165-
<h4>GraphQL query</h4>
166-
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
167-
<code
168-
dangerouslySetInnerHTML={{
169-
__html: `{
165+
<h4>GraphQL query</h4>
166+
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
167+
<code
168+
dangerouslySetInnerHTML={{
169+
__html: `{
170170
allContentfulAsset {
171171
edges {
172172
node {
@@ -176,36 +176,36 @@ const ImageAPI = props => {
176176
}
177177
}
178178
}`,
179-
}}
180-
/>
181-
</pre>
182-
<h2 id="dominant">Dominant color previews</h2>
183-
<p>
184-
This calculates the dominant color of the source image and uses it as
185-
a solid background color.
186-
</p>
187-
<div
188-
style={{
189-
display: `grid`,
190-
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
191-
gap: rhythm(1),
192179
}}
193-
>
194-
{assets.map(({ node: { id, title, dominant } }) => (
195-
<div key={id}>
196-
<GatsbyImage
197-
image={dominant}
198-
alt={title}
199-
style={{ border: `1px solid red` }}
200-
/>
201-
</div>
202-
))}
203-
</div>
204-
<h4>GraphQL query</h4>
205-
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
206-
<code
207-
dangerouslySetInnerHTML={{
208-
__html: `{
180+
/>
181+
</pre>
182+
<h2 id="dominant">Dominant color previews</h2>
183+
<p>
184+
This calculates the dominant color of the source image and uses it as a
185+
solid background color.
186+
</p>
187+
<div
188+
style={{
189+
display: `grid`,
190+
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
191+
gap: rhythm(1),
192+
}}
193+
>
194+
{assets.map(({ node: { id, title, dominant } }) => (
195+
<div key={id}>
196+
<GatsbyImage
197+
image={dominant}
198+
alt={title}
199+
style={{ border: `1px solid red` }}
200+
/>
201+
</div>
202+
))}
203+
</div>
204+
<h4>GraphQL query</h4>
205+
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
206+
<code
207+
dangerouslySetInnerHTML={{
208+
__html: `{
209209
allContentfulAsset {
210210
edges {
211211
node {
@@ -219,36 +219,36 @@ const ImageAPI = props => {
219219
}
220220
}
221221
}`,
222-
}}
223-
/>
224-
</pre>
225-
<h2 id="blurred">Blurred previews</h2>
226-
<p>
227-
This generates a very low-resolution version of the source image and
228-
displays it as a blurred background.
229-
</p>
230-
<div
231-
style={{
232-
display: `grid`,
233-
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
234-
gap: rhythm(1),
235222
}}
236-
>
237-
{assets.map(({ node: { id, title, blurred } }) => (
238-
<div key={id}>
239-
<GatsbyImage
240-
image={blurred}
241-
alt={title}
242-
style={{ border: `1px solid red` }}
243-
/>
244-
</div>
245-
))}
246-
</div>
247-
<h4>GraphQL query</h4>
248-
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
249-
<code
250-
dangerouslySetInnerHTML={{
251-
__html: `{
223+
/>
224+
</pre>
225+
<h2 id="blurred">Blurred previews</h2>
226+
<p>
227+
This generates a very low-resolution version of the source image and
228+
displays it as a blurred background.
229+
</p>
230+
<div
231+
style={{
232+
display: `grid`,
233+
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
234+
gap: rhythm(1),
235+
}}
236+
>
237+
{assets.map(({ node: { id, title, blurred } }) => (
238+
<div key={id}>
239+
<GatsbyImage
240+
image={blurred}
241+
alt={title}
242+
style={{ border: `1px solid red` }}
243+
/>
244+
</div>
245+
))}
246+
</div>
247+
<h4>GraphQL query</h4>
248+
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
249+
<code
250+
dangerouslySetInnerHTML={{
251+
__html: `{
252252
allContentfulAsset {
253253
edges {
254254
node {
@@ -262,37 +262,37 @@ const ImageAPI = props => {
262262
}
263263
}
264264
}`,
265-
}}
266-
/>
267-
</pre>
268-
<h2 id="traced">Traced SVG previews</h2>
269-
<p>
270-
This generates a simplified, flat SVG version of the source image,
271-
which it displays as a placeholder. This works well for images with
272-
simple shapes or that include transparency.
273-
</p>
274-
<div
275-
style={{
276-
display: `grid`,
277-
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
278-
gap: rhythm(1),
279265
}}
280-
>
281-
{assets.map(({ node: { id, title, traced } }) => (
282-
<div key={id}>
283-
<GatsbyImage
284-
image={traced}
285-
alt={title}
286-
style={{ border: `1px solid red` }}
287-
/>
288-
</div>
289-
))}
290-
</div>
291-
<h4>GraphQL query</h4>
292-
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
293-
<code
294-
dangerouslySetInnerHTML={{
295-
__html: `{
266+
/>
267+
</pre>
268+
<h2 id="traced">Traced SVG previews</h2>
269+
<p>
270+
This generates a simplified, flat SVG version of the source image, which
271+
it displays as a placeholder. This works well for images with simple
272+
shapes or that include transparency.
273+
</p>
274+
<div
275+
style={{
276+
display: `grid`,
277+
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
278+
gap: rhythm(1),
279+
}}
280+
>
281+
{assets.map(({ node: { id, title, traced } }) => (
282+
<div key={id}>
283+
<GatsbyImage
284+
image={traced}
285+
alt={title}
286+
style={{ border: `1px solid red` }}
287+
/>
288+
</div>
289+
))}
290+
</div>
291+
<h4>GraphQL query</h4>
292+
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
293+
<code
294+
dangerouslySetInnerHTML={{
295+
__html: `{
296296
allContentfulAsset {
297297
edges {
298298
node {
@@ -306,11 +306,10 @@ const ImageAPI = props => {
306306
}
307307
}
308308
}`,
309-
}}
310-
/>
311-
</pre>
312-
</Layout>
313-
</>
309+
}}
310+
/>
311+
</pre>
312+
</Layout>
314313
)
315314
}
316315

‎examples/using-contentful/src/pages/index.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from "react"
2-
import { Link, graphql } from "gatsby"
32
import * as PropTypes from "prop-types"
4-
import Img from "gatsby-image"
3+
4+
import { Link, graphql } from "gatsby"
5+
import { GatsbyImage } from "gatsby-plugin-image"
6+
57
import { rhythm } from "../utils/typography"
68
import Layout from "../layouts"
79

@@ -25,8 +27,11 @@ const Product = ({ node }) => (
2527
}}
2628
>
2729
<div style={{ marginRight: rhythm(1 / 2) }}>
28-
{node.image[0].fixed.src && (
29-
<Img style={{ margin: 0 }} fixed={node.image[0].fixed} />
30+
{node.image[0].gatsbyImageData && (
31+
<GatsbyImage
32+
style={{ margin: 0 }}
33+
image={node.image[0].gatsbyImageData}
34+
/>
3035
)}
3136
</div>
3237
<div style={{ flex: 1 }}>{node.productName.productName}</div>
@@ -89,9 +94,7 @@ export const pageQuery = graphql`
8994
productName
9095
}
9196
image {
92-
fixed(width: 75) {
93-
...GatsbyContentfulFixed
94-
}
97+
gatsbyImageData(layout: FIXED, width: 75)
9598
}
9699
}
97100
}
@@ -104,9 +107,7 @@ export const pageQuery = graphql`
104107
productName
105108
}
106109
image {
107-
fixed(width: 75) {
108-
...GatsbyContentfulFixed
109-
}
110+
gatsbyImageData(layout: FIXED, width: 75)
110111
}
111112
}
112113
}

0 commit comments

Comments
 (0)