eMedia Library Drupal Plugin

Prepare your servers and dependencies to be able to use this plugin. Recomended versions are Drupal 10.4.x and eMediaLibrary 11.

Allow CORS

Allow Cross-Browsing is required between the Drupal server and your eMedia Library instance in order to navigate your assets.

In the nginx config file in your eMedia Library instance you need to add a Proxy Header to allow Cross-Browsing support between the servers. Add the following header into your server definition in your .conf file:

#allow iframe CORS
proxy_cookie_flags ~ secure samesite=none;

Server definition should look like:

server {
  server_name  einnovation.com;
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/einnovation.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/einnovation.com/privkey.pem;
  include /etc/letsencrypt/options-ssl-nginx.conf;
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

  location / {

    proxy_read_timeout 1200s;
    proxy_send_timeout 1200s;
    proxy_connect_timeout 1200s;
    proxy_max_temp_file_size 2048m;
    client_max_body_size 100G;
    keepalive_timeout 10s;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Host $host:$server_port;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-SiteRoot https://$http_host;  
    
    #allow iframe CORS
    proxy_cookie_flags ~ secure samesite=none;

    proxy_pass http://einnovation;
  }
}

Restart nginx to reflect the configuration. Note: Nginx version should be 1.25 or newer.

Download and install eMedia Drupal Plugin

Find latest eMedia Drupal plugin source code at:

https://github.com/entermedia-community/extension-drupal

Clone the repo and move the files to your Drupal web path: "web/modules/custom". You can also clone it directly to this path.

-web
  - modules
    - custom
    - extension-drupal

Enable the "Emedia Library" Module in your Drupal > Administrator > Extend area.

Now in the Administrator > Configuration > Media you will find the eMedia Library Settings, you need to provide the URL of the eMedia catalog you want to include media.

This Drupal plugin can instert Media in your content structures in 2 different ways. 

Ckeditor 5 Plugin

You can add a CKeditor 5 tool bar icon to open the eMedia Library app and be able to add Media directly to the Body of your Content.

To enable the tool bar, go to Administrator > Configuration > Content Authoring > Text formats and editors, and configure the Editor you want to add the button. 

Drag & Drop the Emedia Library Picker button from the Available section to the Active Buttons area.

Then in the bottom section Enabled Filters, disable the setting: "Restrict images to this site" this way all images you select from the remote eMedia Library will be able to be displayed in your Content.

Save your configuration and go to edit a Content record you will see the Tool bar icon, that will open your eMedia Library instance.

In this Modal window you can use all the tools and fetures of your eMedia Library, you can Search, Upload, Customize Metadata or use the AI Tool to include Media in your Drupal Body Content. Hover any asset and you will see a button to select the specific media to be included.

Custom Fields

The second way you can add Media to your Content is adding custom Fields, you can add as many as you need in any Drupal Content Strcture you like. Go to Administrator > Structures > Content Types and select the Content Type you want to add a eMedia field, select "Manage Fields" and +Create New Field. 

Create a field and configure the Default Image size you will display in your Post.

After saving the settings, go to one of your Content or Create a new Content of the type you added the field. You will find the Fields and a button to open the eMedia Modal window where you can select the Media you want to include.