{"version":3,"file":"component---src-pages-image-api-js-ca206b69ffd2d0c2b2f4.js","mappings":"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","sources":["webpack://gatsby-example-using-contentful/./src/pages/image-api.js"],"sourcesContent":["import React from \"react\"\nimport { graphql } from \"gatsby\"\nimport { GatsbyImage } from \"gatsby-plugin-image\"\n\nimport Layout from \"../layouts\"\nimport { rhythm } from \"../utils/typography\"\n\nconst ImageAPI = props => {\n const assets = props.data.allContentfulAsset.edges\n return (\n \n \n

Image API examples

\n

\n Gatsby offers rich integration with\n {` `}\n \n {`Contentful's Image API`}\n \n

\n

\n Images can be display with three different layouts. Learn more about\n them in the{` `}\n \n reference of gatsby-plugin-image\n \n

\n \n

\n All placeholder variants are supported as well. See more at the\n \n reference of gatsby-plugin-image\n \n

\n \n

Constrained

\n

\n This is the default layout. It displays the image at the size of the\n source image, or you can set a maximum size by passing in{` `}\n width or\n height). If the screen or container size is less than\n the width of the image, it scales down to fit, maintaining its aspect\n ratio. It generates smaller versions of the image so that a mobile\n browser doesn’t need to load the full-size image.\n

\n \n {assets.map(({ node: { id, title, constrained } }) => (\n
\n \n
\n ))}\n \n

GraphQL query

\n 
\n          \n
\n\n

Fixed

\n

\n This is a fixed-size image. It will always display at the same size,\n and will not shrink to fit its container. This is either the size of\n the source image, or the size set by the width and height props. Only\n use this if you are certain that the container will never need to be\n narrower than the image.\n

\n {assets.map(({ node: { id, title, fixed } }) => (\n \n ))}\n

GraphQL query

\n 
\n          \n
\n\n

Full width

\n

\n Use this for images that are always displayed at the full width of the\n screen, such as banners or hero images. Like the constrained layout,\n this resizes to fit the container. However it is not restricted to a\n maximum size, so will grow to fill the container however large it is,\n maintaining its aspect ratio. It generates several smaller image sizes\n for different screen breakpoints, so that the browser only needs to\n load one large enough to fit the screen. You can pass a breakpoints\n prop if you want to specify the sizes to use, though in most cases you\n can allow it to use the default.\n

\n \n \n

GraphQL query

\n 
\n        \n
\n

Dominant color previews

\n

\n This calculates the dominant color of the source image and uses it as a\n solid background color.\n

\n \n {assets.map(({ node: { id, title, dominant } }) => (\n
\n \n
\n ))}\n \n

GraphQL query

\n 
\n        \n
\n

Blurred previews

\n

\n This generates a very low-resolution version of the source image and\n displays it as a blurred background.\n

\n \n {assets.map(({ node: { id, title, blurred } }) => (\n
\n \n
\n ))}\n \n

GraphQL query

\n 
\n        \n
\n

Traced SVG previews

\n

\n This generates a simplified, flat SVG version of the source image, which\n it displays as a placeholder. This works well for images with simple\n shapes or that include transparency.\n

\n \n {assets.map(({ node: { id, title, traced } }) => (\n
\n \n
\n ))}\n \n

GraphQL query

\n 
\n        \n
\n \n )\n}\n\nexport default ImageAPI\n\nexport const pageQuery = graphql`\n query {\n allContentfulAsset(filter: { node_locale: { eq: \"en-US\" } }) {\n edges {\n node {\n title\n id\n constrained: gatsbyImageData(layout: CONSTRAINED, width: 186)\n fixed: gatsbyImageData(layout: FIXED, width: 100, height: 100)\n fullWidth: gatsbyImageData(layout: FULL_WIDTH)\n dominant: gatsbyImageData(\n layout: CONSTRAINED\n placeholder: DOMINANT_COLOR\n width: 186\n )\n blurred: gatsbyImageData(\n layout: CONSTRAINED\n placeholder: BLURRED\n width: 186\n )\n traced: gatsbyImageData(\n layout: CONSTRAINED\n placeholder: TRACED_SVG\n width: 186\n )\n }\n }\n }\n }\n`\n"],"names":["props","assets","data","allContentfulAsset","edges","style","margin","marginTop","rhythm","marginBottom","maxWidth","paddingLeft","paddingRight","href","id","display","gridTemplateColumns","gap","map","node","title","constrained","key","G","image","alt","border","background","padding","dangerouslySetInnerHTML","__html","fixed","marginRight","fullWidth","dominant","blurred","traced"],"sourceRoot":""}