-
Notifications
You must be signed in to change notification settings - Fork 10.3k
/
blur-up.js
102 lines (99 loc) · 3.06 KB
/
blur-up.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React from "react"
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import ImageGallery from "../components/image-gallery"
import PageTitle from "../components/page-title"
import Layout from "../components/layout"
const BlurUp = ({ data, location }) => (
<Layout
location={location}
image={getImage(data.coverImage.localFile)}
imageTitle={`“${data.coverImage.title}” by ${data.coverImage.credit} (via unsplash.com)`}
>
<PageTitle>Blur Up</PageTitle>
<GatsbyImage
image={getImage(data.floatingImage.localFile)}
alt={`“${data.floatingImage.title}” by ${data.floatingImage.credit} (via unsplash.com)`}
/>
<p>
The Blur Up technique uses progressive loading to make a fast, visually
pleasing experience without waiting for a full-resolution image with a
blank screen.
</p>
<h2>Progressive Loading with Minimal Effort</h2>
<p>
The magic of Gatsby Image's Blur Up technique means that you can load an
image at moderate resolution and not have to bother with creating a small
thumbnail yourself. Gatsby Image will automatically create a tiny image
from your source image and load it first for quick display while the
larger image file is downloaded and displayed. Users first see a blurry
lower-resolution image to help with perceived performance, while the
larger image downloads and everything works automatically.
</p>
<h2>Unsplash Blurred Gallery</h2>
<ImageGallery images={data.galleryImagesCropped.edges} />
<GatsbyImage
image={getImage(data.fullWidthImage.localFile)}
alt={`“${data.fullWidthImage.title}” by ${data.fullWidthImage.credit} (via unsplash.com)`}
/>
</Layout>
)
export default BlurUp
export const query = graphql`
{
coverImage: unsplashImagesYaml(title: { eq: "Plant with leaves" }) {
credit
title
localFile {
childImageSharp {
gatsbyImageData(
width: 720
aspectRatio: 0.5
layout: CONSTRAINED
placeholder: BLURRED
)
}
}
}
floatingImage: unsplashImagesYaml(title: { eq: "Pug without hoodie" }) {
credit
title
localFile {
childImageSharp {
gatsbyImageData(width: 200, layout: CONSTRAINED, placeholder: BLURRED)
}
}
}
fullWidthImage: unsplashImagesYaml(title: { eq: "Alien in the forest" }) {
credit
title
localFile {
childImageSharp {
gatsbyImageData(width: 600, layout: CONSTRAINED)
}
}
}
galleryImagesCropped: allUnsplashImagesYaml(
filter: { gallery: { eq: true } }
skip: 10
) {
edges {
node {
credit
title
localFile {
childImageSharp {
gatsbyImageData(
width: 380
height: 380
quality: 70
placeholder: BLURRED
layout: CONSTRAINED
)
}
}
}
}
}
}
`