This is a companion article to the CI HUB Beginners Guide. You will need to review both articles to get started using the Connector.
Installing the Connector
To install the CI HUB Connector in WordPress:
In your WordPress admin, go to Plugins > Add New.
Search for CI HUB Connector.
Click Install and then Activate the plugin.
Once active, navigate to the Media Library, click Add New, and you’ll see the CI HUB Connector button.
Log in with your CI HUB account or register a new one. You can load saved connections or set up new ones as needed.
WordPress-Specific Features and Limitations
Features
Media Library Integration
Access your Frontify assets directly within the WordPress media library.
External Content Panel (ExCoP)
Track where assets are used across pages and posts, see versioning status, and relink newer versions.
For a detailed explanation of the external content panel, please see this help article.
Rendition Support for Vector Files
Insert vector assets (e.g., .AI or .EPS) as web-optimized PNG or JPEG renditions—no manual conversion required.
Metadata Injection
Automatically transfer asset metadata (title, description, etc.) into WordPress custom fields when placing files.
Alt Text Mapping
Open the CI HUB Connector in the Media Library.
Click the hamburger menu (top right) > Settings.
Enable the checkbox: Enable “alt text” mapping for the metadata key.
Enter the custom field name (e.g.,
caption) without the prefix (com_ci_hub_).
Once configured, placing a file via CI HUB will automatically populate the alt text field using the chosen metadata.
Shortcode Support
Use [cihub_metadata] shortcodes to dynamically pull and display metadata from media items on your pages.
[cihub_metadata id="42" key="name" content="false"]
Hello, the asset name is: {metadata} and it was created: {metadata.created}.
[/cihub_metadata]
You can find the Post ID in the asset’s URL and the metadata key in the Custom Fields panel within the Media Library.
Limitations
Fixed Panel Layout
The CI HUB panel in WordPress is stretched full-width. This is a platform limitation and cannot currently be resized.
FAQ
Q: Where do I find the CI HUB Connector in WordPress?
A: After installation, go to the Media Library > Add New, and you’ll see a button to launch the CI HUB Connector.
Q: Does placing an asset automatically upload it to WordPress?
A: Yes. Once you select and confirm an asset via the CI HUB Connector, it is added to your media library and can be used in pages or posts like any local file.
Q: Can I place vector files like .AI or .EPS in WordPress?
A: Yes. CI HUB lets you insert renditions (e.g., PNG or JPEG) of vector files, eliminating the need to convert them manually.
Q: What is the “Foreign Key” shown in the media library?
A: The Foreign Key is the unique ID of the asset in its original system (e.g., Dropbox, Frontify). It helps track the source of each file.
Q: How do I use metadata shortcodes?
A: Use the [cihub_metadata] shortcode with the asset’s Post ID and the metadata field key. For example:
[cihub_metadata id="42" key="name"]
Q: Can I automatically map asset metadata to alt text fields?
A: Yes. In the CI HUB Connector settings, enable Alt Text Mapping and enter the desired metadata key (e.g., caption). The alt text will be applied automatically during placement.
Q: Does the Check Panel work like it does in Adobe tools?
A: Yes. The Check Panel shows where assets are used, which system they came from, and whether a newer version is available—just like in InDesign or Illustrator.