Skip to content

Commit

Permalink
Added support for HTML img tags
Browse files Browse the repository at this point in the history
  • Loading branch information
Chiedo committed Jun 28, 2017
1 parent 22cd440 commit 80ca8f5
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/gatsby-remark-copy-linked-files/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"version": "1.0.0-beta.1",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"cheerio": "^1.0.0-rc.1",
"fs-extra": "^3.0.1",
"is-relative-url": "^2.0.0",
"lodash": "^4.17.4",
Expand Down
27 changes: 26 additions & 1 deletion packages/gatsby-remark-copy-linked-files/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const isRelativeUrl = require(`is-relative-url`)
const fsExtra = require(`fs-extra`)
const path = require(`path`)
const _ = require(`lodash`)
const $ = require('cheerio');

module.exports = ({ files, markdownNode, markdownAST, getNode }) => {
// Copy linked files to the public directory and modify the AST to point to
Expand Down Expand Up @@ -46,7 +47,7 @@ module.exports = ({ files, markdownNode, markdownAST, getNode }) => {

// Also copy gifs since Sharp can't process them as well as svgs since we
// exclude them from the image processing pipeline in
// gatsby-remark-responsive-image
// gatsby-remark-responsive-image. This will only work for markdown img tags
visit(markdownAST, `image`, image => {
const imagePath = path.join(getNode(markdownNode.parent).dir, image.url)
const imageNode = _.find(files, file => {
Expand All @@ -62,4 +63,28 @@ module.exports = ({ files, markdownNode, markdownAST, getNode }) => {
visitor(image)
}
})

// Same as the above except it only works for html img tags
visit(markdownAST, `html`, node => {
if(node.value.startsWith('<img')){
let image = Object.assign(node, $.parseHTML(node.value)[0].attribs);
image.url = image.src;
image.type = 'image';
image.position = node.position;

const imagePath = path.join(getNode(markdownNode.parent).dir, image.url)
const imageNode = _.find(files, file => {
if (file && file.absolutePath) {
return file.absolutePath === imagePath
}
return false
})
if (
imageNode &&
(imageNode.extension === `gif` || imageNode.extension === `svg`)
) {
visitor(image)
}
}
})
}

0 comments on commit 80ca8f5

Please sign in to comment.