Media library widget

The media library widget provides a way to easily integrate ImageKit Media Library into your CMS or any other web application. Using this, you can access all the assets stored in your Media Library from your existing CMS or application.
Integrating the media library widget is straightforward as you will discover in this document.
We have some ready-made sample integrations with the following applications.
​CKEditor integration​
Media library widget plugin features
The JavaScript-based plugin provides a way to seamlessly access your ImageKit Media Library within your own CMS or web application. You can search all assets stored in the media library and consume them in your application.
The plugin allows you to:
Login to ImageKit from within your CMS.
Search and insert images directly into your CMS from your ImageKit Media Library.
Configure UI view options, such as inline or modal-based Media Library panel.
Supply a custom container class so that you can customize the styling to match your application theme.
How to integrate the plugin in your app
Integration overview
Integrating the ImageKit Media Library plugin into a page in your web application or CMS interface is straightforward. We will go through the following steps in details one by one:
1.​Include the plugin script and create a container element - Include the plugin script file in the web page to embed the Media Library. Create a container element where the widget will be rendered.

2.​Initialize the media library widget - Provide the configuration options and callback to initialize the widget. These options include the mandatory container within which the Media Library Widget UI will be rendered and some other optional settings as described later in the page. 


3.​Instantiate the Media library widget and open it - Using the configuration options and callback method, now the plugin can be instantiated through the IKMediaLibraryWidget constructor and used by navigating to the webpage where it has been embedded.

4.​Insert images from the Media Library via the plugin - Choose images and other files from within the media library interface and insert them in your CMS or web application.
1. Include the plugin script and create a container element
Insert the following script on the web page where you want to access the Media Library plugin:
1
<script src="https://unpkg.com/imagekit-media-library-widget/dist/imagekit-media-library-widget.min.js"></script>
Copied!
Internet Explorer does not have native support for all Media Library Widget features. We recommend accessing it on a supported browser, such as Google Chrome or Mozilla Firefox.
Create an HTML container element where the widget will be rendered:
1
<div id="container"></div>
Copied!
2. Initialize the media library widget
Using the configuration options and callback function, let’s instantiate the plugin:
1
const mediaLibraryWidget = new IKMediaLibraryWidget(config, callback);
Copied!
Parameters
options - Configuration options that are applied to the Media library widget instance. 
callback - This function is called after the user clicks "Insert" button in the Media library. The callback receives a JSON payload of the selected images.
Note: Check that renderOpenButton option is set to true in the plugin configuration option for the view control to become available.
Plugin options
The plugin accepts the following configuration options, including the mandatory container. Apart from this, it also accepts some optional settings that control the plugin's behavior and styling.
Option
Datatype
Description
Default value
container
String, or DOM element
Required
The name of the container within which the Media Library will be rendered. Supports CSS selectors.
None
className
String
Optional styling class to apply to the container element.
None
dimensions
Object
Dimensions of the Media Library container element.
{ height: '100%',
width: '100%' 
}
view
String
Toggle Media Library interface mode: modal or inline
'modal'
renderOpenButton
Boolean
Toggle whether button to open Media Library UI is displayed. Set this tofalse if using a custom editor plugin or custom open trigger.
true
Configuration options sample:
1
const config = {
2
  container: '#container',   // the element in which the widget will be rendered
3
  className: 'media-library-widget',
4
  dimensions: {
5
    height: '100%',
6
    width: '100%',
7
  },
8
  view: 'modal',  // modal (default) | inline
9
  renderOpenButton: true  // false | true (default)
10
};
Copied!
Callback function and payload
This callback function is called after the user clicks "Insert" button in the Media library. The callback receives a JSON payload of the selected images. It is up to you how you consume this data in your application.
1
function callback (payload) {
2
  // this is the callback handler
3
  // … consume json payload …
4
}
Copied!
Sample payload data:
The following shows an example of the JSON payload returned after selecting and inserting an image from the Media Library Widget UI.
1
{
2
  eventType: 'INSERT',
3
  data: [{
4
    createdAt: "2020-12-15T08:33:04.570Z",
5
    customCoordinates: null,
6
    fileId: "5fd874c040308546019f0500",
7
    filePath: "/rally_s_tK613HYyf.jpg",
8
    fileType: "image",
9
    isPrivateFile: false,
10
    name: "rally_s_tK613HYyf.jpg",
11
    tags: null,
12
    thumbnail: "https://ik.imagekit.io/o00s3beva/tr:n-media_library_thumbnail/rally_s_tK613HYyf.jpg",
13
    type: "file",
14
    url: "https://ik.imagekit.io/o00s3beva/rally_s_tK613HYyf.jpg"
15
  }]
16
}
Copied!
3. Run the application
Navigate to your application webpage in the browser. You should see the following button:
Open Media Library button
Upon clicking it, if you are already logged in to ImageKit on this browser, the Media Library view should open up directly. Otherwise, the login screen will be displayed.
ImageKit login screen in modal popup
Login to ImageKit with your email and password.
Upon logging in successfully, you should automatically be routed to the Media Library view.
Media Library Widget panel in modal popup
4. Insert images from the Media Library via the plugin
The Media Library Widget looks and works similar to the ImageKit dashboard. An additional feature is the ability to insert selected images or files from the plugin.
In the upper right area of the screen, an "Insert" button should be present. Click on this to trigger the image selection handling callback on your web app page.
Insert images
The modal view should close automatically. Open the browser console and verify that the image payload data has been logged successfully:
Data payload received successfully
Sample application
HTML
Styles
index.html
1
<!DOCTYPE html>
2
<html>
3
​
4
<head>
5
  <title>ImageKit Media Library Widget</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link rel="stylesheet" href="styles.css">
8
</head>
9
​
10
<body>
11
  <!-- Media Library -->
12
  <div class="wrapper">
13
    <div id="container"></div>
14
  </div>
15
</body>
16
​
17
<script src="https://unpkg.com/imagekit-media-library-widget/dist/imagekit-media-library-widget.min.js"></script>
18
​
19
<script>
20
// configuration options
21
const config = {
22
  container: '#container',   // the element in which the widget will be rendered
23
  className: 'media-library-widget',
24
  dimensions: {
25
    height: '100%',
26
    width: '100%',
27
  },
28
  view: 'modal',  // modal | inline
29
  renderOpenButton: true  // false | true (default)
30
};
31
​
32
// define callback handler  
33
function callback (payload) {
34
  // this is the callback handler
35
  // … consume json payload …
36
  console.log('Image data:', payload.data);
37
}
38
​
39
// instantiate the plugin
40
const mediaLibraryWidget = new IKMediaLibraryWidget(config, callback);
41
</script>
42
​
43
</html>
Copied!
styles.css
1
html {
2
  width: 100%;
3
  height: 100%;
4
  margin: 0;
5
  padding: 0;
6
}
7
​
8
body {
9
  margin: 0;
10
  font-family: Arial, Helvetica, sans-serif;
11
}
12
​
13
#container {
14
  position: relative;
15
  height: 100%;
16
  width: 100%;
17
}
18
​
19
.wrapper {
20
  width: 100%;
21
  height: 100%;
22
}
Copied!
Note on using Google Chrome in Incognito mode
In order to use this plugin on Google Chrome in Incognito mode, you need to enable third-party cookies: