Skip to content

Commit

Permalink
fix(docs): typos in gatsby-remark-images-contentful readme (#11523)
Browse files Browse the repository at this point in the history 
* fix: typos in gatsby-remark-images-contentful readme

* chore: format with prettier
  • Loading branch information
@janosh @DSchau
janosh authored and DSchau committed Feb 8, 2019
1 parent 102c03c commit da9ca8a
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions packages/gatsby-remark-images-contentful/README.md
View file
@@ -1,8 +1,8 @@
# gatsby-remark-images-contentful

Processes images in markdown so they can be used in the production build using contentful's [Image API](https://www.contentful.com/developers/docs/references/images-api)
Processes images in markdown so they can be used in the production build using Contentful's [Image API](https://www.contentful.com/developers/docs/references/images-api)

In the processing, it make images responsive by:
In the processing, it makes images responsive by:

- Adding an elastic container to hold the size of the image while it loads to
avoid layout jumps.
Expand Down Expand Up @@ -46,12 +46,12 @@ plugins: [

| Name | Default | Description |
| ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `maxWidth` | `650` | The `maxWidth` in pixels of the div where the markdown will be displayed. This value is used when deciding what the width of the various responsive thumbnails should be. |
| `maxWidth` | `650` | The `maxWidth` in pixels of the `div` where the markdown will be displayed. This value is used when deciding what the width of the various responsive thumbnails should be. |
| `linkImagesToOriginal` | `true` | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to false to disable this behavior. |
| `showCaptions` | `false` | Add a caption to each image with the contents of the title attribute, when this is not empty. Set this option to true to enable this behavior. |
| `sizeByPixelDensity` | `false` | Analyze images' pixel density to make decisions about target image size. This is what GitHub is doing when embedding images in tickets. This is a useful setting for documentation pages with a lot of screenshots. It can have unintended side effects on high pixel density artworks.<br /><br />Example: A screenshot made on a retina screen with a resolution of 144 (e.g. Macbook) and a width of 100px, will be rendered at 50px. |
| `wrapperStyle` | | Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;` |
| `backgroundColor` | `white` | Set the background color of the image to match the background image of your design |
| `sizeByPixelDensity` | `false` | Analyze images' pixel density to make decisions about target image size. This is what GitHub is doing when embedding images in tickets. This is a useful setting for documentation pages with a lot of screenshots. It can have unintended side effects on high-pixel density artworks.<br /><br />Example: A screenshot made on a retina screen with a resolution of 144 (e.g. Macbook) and a width of 100px, will be rendered at 50px. |
| `wrapperStyle` | | Add custom styles to the div wrapping the responsive images. Use regular CSS syntax, e.g. `margin-bottom:10px; background: red;` |
| `backgroundColor` | `white` | Set the background color of the image to match the background of your design |

[1]: https://jmperezperez.com/medium-image-progressive-loading-placeholder/
[2]: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

0 comments on commit da9ca8a

Please sign in to comment.