{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/awesome-images/","result":{"data":{"site":{"siteMetadata":{"title":"Gatsby Starter Personal Blog","author":"Gatsby"}},"mdx":{"id":"66d0e7b5-6530-596b-b57f-dd9788e5e588","excerpt":"Netlify CMS Media Configuration First, in your  static/admin/config.yml , make sure you have the following: Docs:  https://www.netlifycms.org/docs/configuration…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"path\": \"awesome-images\",\n  \"date\": \"2020-06-06T01:22:55.506Z\",\n  \"title\": \"Awesome Images (edited)\",\n  \"description\": \"Fix for gatsby-plugin-mdx and gatsby-remark-images\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e05f2de6b0b797c9d9d1711d25ef0e75/3acf0/great2.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"52.70270270270271%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBP/EABYBAQEBAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABgomdTMQn/8QAGxAAAQUBAQAAAAAAAAAAAAAAAgABAxETJDH/2gAIAQEAAQUCEwrNsbiUiF+V/f/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AUf/xAAbEAABBAMAAAAAAAAAAAAAAAACAAEQERMxYf/aAAgBAQAGPwLSyE93Jcj/xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhQRAxYYH/2gAIAQEAAT8h9wmtSkk7ahRivsFFimKw1GSdiuD/2gAMAwEAAgADAAAAEMc//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAFhcf/aAAgBAgEBPxCKbf/EABwQAQEAAgMBAQAAAAAAAAAAAAERACExQWGBsf/aAAgBAQABPxDgVVW+D+ZpuElTayMfL9wxr12uCSslcTeoYnFFV1uY1S8uf//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Great Gatsby\",\n    \"title\": \"Great Gatsby (edited)\",\n    \"src\": \"/static/e05f2de6b0b797c9d9d1711d25ef0e75/1c72d/great2.jpg\",\n    \"srcSet\": [\"/static/e05f2de6b0b797c9d9d1711d25ef0e75/a80bd/great2.jpg 148w\", \"/static/e05f2de6b0b797c9d9d1711d25ef0e75/1c91a/great2.jpg 295w\", \"/static/e05f2de6b0b797c9d9d1711d25ef0e75/1c72d/great2.jpg 590w\", \"/static/e05f2de6b0b797c9d9d1711d25ef0e75/a8a14/great2.jpg 885w\", \"/static/e05f2de6b0b797c9d9d1711d25ef0e75/fbd2c/great2.jpg 1180w\", \"/static/e05f2de6b0b797c9d9d1711d25ef0e75/3acf0/great2.jpg 2000w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Netlify CMS Media Configuration\"), mdx(\"p\", null, \"First, in your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"static/admin/config.yml\"), \", make sure you have the following:\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"\",\n    \"data-index\": \"0\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"grvsc-code\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), \"media_folder: content/assets\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), \"public_folder: ../assets\"))), mdx(\"p\", null, \"Docs: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.netlifycms.org/docs/configuration-options/#media-and-public-folders\"\n  }), \"https://www.netlifycms.org/docs/configuration-options/#media-and-public-folders\"), \".\"), mdx(\"h2\", null, \"Gatsby Plugins\"), mdx(\"p\", null, \"From \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/cwgw\"\n  }), \"@cwgw\"), \":\"), mdx(\"p\", null, \"So digging a little deeper, it looks like Gatsby only looks for \\u201Csubplugins\\u201D at one specific path, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"options.plugins\"), \".\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-mdx\"), \" uses \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"options.gatsbyRemarkPlugins\"), \". This is fine for transforming markdown as the plugin handles that itself, but Gatsby-specific api files like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-browser.js\"), \" don\\u2019t get loaded because Gatsby doesn\\u2019t know they exist.\"), mdx(\"p\", null, \"If you try this\\u2026\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"javascript\",\n    \"data-index\": \"1\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"grvsc-code\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"{\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"  resolve: \"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk8\"\n  }), \"'gatsby-plugin-mdx'\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \",\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"  options: {\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"    gatsbyRemarkPlugins: [ \"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk8\"\n  }), \"`gatsby-remark-images`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \" ],\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"    plugins: [ \"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk8\"\n  }), \"`gatsby-remark-images`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \" ],\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"  }\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"},\")))), mdx(\"p\", null, \"\\u2026everything works as it should.\"), mdx(\"style\", {\n    \"className\": \"grvsc-styles\"\n  }, \"\\n  .grvsc-container {\\n    overflow: auto;\\n    -webkit-overflow-scrolling: touch;\\n    padding-top: 1rem;\\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\\n    padding-bottom: 1rem;\\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\\n    border-radius: 8px;\\n    border-radius: var(--grvsc-border-radius, 8px);\\n    font-feature-settings: normal;\\n  }\\n  \\n  .grvsc-code {\\n    display: inline-block;\\n    min-width: 100%;\\n  }\\n  \\n  .grvsc-line {\\n    display: inline-block;\\n    box-sizing: border-box;\\n    width: 100%;\\n    padding-left: 1.5rem;\\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\\n    padding-right: 1.5rem;\\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\\n  }\\n  \\n  .grvsc-line-highlighted {\\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\\n  }\\n  \\n  .default-dark {\\n    background-color: #1E1E1E;\\n    color: #D4D4D4;\\n  }\\n  .default-dark .mtk1 { color: #D4D4D4; }\\n  .default-dark .mtk8 { color: #CE9178; }\\n\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Awesome Images (edited)","date":"June 06, 2020","description":"Fix for gatsby-plugin-mdx and gatsby-remark-images"}}},"pageContext":{"slug":"/awesome-images/","previous":{"fields":{"slug":"/example/"},"frontmatter":{"title":"MDX!"}},"next":null}},"staticQueryHashes":["3663586608","63159454"]}