Skip to content
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.

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

[gatsby-image] add placeholderStyle prop to gatsby-image #5745

Merged
merged 1 commit into from
Jun 6, 2018

Conversation

jgautsch
Copy link
Contributor

@jgautsch jgautsch commented Jun 6, 2018

@pieh Per our discussion, this replaces #5653

The original intention is to enable users to add styles to the image placeholder, such as a CSS blur.

For example, a nice blur can now be added with:

<Img
  resolutions={data.file.childImageSharp.resolutions}
  placeholderStyle={{
    filter: `blur(12px)`,
    WebkitFilter: `blur(12px)`,
    MozFilter: `blur(12px)`,
    msFilter: `blur(12px`,
    OFilter: `blur(12px)`
  }}
/>

@gatsbybot
Copy link
Collaborator

Deploy preview for using-drupal ready!

Built with commit 8f021f4

https://deploy-preview-5745--using-drupal.netlify.com

@gatsbybot
Copy link
Collaborator

Deploy preview for gatsbygram ready!

Built with commit 8f021f4

https://deploy-preview-5745--gatsbygram.netlify.com

Copy link
Contributor

@pieh pieh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thanks!

@pieh pieh merged commit fe69aa1 into gatsbyjs:master Jun 6, 2018
m-allanson added a commit that referenced this pull request Jun 11, 2018
* master: (219 commits)
  Revert "Add rawMarkdownBody to node.internal" (#5769)
  Publish
  Change code highlights to the correct lines (#5765)
  Update sitemap example to include posts and exclude sample page (#5723)
  [gatsby-transformer-remark] add rawMarkdownBody  (#5557)
  [gatsby-image] add placeholderStyle prop (#5745)
  [gatsby-plugin-sharp] toFormat fix and unify defaultArgs handling (#5071)
  [gatsby-source-wordpress] Do not assume entities will exist (#5004)
  [gatsby-transformer-excel] add option to disable raw output (#5746)
  Update gatsby-config.js (#5744)
  Publish
  [gatsby-source-mongodb] Use Promises to prevent calling done too early (#5738)
  clues about this being advanced
  [gatsby-source-wordpress] Treat wp settings as a known type for inclusion (#5708)
  [www] Add dot com to main navigation (#5579)
  Publish
  fixed TOC links, shortened TOC, localhost edits
  Introduction to Gatsby blog post (#5628)
  Update gatsby-config.js (#5688)
  Add envinfo to gatsby-cli, issue template (#5594)
  ...

# Conflicts:
#	.github/ISSUE_TEMPLATE/bug_report.md
#	.github/ISSUE_TEMPLATE/question.md
#	README.md
#	docs/blog/author.yaml
#	docs/docs/adding-search.md
#	docs/docs/gatsby-starters.md
#	docs/docs/how-to-contribute.md
#	docs/docs/image-tutorial.md
#	docs/docs/source-plugin-tutorial.md
#	docs/docs/wordpress-source-plugin-tutorial.md
#	docs/docs/working-with-images.md
#	docs/tutorial/part-two/index.md
#	examples/image-processing/src/pages/index.js
#	examples/sitemap/gatsby-node.js
#	examples/sitemap/src/pages/index.js
#	examples/sitemap/src/pages/page-2.js
#	examples/sitemap/src/pages/secret.js
#	examples/using-asciidoc/.eslintrc
#	examples/using-contentful/.eslintrc
#	examples/using-contentful/.eslintrc.json
#	examples/using-css-modules/.eslintrc
#	examples/using-css-modules/.eslintrc.json
#	examples/using-csv/.eslintrc
#	examples/using-csv/.eslintrc.json
#	examples/using-drupal/.eslintrc
#	examples/using-drupal/.eslintrc.json
#	examples/using-emotion/.eslintrc
#	examples/using-emotion/.eslintrc.json
#	examples/using-excel/.eslintrc
#	examples/using-excel/.eslintrc.json
#	examples/using-gatsby-image/.eslintrc
#	examples/using-gatsby-image/.eslintrc.json
#	examples/using-glamor/.eslintrc
#	examples/using-glamor/.eslintrc.json
#	examples/using-hjson/.eslintrc
#	examples/using-hjson/.eslintrc.json
#	examples/using-mongodb/.eslintrc
#	examples/using-mongodb/.eslintrc.json
#	examples/using-page-loading-indicator/.eslintrc
#	examples/using-page-loading-indicator/.eslintrc.json
#	examples/using-path-prefix/.eslintrc
#	examples/using-path-prefix/.eslintrc.json
#	examples/using-react-native-web/.eslintrc
#	examples/using-react-native-web/.eslintrc.json
#	examples/using-react-url-query/.eslintrc
#	examples/using-react-url-query/.eslintrc.json
#	examples/using-redirects/.eslintrc
#	examples/using-redirects/.eslintrc.json
#	examples/using-remark-copy-linked-files/.eslintrc
#	examples/using-remark-copy-linked-files/.eslintrc.json
#	examples/using-sqip/src/components/polaroid.js
#	examples/using-sqip/src/layouts/index.js
#	examples/using-styled-components/.eslintrc
#	examples/using-styled-components/.eslintrc.json
#	examples/using-styled-jsx/.eslintrc
#	examples/using-styled-jsx/.eslintrc.json
#	examples/using-styletron/.eslintrc
#	examples/using-styletron/.eslintrc.json
#	examples/using-wordpress/gatsby-node.js
#	packages/gatsby-cli/package.json
#	packages/gatsby-image/package.json
#	packages/gatsby-image/src/index.js
#	packages/gatsby-link/package.json
#	packages/gatsby-plugin-catch-links/package.json
#	packages/gatsby-plugin-emotion/README.md
#	packages/gatsby-plugin-emotion/package.json
#	packages/gatsby-plugin-emotion/src/gatsby-node.js
#	packages/gatsby-plugin-feed/package.json
#	packages/gatsby-plugin-google-tagmanager/package.json
#	packages/gatsby-plugin-manifest/package.json
#	packages/gatsby-plugin-netlify/package.json
#	packages/gatsby-plugin-offline/package.json
#	packages/gatsby-plugin-postcss-sass/package.json
#	packages/gatsby-plugin-postcss-sass/src/__tests__/gatsby-node.js
#	packages/gatsby-plugin-postcss-sass/src/gatsby-node.js
#	packages/gatsby-plugin-sharp/package.json
#	packages/gatsby-plugin-sharp/src/index.js
#	packages/gatsby-plugin-sitemap/package.json
#	packages/gatsby-plugin-styletron/package.json
#	packages/gatsby-plugin-stylus/package.json
#	packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js
#	packages/gatsby-react-router-scroll/package.json
#	packages/gatsby-remark-autolink-headers/package.json
#	packages/gatsby-remark-copy-linked-files/package.json
#	packages/gatsby-remark-embed-snippet/package.json
#	packages/gatsby-remark-images/package.json
#	packages/gatsby-remark-katex/package.json
#	packages/gatsby-remark-prismjs/package.json
#	packages/gatsby-remark-responsive-iframe/package.json
#	packages/gatsby-source-contentful/package.json
#	packages/gatsby-source-contentful/src/gatsby-node.js
#	packages/gatsby-source-contentful/src/normalize.js
#	packages/gatsby-source-drupal/package.json
#	packages/gatsby-source-faker/package.json
#	packages/gatsby-source-filesystem/package.json
#	packages/gatsby-source-mongodb/package.json
#	packages/gatsby-source-mongodb/src/gatsby-node.js
#	packages/gatsby-source-wordpress/package.json
#	packages/gatsby-transformer-excel/package.json
#	packages/gatsby-transformer-json/README.md
#	packages/gatsby-transformer-json/package.json
#	packages/gatsby-transformer-remark/package.json
#	packages/gatsby-transformer-screenshot/package.json
#	packages/gatsby-transformer-sharp/package.json
#	packages/gatsby-transformer-sharp/src/extend-node-type.js
#	packages/gatsby-transformer-sharp/src/types.js
#	packages/gatsby-transformer-sqip/.babelrc
#	packages/gatsby-transformer-sqip/package.json
#	packages/gatsby-transformer-sqip/src/extend-node-type.js
#	packages/gatsby-transformer-yaml/package.json
#	packages/gatsby/cache-dir/static-entry.js
#	packages/gatsby/package.json
#	packages/gatsby/src/cache-dir/app.js
#	packages/gatsby/src/cache-dir/production-app.js
#	packages/gatsby/src/internal-plugins/query-runner/query-runner.js
#	packages/gatsby/src/schema/__tests__/data-tree-utils-test.js
#	packages/gatsby/src/schema/type-conflict-reporter.js
#	packages/gatsby/src/utils/api-browser-docs.js
#	packages/gatsby/src/utils/api-node-docs.js
#	packages/gatsby/src/utils/webpack.config.js
#	www/gatsby-config.js
#	www/package.json
#	www/src/components/masthead.js
#	www/src/data/sidebars/doc-links.yaml
#	www/src/data/sites.yml
#	www/src/layouts/index.js
#	www/src/pages/blog/index.js
#	www/src/pages/plugins.js
#	yarn.lock
@jlengstorf
Copy link
Contributor

Hiya @jgautsch! 👋

This is definitely late, but on behalf of the entire Gatsby community, I wanted to say thank you for being here.

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

  1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (We’ve got t-shirts and hats, plus some socks that are really razzing our berries right now.)
  2. If you’re not already part of it, we just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If you have questions, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again! 💪💜

mwfrost pushed a commit to mwfrost/gatsby that referenced this pull request Apr 20, 2023
* master: (219 commits)
  Revert "Add rawMarkdownBody to node.internal" (gatsbyjs#5769)
  Publish
  Change code highlights to the correct lines (gatsbyjs#5765)
  Update sitemap example to include posts and exclude sample page (gatsbyjs#5723)
  [gatsby-transformer-remark] add rawMarkdownBody  (gatsbyjs#5557)
  [gatsby-image] add placeholderStyle prop (gatsbyjs#5745)
  [gatsby-plugin-sharp] toFormat fix and unify defaultArgs handling (gatsbyjs#5071)
  [gatsby-source-wordpress] Do not assume entities will exist (gatsbyjs#5004)
  [gatsby-transformer-excel] add option to disable raw output (gatsbyjs#5746)
  Update gatsby-config.js (gatsbyjs#5744)
  Publish
  [gatsby-source-mongodb] Use Promises to prevent calling done too early (gatsbyjs#5738)
  clues about this being advanced
  [gatsby-source-wordpress] Treat wp settings as a known type for inclusion (gatsbyjs#5708)
  [www] Add dot com to main navigation (gatsbyjs#5579)
  Publish
  fixed TOC links, shortened TOC, localhost edits
  Introduction to Gatsby blog post (gatsbyjs#5628)
  Update gatsby-config.js (gatsbyjs#5688)
  Add envinfo to gatsby-cli, issue template (gatsbyjs#5594)
  ...

# Conflicts:
#	.github/ISSUE_TEMPLATE/bug_report.md
#	.github/ISSUE_TEMPLATE/question.md
#	README.md
#	docs/blog/author.yaml
#	docs/docs/adding-search.md
#	docs/docs/gatsby-starters.md
#	docs/docs/how-to-contribute.md
#	docs/docs/image-tutorial.md
#	docs/docs/source-plugin-tutorial.md
#	docs/docs/wordpress-source-plugin-tutorial.md
#	docs/docs/working-with-images.md
#	docs/tutorial/part-two/index.md
#	examples/image-processing/src/pages/index.js
#	examples/sitemap/gatsby-node.js
#	examples/sitemap/src/pages/index.js
#	examples/sitemap/src/pages/page-2.js
#	examples/sitemap/src/pages/secret.js
#	examples/using-asciidoc/.eslintrc
#	examples/using-contentful/.eslintrc
#	examples/using-contentful/.eslintrc.json
#	examples/using-css-modules/.eslintrc
#	examples/using-css-modules/.eslintrc.json
#	examples/using-csv/.eslintrc
#	examples/using-csv/.eslintrc.json
#	examples/using-drupal/.eslintrc
#	examples/using-drupal/.eslintrc.json
#	examples/using-emotion/.eslintrc
#	examples/using-emotion/.eslintrc.json
#	examples/using-excel/.eslintrc
#	examples/using-excel/.eslintrc.json
#	examples/using-gatsby-image/.eslintrc
#	examples/using-gatsby-image/.eslintrc.json
#	examples/using-glamor/.eslintrc
#	examples/using-glamor/.eslintrc.json
#	examples/using-hjson/.eslintrc
#	examples/using-hjson/.eslintrc.json
#	examples/using-mongodb/.eslintrc
#	examples/using-mongodb/.eslintrc.json
#	examples/using-page-loading-indicator/.eslintrc
#	examples/using-page-loading-indicator/.eslintrc.json
#	examples/using-path-prefix/.eslintrc
#	examples/using-path-prefix/.eslintrc.json
#	examples/using-react-native-web/.eslintrc
#	examples/using-react-native-web/.eslintrc.json
#	examples/using-react-url-query/.eslintrc
#	examples/using-react-url-query/.eslintrc.json
#	examples/using-redirects/.eslintrc
#	examples/using-redirects/.eslintrc.json
#	examples/using-remark-copy-linked-files/.eslintrc
#	examples/using-remark-copy-linked-files/.eslintrc.json
#	examples/using-sqip/src/components/polaroid.js
#	examples/using-sqip/src/layouts/index.js
#	examples/using-styled-components/.eslintrc
#	examples/using-styled-components/.eslintrc.json
#	examples/using-styled-jsx/.eslintrc
#	examples/using-styled-jsx/.eslintrc.json
#	examples/using-styletron/.eslintrc
#	examples/using-styletron/.eslintrc.json
#	examples/using-wordpress/gatsby-node.js
#	packages/gatsby-cli/package.json
#	packages/gatsby-image/package.json
#	packages/gatsby-image/src/index.js
#	packages/gatsby-link/package.json
#	packages/gatsby-plugin-catch-links/package.json
#	packages/gatsby-plugin-emotion/README.md
#	packages/gatsby-plugin-emotion/package.json
#	packages/gatsby-plugin-emotion/src/gatsby-node.js
#	packages/gatsby-plugin-feed/package.json
#	packages/gatsby-plugin-google-tagmanager/package.json
#	packages/gatsby-plugin-manifest/package.json
#	packages/gatsby-plugin-netlify/package.json
#	packages/gatsby-plugin-offline/package.json
#	packages/gatsby-plugin-postcss-sass/package.json
#	packages/gatsby-plugin-postcss-sass/src/__tests__/gatsby-node.js
#	packages/gatsby-plugin-postcss-sass/src/gatsby-node.js
#	packages/gatsby-plugin-sharp/package.json
#	packages/gatsby-plugin-sharp/src/index.js
#	packages/gatsby-plugin-sitemap/package.json
#	packages/gatsby-plugin-styletron/package.json
#	packages/gatsby-plugin-stylus/package.json
#	packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js
#	packages/gatsby-react-router-scroll/package.json
#	packages/gatsby-remark-autolink-headers/package.json
#	packages/gatsby-remark-copy-linked-files/package.json
#	packages/gatsby-remark-embed-snippet/package.json
#	packages/gatsby-remark-images/package.json
#	packages/gatsby-remark-katex/package.json
#	packages/gatsby-remark-prismjs/package.json
#	packages/gatsby-remark-responsive-iframe/package.json
#	packages/gatsby-source-contentful/package.json
#	packages/gatsby-source-contentful/src/gatsby-node.js
#	packages/gatsby-source-contentful/src/normalize.js
#	packages/gatsby-source-drupal/package.json
#	packages/gatsby-source-faker/package.json
#	packages/gatsby-source-filesystem/package.json
#	packages/gatsby-source-mongodb/package.json
#	packages/gatsby-source-mongodb/src/gatsby-node.js
#	packages/gatsby-source-wordpress/package.json
#	packages/gatsby-transformer-excel/package.json
#	packages/gatsby-transformer-json/README.md
#	packages/gatsby-transformer-json/package.json
#	packages/gatsby-transformer-remark/package.json
#	packages/gatsby-transformer-screenshot/package.json
#	packages/gatsby-transformer-sharp/package.json
#	packages/gatsby-transformer-sharp/src/extend-node-type.js
#	packages/gatsby-transformer-sharp/src/types.js
#	packages/gatsby-transformer-sqip/.babelrc
#	packages/gatsby-transformer-sqip/package.json
#	packages/gatsby-transformer-sqip/src/extend-node-type.js
#	packages/gatsby-transformer-yaml/package.json
#	packages/gatsby/cache-dir/static-entry.js
#	packages/gatsby/package.json
#	packages/gatsby/src/cache-dir/app.js
#	packages/gatsby/src/cache-dir/production-app.js
#	packages/gatsby/src/internal-plugins/query-runner/query-runner.js
#	packages/gatsby/src/schema/__tests__/data-tree-utils-test.js
#	packages/gatsby/src/schema/type-conflict-reporter.js
#	packages/gatsby/src/utils/api-browser-docs.js
#	packages/gatsby/src/utils/api-node-docs.js
#	packages/gatsby/src/utils/webpack.config.js
#	www/gatsby-config.js
#	www/package.json
#	www/src/components/masthead.js
#	www/src/data/sidebars/doc-links.yaml
#	www/src/data/sites.yml
#	www/src/layouts/index.js
#	www/src/pages/blog/index.js
#	www/src/pages/plugins.js
#	yarn.lock
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants