Skip to content

Commit 3bdd0a0

Browse files
committed
Add new docs page to sidebar
1 parent c40ac94 commit 3bdd0a0

File tree

2 files changed

+4
-4
lines changed

2 files changed

+4
-4
lines changed

docs/docs/working-with-images.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22
title: Working With Images In Gatsby
33
---
44

5-
# Working With Images In Gatsby
6-
75
Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and resolutions of each image. Luckily, Gatsby has several useful [plugins](/docs/plugins/) that work together to do that for images on [page components](/docs/building-with-components/#page-components).
86

97

10-
The recommended approach is to use [GraphQL queries](/docs/querying-with-graphql/) to get images of the optimal size or resolution, then, display them with the [`gatsby-image`](/packages/gatsby-image/) component.
8+
The recommended approach is to use [GraphQL queries](/docs/querying-with-graphql/) to get images of the optimal size or resolution, then, display them with the [`gatsby-image`](/packages/gatsby-image/) component.
119

1210

1311
## Query Images With GraphQL
@@ -23,7 +21,7 @@ If the final image is of a fixed size, optimization relies on having multiple re
2321

2422
You can also use arguments in your query to specify exact, minimum, and maximum dimensions. See the [Gatsby Image documentation for complete options](/packages/gatsby-image/#two-types-of-responsive-images).
2523

26-
This example is for an image gallery where images stretch when the page is resized. It uses the `sizes` method and the size fragment to grab the right data to use in `gatsby-image` component and arguments to set the maximum width as 400px and maximum height as 250px.
24+
This example is for an image gallery where images stretch when the page is resized. It uses the `sizes` method and the size fragment to grab the right data to use in `gatsby-image` component and arguments to set the maximum width as 400px and maximum height as 250px.
2725
```jsx
2826
export const query = graphql`
2927
query indexQuery {

www/src/pages/docs/doc-links.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@
7676
link: /docs/adding-a-list-of-markdown-blog-posts/
7777
- title: Adding Tags and Categories to Blog Posts
7878
link: /docs/adding-tags-and-categories-to-blog-posts/
79+
- title: Working With Images in Gatsby
80+
link: /docs/working-with-images/
7981
- title: Creating Dynamically-Rendered Navigation*
8082
link: /docs/creating-dynamically-rendered-navigation/
8183
- title: Dropping Images into Static Folders*

0 commit comments

Comments
 (0)