Images transformer for Gridsome with options for optimization loader.
Automatic image handling by Gridsome is great, but sometimes we need a bit more. For example: having them uploaded to and optimized by Cloudinary when querying them from Gridsome's data layer.
The workflow stays the same: add images to your side, have @gridsome/source-filesystem
read them, and then query them to use in your components.
Image transformer tool give you that freedom out of the box, by folloing the below steps:
- Add
@gridsome/source-filesystem
to handling your local files.
yarn add @gridsome/source-filesystem
#OR
npm i @gridsome/source-filesystem
- Add
gridsome-transformer-img
dependency to your Gridsome project.
yarn add gridsome-transformer-img
#OR
npm i gridsome-transformer-img
- Add
@gridsome/source-filesystem
as plugins toplugins
section ofgridsome.config.js
and request for the desired images:
/* gridsome.config.js */
export default {
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
path: 'path-to-local-images',
}
},
]
}
- Optional - Set up your upload options and choose a
loader
to optimize your images inimg
section oftransformer
ingridsome.config.js
.
/* gridsome.config.js */
export default {
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
path: 'path-to-local-images',
}
},
],
transformers: {
img: {
uploadOptions: {
folder: 'examples', //directory path in cloudinary where asset should be uploaded to
},
loader: {
type: 'cloudinary',
cloudName: process.env.CLOUDNAME,
apiKey: process.env.API_KEY,
apiSecret: process.env.API_SECRET,
}
}
}
}
See Loader for more details on the available loader services, and Options for other configuration options.
And that's it 🎉! You can start querying your images in the Data Layer.
Copyright(c)
Created and maintained by Maya Shavin