{"_id":"@aaaz/gatsby-plugin-remote-images","_rev":"1-afcad652824a2afd20c88e6320cb0795","name":"@aaaz/gatsby-plugin-remote-images","dist-tags":{"latest":"2.2.0"},"versions":{"2.2.0":{"name":"@aaaz/gatsby-plugin-remote-images","version":"2.2.0","description":"Gatsby plugin to use gatsby-image on remote images from absolute path string fields on other nodes.","author":{"name":"Grayson Hicks","email":"graysonhicks@gmail.com"},"main":"gatsby-node.js","repository":{"type":"git","url":"git+https://github.com/andyaaz/gatsby-plugin-remote-images.git"},"keywords":["gatsby","gatsby-plugin","gatsby-image","gatsby-source-filesystem","plugin","images","remote","download","api"],"license":"MIT","peerDependencies":{"gatsby":">=2.2.0"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.0.0","babel-jest":"^24.8.0","babel-preset-gatsby-package":"^0.1.3","cross-env":"^5.1.4","husky":"^3.1.0","jest":"^24.8.0","lint-staged":"^9.5.0","prettier":"^1.19.1"},"dependencies":{"gatsby-source-filesystem":"^2.3.14","lodash":"^4.17.15"},"scripts":{"build":"babel src --out-dir . --ignore **/__tests__","format":"prettier --write **/*.{js,jsx,ts,tsx,json,css,scss,md}","prepare":"cross-env NODE_ENV=production npm run build","watch":"babel -w src --out-dir . --ignore **/__tests__","test":"jest"},"prettier":{"proseWrap":"always","singleQuote":true,"trailingComma":"es5"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier --write","git add"]},"gitHead":"c6d614746982aa4da8680cc2412ca54239440222","bugs":{"url":"https://github.com/andyaaz/gatsby-plugin-remote-images/issues"},"homepage":"https://github.com/andyaaz/gatsby-plugin-remote-images#readme","_id":"@aaaz/gatsby-plugin-remote-images@2.2.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-GZrx2eFdz3A50BLdDqAxTi5K6WIFPkG+oI45YkwhzvLAlZyw0kvh/qP/SJNptkMhcSMzK6tP3GSmarjtXSwX5w==","shasum":"2509521947992bbf4b8ca194820920e0947a3d52","tarball":"https://registry.npmjs.org/@aaaz/gatsby-plugin-remote-images/-/gatsby-plugin-remote-images-2.2.0.tgz","fileCount":3,"unpackedSize":22455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzQq2CRA9TVsSAnZWagAARlEP/0vdwgn7Ga/s+d5JQZbz\nhshw06lLY6ythhdbeWOsrLz36EVvAiu8edVRvM3f5Rlobl1yDvU7X8uhELVb\njAUGgZF5wtWDlDTkuN4iI9c58dW8dURe9KFoQiabPpbhy4JSSsXdsuKrvBxU\nZhCqsRiM+rKXo8n3Zt9F+h3cbM6GYzG3LiPKZKt/RuuSQYNIC95ujwGR92jB\nwR4c3JdjCBh0MPMeRQYmkNRKLW/YNQoi2JnN0q8YiVvDoDUcuamQXuxNglW3\nDC8SjVbddiW1tymQV8DkvQADuYfC5slqLeynY2E32ooA9HKs+H7+92xszjOx\nEROQtWxjcscAnGhuKsMO180gNwUr5RKNqIgg6JqqI7mYSiKisPTtwgEYU1pR\n5eFLACQ1YDma1A23mv9Sit0xLmxOm/iHKJ0v1YwCMmTnl5CVRIg+Xz9MMelx\nbEObe6bjGrdVLy4KYxcCXU7V1ORX5pfwye5LRmwZ5dLO75QUYe3YdZzD9ycD\nx3HwVhNDECIektth80ZrupeZEl+eoPgLcvITuuJgFTonO/C6p68UnABdElNu\nf8fSgO84O7Xyl50NVV8NXgvFqBQX/a9egQwxsVNfpwpW+6AepYv96ej3zapt\nKroKjWrPe8j6lT9laoQllskIwJRpW/7ZWsU0VHr4BPnu2HS1p7FSMlocixdW\nG5jk\r\n=16Dg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxGJoRVL4UQCy6aFtsvgHksxrdzNpxIg5/PTeH7A2QQAiAb/A/1rrlJjoeLVQXh5HtQxHgbd+vEFCFPd7tEJOSdOQ=="}]},"_npmUser":{"name":"andyaaz","email":"andyan.work@yahoo.com"},"directories":{},"maintainers":[{"name":"andyaaz","email":"andyan.work@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-plugin-remote-images_2.2.0_1607273142084_0.6782049955837692"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-06T16:45:41.825Z","2.2.0":"2020-12-06T16:45:42.231Z","modified":"2022-04-04T10:54:51.065Z"},"maintainers":[{"name":"andyaaz","email":"andyan.work@yahoo.com"}],"description":"Gatsby plugin to use gatsby-image on remote images from absolute path string fields on other nodes.","homepage":"https://github.com/andyaaz/gatsby-plugin-remote-images#readme","keywords":["gatsby","gatsby-plugin","gatsby-image","gatsby-source-filesystem","plugin","images","remote","download","api"],"repository":{"type":"git","url":"git+https://github.com/andyaaz/gatsby-plugin-remote-images.git"},"author":{"name":"Grayson Hicks","email":"graysonhicks@gmail.com"},"bugs":{"url":"https://github.com/andyaaz/gatsby-plugin-remote-images/issues"},"license":"MIT","readme":"# 💾 gatsby-plugin-remote-images\n\nDownload images from any string field on another node so that those images can\nbe queried with `gatsby-image`.\n\n- [Usage](#usage)\n  - [Install](#install)\n  - [Options](#options) -\n    [Example Config with Optional Options](#example-config-with-optional-options)\n- [Why?](#why)\n- [Common Issues](#common-issues)\n  - [gatsby-source-graphql](#gatsby-source-graphql)\n  - [Traversing objects with arrays](#traversing-objects-with-arrays)\n  - [Handling an Array of Image URLs](#handling-an-array-of-image-urls)\n\n## Usage\n\n### Install\n\nFirst, install the plugin.\n\n`npm install --save gatsby-plugin-remote-images`\n\nSecond, set up the `gatsby-config.js` with the plugin. The most common config\nwould be this:\n\n```javascript\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-plugin-remote-images`,\n      options: {\n        nodeType: 'MyNodes',\n        imagePath: 'path.to.image',\n      },\n    },\n  ],\n};\n```\n\n### Options\n\n| Option Name | Description                                                                                                                                                                                                                                                                                                                                      | Required | Default      |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------ |\n| nodeType    | The node type that has the images you want to grab. This is generally the camelcased version of the word after the 'all' in GraphQL ie. allMyImages type is myImages                                                                                                                                                                             | ✅       | `null`       |\n| imagePath   | For simple object traversal, this is the string path to the image you want to use, relative to the node. This uses lodash .get, see [docs for accepted formats here](https://lodash.com/docs/4.17.11#get). For traversing objects with arrays at given depths, see [how to handle arrays along the path below](#traversing-objects-with-arrays). | ✅       | `null`       |\n| name        | Name you want to give new image field on the node. Defaults to `localImage`.                                                                                                                                                                                                                                                                     | ❌       | `localImage` |\n| auth        | Adds htaccess authentication to the download request if passed in.                                                                                                                                                                                                                                                                               | ❌       | `{}`         |\n| ext         | Sets the file extension. Useful for APIs that separate the image file path from its extension. Or for changing the extension. Defaults to existing file extension.                                                                                                                                                                               | ❌       | `null`       |\n| prepareUrl  | Allows modification of the URL per image if needed. Expects a function taking the original URL as a parameter and returning the desired URL.                                                                                                                                                                                                     | ❌       | `null`       |\n| type        | Tell the plugin that the leaf node is an _array_ of images instead of one single string. Only option here is `array`. For example usage, [see here](#handling-an-array-of-image-urls).                                                                                                                                                           | ❌       | `object`     |\n\n#### Example Config with Optional Options\n\nHowever, you may need more optional config, which is documented here.\n\n```javascript\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-plugin-remote-images`,\n      options: {\n        nodeType: 'MyNodes',\n        imagePath: 'path.to.image',\n        // ** ALL OPTIONAL BELOW HERE: **\n        name: 'theNewImageField',\n        auth: { htaccess_user: `USER`, htaccess_pass: `PASSWORD` },\n        ext: '.jpg',\n        prepareUrl: url => (url.startsWith('//') ? `https:${url}` : url),\n      },\n    },\n  ],\n};\n```\n\n## Why?\n\nWhy do you need this plugin? The fantastic gatsby-image tool only works on\n_relative_ paths to locally stored images. This lets you use it on images from\nan API with an _absolute_ path. For example, look at these two response from one\nGraphQL query:\n\n_Query_\n\n```graphql\nallMyNodes {\n    edges {\n      node {\n        id\n        imageUrl\n      }\n    }\n  }\n```\n\n_Absolute imageUrl NOT available to gatsby-image_\n\n```javascript\nallMyNodes: [\n  {\n    node: {\n      id: 123,\n      imageUrl: 'http://remoteimage.com/url.jpg',\n    },\n  },\n];\n```\n\n_Relative imageUrl IS available to gatsby-image_\n\n```javascript\nallMyNodes: [\n  {\n    node: {\n      id: 123,\n      imageUrl: 'localImages/url.jpg',\n    },\n  },\n];\n```\n\nIf you don't control the API that you are hitting (many third party APIs return\na field with a string to an absolute path for an image), this means those image\naren't run through gatsby-image and you lose all of the benefits.\n\nTo get the images and make them available for the above example, follow the\ninstall instructions and your config should look like this:\n\n```javascript\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-plugin-remote-images`,\n      options: {\n        nodeType: 'MyNodes',\n        imagePath: 'imageUrl',\n        // OPTIONAL: Name you want to give new image field on the node.\n        // Defaults to 'localImage'.\n        name: 'allItemImages',\n      },\n    },\n  ],\n};\n```\n\nNow, if we query `allMyNodes` we can query as we would any gatsby-image node:\n\n```graphql\nallMyNodes {\n  edges {\n    node {\n      localImage {\n        childImageSharp {\n          fluid(maxWidth: 400, maxHeight: 250) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n**Note:** Many Gatsby source plugins already do this work for you under the\nhood. So if you are working with a common CMS's Gatsby plugin, odds are that\n_you don't need this!_\n\n## Common Issues\n\n### `gatsby-source-graphql`\n\nDue to the way `gatsby-source-graphql` creates nodes, it is currently impossible\nfor any transformer type plugin to traverse the data from that plugin.\n[Please read this issue for explanation](https://github.com/gatsbyjs/gatsby/issues/8404).\nAs soon as that as fixed in `gatsby-source-graphql`, this plugin will be tested\nto make sure it works with it as well.\n\n### Traversing objects with arrays\n\nSince some GraphQL APIs will send back objects with nested arrays where your\ntarget data lives, `gatsby-plugin-remote-images` also supports traversing\nobjects that have arrays at arbitrary depths. To opt in to this feature, add an\narray literal, `[]`, to the end of the node you want to indicate is an array.\n\nGiven an object structure like this:\n\n```javascript\nallMyNodes {\n  nodes: [\n    {\n      imageUrl: 'https://...'\n    },\n    ...\n  ]\n}\n```\n\nTo get the images and make them available for the above example, your config\nshould look like this:\n\n```javascript\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-plugin-remote-images`,\n      options: {\n        nodeType: 'MyNodes',\n        imagePath: 'nodes[].imageUrl',\n      },\n    },\n  ],\n};\n```\n\nNow, if we query `allMyNodes` we can query as we would any gatsby-image node:\n\n```graphql\nallMyNodes {\n  nodes {\n    localImage {\n      childImageSharp {\n        fluid(maxWidth: 400, maxHeight: 250) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n}\n```\n\n**Note:** While `lodash .get` doesn't natively support this syntax, it is still\nused to traverse the object structure, so\n[the documentation for `.get`](https://lodash.com/docs/4.17.11#get) still\napplies in full.\n\n### Handling an Array of Image URLs\n\nIn case your API offers an image path to an _array_ of images, instead of just\none, there is a way to handle that with the plugin. For instances where there is\nan array somewhere along the _path to_ the images,\n[see above](#traversing-objects-with-arrays).\n\nFor example, you API returns:\n\n```javascript\n// MyNode\n{\n  date: '1-1-2010',\n  category: 'cats'\n  // Note that here there are multiple images at the *leaf* node where the images are found.\n  images: [\n    'https://.../image1.png',\n    'https://.../image2.png'\n  ]\n}\n```\n\nTo make your local image field an array of these images, adjust your config\naccordingly:\n\n```javascript\n {\n   resolve: `gatsby-plugin-remote-images`,\n   options: {\n     nodeType: 'MyNodes',\n     // Making this plural (optional).\n     name: 'localImages',\n     // Path to the leaf node.\n     imagePath: 'images',\n     // Set type to array.\n     type: 'array'\n   }\n}\n```\n\nNow, if we query `allMyNodes` we can query as we would any gatsby-image node,\nbut now `localImage` (or `localImages` as in the example above) we would get an\narray of Gatsby images, instead of just one.\n\n```graphql\nallMyNodes {\n  nodes {\n    localImages {\n      childImageSharp {\n        fluid(maxWidth: 400, maxHeight: 250) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n}\n```\n","readmeFilename":"README.md"}