Any upload provider integration of imgix with your Strapi Media Library
A Strapi Plugin to integrate imgix with your Strapi Media Library.
If you manage your assets using Strapi's built-in Media Library, this plugin allows you to rewrite the asset URLs so that they are served from an imgix Source.
If your imgix Source is configured with a storage provider like Amazon S3, you can use this plugin to configure the Strapi Media Library to fetch assets directly from your imgix Source. You should also configure the corresponding Strapi Upload Provider.
Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under Installation Requirements.
Minimum environment requirements
>=18.0.0 <=20.x.x
>=6.x.x
In our minimum support we're following official Node.js releases timelines.
Supported Strapi versions:
As a verified Strapi plugin, we're available on the Strapi Marketplace as well as In-App Marketplace where you can follow the installation instructions.
You can install this plugin from NPM within your Strapi project.
yarn add strapi-plugin-imgix@latest
Once installed, you must re-build your Strapi instance.
yarn build
yarn develop
Alternatively, you can run Strapi in the development mode with --watch-admin
option:
yarn develop --watch-admin
The imgix plugin will appear in the Plugins section of Strapi sidebar after the app rebuilds.
You can now configure the plugin.
To use the imgix plugin, you must first create an imgix account and Source if you haven't already.
Then you can configure your Strapi instance using the dedicated Settings page.
Sources
You can access the configuration page via Strapi Settings -> Section: IMGIX Plugin -> Configuration
.
You must specify following properties:
Webfolder
or Other
(S3, Azure, R2, etc)http://localhost:1337/uploads/
https://sdk-test.imgix.net
When using Other
source types, you must fill our the Source ID and API Key fields. This enables the plugin to purge and add assets using the imgix Management API.
How Asset URL Paths Get Re-Written
Once you've configured the plugin it automatically rewrites the URLs of your assets to point to the imgix URL. For example, if you have an image at https://mydomain.com/uploads/amsterdam.jpg
, the plugin will rewrite the URL to https://sdk-test.imgix.net/amsterdam.jpg
. You must configure your imgix source to point into the resources path of your web folder, like /uploads
.
!NOTE Default configuration for your plugin is fetched from
config/plugins.{js,ts}
or directly from the plugin itself. To customize the default state to revert to, see the file configuration section.
If you do net yet have a config/plugins.{js,ts}
or config/<env>/plugins.{js,ts}
file, create it manually.
Otherwise, add the imgix
config to the existing plugins
configurations.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// config/plugins.{js,ts}
module.exports = ({ env }) => ({
//...
'imgix': {
enabled: true,
config: {
mediaLibrarySourceUrl: '<MEDIA SOURCE OF YOUR PROVIDER OR YOUR DOMAIN>', // Example: https://my-awss3-bucket-for-strapi.s3.eu-central-1.amazonaws.com/ or https://mydomain.com/uploads/
apiKey: '<YOUR IMGIX API KEY / TOKEN HERE>',
source: {
type: '<SOURCE TYPE>' // 'other' or 'webfolder'. Default: 'other'
id: '<SOURCE ID STRING>', // Example:
url: '<IMGIX SOURCE URL>', // Example: https://sdk-test.imgix.net
},
},
},
//...
});
See Strapi plugin configuration documentation for more information.
The default settings of the Strapi Security Middleware will not allow you to display uploaded images thumbnails directly in the Media Library interface. You will need to modify the contentSecurityPolicy
settings by replacing strapi::security
string with the object bellow instead.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// config/middlewares.{js,ts}
module.exports = [
// ...
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "https:"],
"img-src": [
"'self'",
"data:",
"blob:",
"market-assets.strapi.io",
"<IMGIX SOURCE URL>", // Example: https://sdk-test.imgix.net
],
"media-src": [
"'self'",
"data:",
"blob:",
"market-assets.strapi.io",
"<IMGIX SOURCE URL>", // Example: https://sdk-test.imgix.net
],
upgradeInsecureRequests: null,
},
},
},
},
// ...
];
mediaLibrarySourceUrl
- url of your local / provider image source of Strapi Media Library. Example: http://localhost:1337/public/images/
apiKey
- imgix Management API Key (setup)source.id
- your imgix source id as a 24-character string (setup)source.url
- you imgix source url / subdomain. Example: https://sdk-test.imgix.net
Plugin provides bunch of administration actions you can perform.
config/plugins.{js,ts}
or config/<env>/plugins.{js,ts}
file and overwrite current settings.Images provided by the Strapi Media Library with imgix Integration Plugin runing enables you to use the full set of imgix functionalities out of the box using a Render API query parameters or SDKs.
See the full documentation here
imgix support multiple different frontend libraries by ready to use SDKs, like:
To get the full list please check the dedicated Libraries directory.
Clone repository
1
git clone git@github.com:imgix/strapi-plugin-imgix.git
Run install & develop build command
1
2
3
4
5
6
7
8
// Install all dependencies
yarn install
// Watch for file changes
yarn develop
// or run build without nodemon
yarn build
Create a soft link in your strapi project to plugin build folder
ln -s <your path>/strapi-plugin-imgix/dist <your path>/strapi-project/src/plugins/imgix
Modify config/plugins.{js,ts}
for imgix
1
2
3
4
5
6
7
//...
'imgix': {
enabled: true,
resolve: './src/plugins/imgix',
//...
}
//...
npm install strapi-plugin-imgix
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.