Gridsome Remote Image Downloader
This is a simple plugin, which is based on a discord discussion. It's more a workaround than a permanent solution.
The plugin should work with any data source, but I have tested it only with source-filesystem
.
Features
- Download of remote images
- Support of multiple images ( see example )
Install
npm install -s @noxify/gridsome-plugin-remote-image
# or
yarn add @noxify/gridsome-plugin-remote-image
Setup
//gridsome.config.js
module.exports = {
siteName: 'Gridsome',
plugins: [
//...
{
use: '@noxify/gridsome-plugin-remote-image',
options: {
'typeName' : 'Entry',
'sourceField': 'remoteImage',
'targetField': 'imageDownloaded',
'targetPath': './src/assets/remoteImages'
}
},
{
use: '@noxify/gridsome-plugin-remote-image',
options: {
'typeName' : 'Entry',
'sourceField': 'remoteImages',
'targetField': 'imagesDownloaded',
'targetPath': './src/assets/remoteImages'
}
}
]
//...
}
Configuration options
-
typeName
Defines the collection where the script should update the nodes -
sourceField
Defines the graphql field which contains the remote image url -
targetField
Defines the field name which will be generated. The field is from TypeImage
or[Images]
in case the source field is not a string. -
targetPath
Defines the target directory for the downloaded images If you set./src/assets/remoteImages
, it will save the images to<projectroot>/src/assets/remoteImages/
You have to ensure, that the defined path is valid and the directory exists. It's currently not possible to use
~
or@
.
Example
Example 1 - Simple string field
Click here to see the example code
/content/entries/entry1.md
---
title: First Post
remoteImage: https://images.unsplash.com/photo-1580451998921-c1e6e1ababe0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80
---
Image Credits: https://unsplash.com/
gridsome.config.js
module.exports = {
siteName: 'Gridsome',
plugins: [{
use: '@gridsome/source-filesystem',
options: {
typeName: 'Entry',
path: './content/entries/*.md'
}
},
{
use: '@noxify/gridsome-plugin-remote-image',
options: {
typeName: 'Entry',
sourceField: 'remoteImage',
targetField: 'downloadedImage',
targetPath: './src/assets/downloadedImages'
}
}
]
}
Example 2 - Multiple images
Click here to see the example code
/content/entries/entry1.md
---
title: First Post
remoteImages:
- https://images.unsplash.com/photo-1525013066836-c6090f0ad9d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
- https://images.unsplash.com/photo-1546489545-697049cfdc1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2872&q=80
---
Image Credits: https://unsplash.com/
gridsome.config.js
module.exports = {
siteName: 'Gridsome',
plugins: [{
use: '@gridsome/source-filesystem',
options: {
typeName: 'Entry',
path: './content/entries/*.md'
}
},
{
use: '@noxify/gridsome-plugin-remote-image',
options: {
typeName: 'Entry',
sourceField: 'remoteImages',
targetField: 'downloadedImage',
targetPath: './src/assets/downloadedImages'
}
}
]
}
Example 3 - Nested source field
Limitation: The plugin does not support
Array of objects
, yet. (ChecknotSupported
in the example below) Please ensure, that you have use onlyStrings
,Arrays
orObjects
in your yaml. If you're usingArray object
in your YAML definition, the plugin will not download the remote image(s).
Click here to see the example code
/content/entries/entry1.md
---
title: First Post
nested:
with:
stringValue: https://images.unsplash.com/photo-1525013066836-c6090f0ad9d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
arrayValue:
- https://images.unsplash.com/photo-1525013066836-c6090f0ad9d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
- https://images.unsplash.com/photo-1546489545-697049cfdc1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2872&q=80
notSupported:
- sub:
child: https://images.unsplash.com/photo-1525013066836-c6090f0ad9d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
- sub:
child: https://images.unsplash.com/photo-1546489545-697049cfdc1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2872&q=80
---
Image Credits: https://unsplash.com/
gridsome.config.js
module.exports = {
siteName: 'Gridsome',
plugins: [{
use: '@gridsome/source-filesystem',
options: {
typeName: 'Entry',
path: './content/entries/*.md'
}
},
{
use: '@noxify/gridsome-plugin-remote-image',
options: {
typeName: 'Entry',
sourceField: 'nested.with.stringValue',
targetField: 'downloadedNestedStringValue',
targetPath: './src/assets/downloadedImages'
}
},
{
use: '@noxify/gridsome-plugin-remote-image',
options: {
typeName: 'Entry',
sourceField: 'nested.with.arrayValue',
targetField: 'downloadedNestedArrayValue',
targetPath: './src/assets/downloadedImages'
}
}
]
}