Skip to content

Commit

Permalink
fix(gatsby-remark-images): override all default styling with wrapperS…
Browse files Browse the repository at this point in the history 
…tyle (#12200)

Addressing issue [12199](#12199) where the default values couldn't be overwritten.

Co-authored-by: Ward Peeters <ward@coding-tech.com>
  • Loading branch information
@florinpop17 @wardpeet
florinpop17 and wardpeet committed Mar 11, 2019
1 parent cdd0fe3 commit 27e4a6a
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 12 deletions.
20 changes: 10 additions & 10 deletions packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`it handles goofy nesting properly 1`] = `
"<span
class=\\"gatsby-resp-image-wrapper\\"
style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\"
style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\"
>
<span
class=\\"gatsby-resp-image-background-image\\"
Expand All @@ -24,7 +24,7 @@ exports[`it handles goofy nesting properly 1`] = `
exports[`it leaves images that are already linked alone 1`] = `
"<span
class=\\"gatsby-resp-image-wrapper\\"
style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\"
style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\"
>
<span
class=\\"gatsby-resp-image-background-image\\"
Expand All @@ -44,23 +44,23 @@ exports[`it leaves images that are already linked alone 1`] = `

exports[`it leaves linked HTML img tags alone 1`] = `
"<a href=\\"https://example.org\\">
<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\">
<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\">
<span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
<img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
</span>
</a>"
`;
exports[`it leaves single-line linked HTML img tags alone 1`] = `
"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\">
"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\">
<span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
<img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
</span>"
`;
exports[`it transforms HTML img tags 1`] = `
"<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\">
<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\">
<span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
<img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
</span>
Expand All @@ -69,7 +69,7 @@ exports[`it transforms HTML img tags 1`] = `
exports[`it transforms HTML img tags with query strings 1`] = `
"<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\">
<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\">
<span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
<img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
</span>
Expand All @@ -86,7 +86,7 @@ exports[`it transforms image references in markdown 1`] = `
>
<span
class=\\"gatsby-resp-image-wrapper\\"
style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\"
style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\"
>
<span
class=\\"gatsby-resp-image-background-image\\"
Expand Down Expand Up @@ -115,7 +115,7 @@ exports[`it transforms images in markdown 1`] = `
>
<span
class=\\"gatsby-resp-image-wrapper\\"
style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\"
style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\"
>
<span
class=\\"gatsby-resp-image-background-image\\"
Expand Down Expand Up @@ -144,7 +144,7 @@ exports[`it transforms images in markdown with query strings 1`] = `
>
<span
class=\\"gatsby-resp-image-wrapper\\"
style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\"
style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\"
>
<span
class=\\"gatsby-resp-image-background-image\\"
Expand Down Expand Up @@ -173,7 +173,7 @@ exports[`it uses tracedSVG placeholder when enabled 1`] = `
>
<span
class=\\"gatsby-resp-image-wrapper\\"
style=\\"position: relative; display: block; max-width: 300px; margin-left: auto; margin-right: auto;\\"
style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\"
>
<span
class=\\"gatsby-resp-image-background-image\\"
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-remark-images/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,9 +245,9 @@ module.exports = (
let rawHTML = `
<span
class="${imageWrapperClass}"
style="position: relative; display: block; ${
style="position: relative; display: block; margin-left: auto; margin-right: auto; ${
showCaptions ? `` : wrapperStyle
} max-width: ${presentationWidth}px; margin-left: auto; margin-right: auto;"
} max-width: ${presentationWidth}px;"
>
<span
class="${imageBackgroundClass}"
Expand Down

0 comments on commit 27e4a6a

Please sign in to comment.