diff --git a/packages/gatsby-remark-images/.gitignore b/packages/gatsby-remark-images/.gitignore index dcc20e9f74bf9..d2729f58abceb 100644 --- a/packages/gatsby-remark-images/.gitignore +++ b/packages/gatsby-remark-images/.gitignore @@ -1,5 +1,6 @@ /constants.js /gatsby-browser.js +/gatsby-ssr.js /index.js /__tests__/* tests \ No newline at end of file diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap index b9e98d952adff..f11265487067a 100644 --- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap @@ -11,9 +11,8 @@ exports[`it handles goofy nesting properly 1`] = ` > \\"test\\" \\"img\\" - \\"this + \\"this " `; @@ -54,7 +52,7 @@ exports[`it leaves linked HTML img tags alone 1`] = ` exports[`it leaves single-line linked HTML img tags alone 1`] = ` " - \\"this + \\"this " `; @@ -62,7 +60,7 @@ exports[`it transforms HTML img tags 1`] = ` " - \\"my + \\"my " `; @@ -71,7 +69,7 @@ exports[`it transforms HTML img tags with query strings 1`] = ` " - \\"my + \\"my " `; @@ -94,7 +92,6 @@ exports[`it transforms image references in markdown 1`] = ` > \\"alt \\"image\\" \\"image\\" \\"image\\" \\"some \\"some \\"some \\"some \\"some \\"some \\"some \\"my { +exports.onRouteUpdate = ({ pluginOptions }) => { + const options = Object.assign({}, DEFAULT_OPTIONS, pluginOptions) + const imageWrappers = document.querySelectorAll(`.${imageWrapperClass}`) // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ @@ -19,17 +22,26 @@ exports.onRouteUpdate = () => { const onImageLoad = () => { backgroundElement.style.transition = `opacity 0.5s 0.5s` - backgroundElement.style.opacity = 0 imageElement.style.transition = `opacity 0.5s` + onImageComplete() + } + + const onImageComplete = () => { + backgroundElement.style.opacity = 0 imageElement.style.opacity = 1 + imageElement.style.color = `inherit` + imageElement.style.boxShadow = `inset 0px 0px 0px 400px ${ + options.backgroundColor + }` imageElement.removeEventListener(`load`, onImageLoad) + imageElement.removeEventListener(`error`, onImageComplete) } + imageElement.style.opacity = 0 + imageElement.addEventListener(`load`, onImageLoad) + imageElement.addEventListener(`error`, onImageComplete) if (imageElement.complete) { - backgroundElement.style.opacity = 0 - } else { - imageElement.style.opacity = 0 - imageElement.addEventListener(`load`, onImageLoad) + onImageComplete() } } } diff --git a/packages/gatsby-remark-images/src/gatsby-ssr.js b/packages/gatsby-remark-images/src/gatsby-ssr.js new file mode 100644 index 0000000000000..f7a8230cea764 --- /dev/null +++ b/packages/gatsby-remark-images/src/gatsby-ssr.js @@ -0,0 +1,26 @@ +import React from "react" + +const { imageClass } = require(`./constants`) + +exports.onRenderBody = ({ setHeadComponents }) => { + const style = ` + .${imageClass} { + width: 100%; + height: 100%; + margin: 0; + vertical-align: middle; + position: absolute; + top: 0; + left: 0; + color: transparent; + }` + .replace(/\s*\n\s*/g, ``) + .replace(/: /g, `:`) + .replace(/ \{/g, `{`) + + setHeadComponents([ + , + ]) +} diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 17f4037b246d0..8a0dda35261fb 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -1,4 +1,5 @@ const { + DEFAULT_OPTIONS, imageClass, imageBackgroundClass, imageWrapperClass, @@ -24,18 +25,7 @@ module.exports = ( { files, markdownNode, markdownAST, pathPrefix, getNode, reporter, cache }, pluginOptions ) => { - const defaults = { - maxWidth: 650, - wrapperStyle: ``, - backgroundColor: `white`, - linkImagesToOriginal: true, - showCaptions: false, - pathPrefix, - withWebp: false, - tracedSVG: false, - } - - const options = _.defaults(pluginOptions, defaults) + const options = _.defaults(pluginOptions, { pathPrefix }, DEFAULT_OPTIONS) const findParentLinks = ({ children }) => children.some( @@ -163,26 +153,12 @@ module.exports = ( overWrites.alt ? overWrites.alt : node.alt ? node.alt : defaultAlt ) - const title = node.title ? node.title : `` - - const imageStyle = ` - width: 100%; - height: 100%; - margin: 0; - vertical-align: middle; - position: absolute; - top: 0; - left: 0; - box-shadow: inset 0px 0px 0px 400px ${options.backgroundColor};`.replace( - /\s*(\S+:)\s*/g, - `$1` - ) + const title = node.title ? node.title : alt // Create our base image tag let imageTag = ` ${alt}