logo
logo

Drupal Connector

Drupal is an Open-Source Content Management Platform and Development Framework. It is written in PHP and distributed under the GNU General Public License. Drupal can be used to create and manage many types of Web sites.

Note

This connector is an illustrative example of a generic connector between Sitecore Content Hub and any external system (e.g. Drupal). It aims to help developers better understand how to create their own custom connector.

Warning

This connector is for illustration purposes only. It will not be supported for all versions of Sitecore Content Hub or Drupal.

Drupal can be integrated with Sitecore Content Hub by using two plugins:

  • Iframedialog
  • Mconnector

These are available in a zip packet from: Drupal Connector.

This zip packet can be used to extend CKEditor and enable integration with Sitecore Content Hub, by offering Approved Assets in an iFrame for content creation in Drupal. Modules and plugin libraries perform this extension.

Installation

This installation requires running versions of Sitecore Content Hub and Drupal. For instructions on the installation of Drupal, please see Local server setup for further details.

Once the packet has been downloaded and unzipped the packet shows two further zipped folders; the libraries and modules:

After these folders have been unzipped, they must be copied to the root Drupal folder, for example, if using the XAMPP web server, the path would be C:\xampp\apps\drupal\htdocs:

Start Drupal and navigate to Extend. Under the Custom menu, the options of Iframedialog and Mconnector are shown:

After selecting these two options, scroll down to the bottom of the screen and click on Install:

Check that the two modules have been installed and enabled for use:

Configuration

After the modules have been installed correctly move to the Configuration tab. On this tab select Text formats and editors under the CONTENT AUTHORING section:

Text formats and editors offers several options for text formatting using the CKEditor:

In this example, the Basic HTML is to be configured to include Approved Assets:

  1. Add a group to the Active toolbar, by clicking on the Add group button.
  2. Provide a name for the new group; in this example, Sitecore Plugin is entered.
  3. Drag and drop the Sitecore icon into the new group box
  4. Scroll down to the bottom of the window and click on Save configuration:

Note

It is essential to ensure that the Restrict images to this site filters is not selected:

Return to the Configuration tab and scroll down to the MConnector Settings:

In the MConnector Settings, enter the URL of the Sitecore Content Hub instance appended with the culture and /sitecore-plugin/approved-assets. In this example: the URL is https://Sitecore_Instance.com/ ; the culture is en-us; finally /sitecore-plugin/approved-assets is appended. Click Save configuration:

Sitecore Content Hub Configuration

In the Sitecore Instance, navigate to Manage. Select Settings and navigate to PortalConfiguration. Clicking on this section will extend the PortalConfigurations, choose the CORSConfiguration and add the URL of the Drupal instance. Click on Add and subsequently Save. In this example, the Drupal instance is a locally hosted machine, so the URL is https://localhost:

Importing Assets into Drupal from Sitecore Content Hub

Once these steps have been completed, assets can be imported from the Sitecore Content Hub into Drupal using an IFrame to generate a Public link. For more information on Public links, please see Public Links.

On the Content page of Drupal, click on Add content and select Basic Page. Then use the Sitecore group button, created earlier, to display the Approved Assets.

Select the required Asset. If there is an existing Public link, click on the arrow icon on the Asset to create a new Public link or select the existing Public link:

Once the Public link has been created click on Select. If the Public link already exists click on Select to import the Asset in the Drupal content. In this example, a new thumbnail public link is created and selected for import into the Drupal Content:

Once the required action or actions have been completed, click on Save.

If no arrow is shown either click in the bottom left corner of the Asset and create a new Public link:

Or click on the Preview icon:

A new modal opens with the option to Choose file to insert:

Create a new Public link using the required rendition and utilize any cropping functionality desired:

Can we improve this article ? Provide feedback