WordPress ImageEngine Integration

To enable ImageEngine on a Wordpress - or Woo-commerce site, download the Image CDN plugin from the Wordpress plugin store. You can do this by logging into the admin section of your Wordpress site, click Plugins, then Add New in the left menu. Next, search for “ImageEngine” in the search box in the top right corner. Choose Install Now on the ImageEngine plugin.

Next, make sure you have a valid ImageEngine account.

# Configure the Image CDN Plugin with ImageEngine

# 1. Input your CDN URL

Enter your ImageEngine hostname in the CDN URL option:

Image CDN url

# 2. Adjust Optional Settings and default values

# 2.1 Wordpress URL Path

If you have your WordPress installed in a specific path of your main site, like, you can enter the path to the WordPress installation here.

# 2.2 Included Directories

Assets in the provided directories will be served through the CDN URL. Enter the directories separated by ,. By default content in wp-content,wp-includes are served through the CDN URL.

# 2.3 Exclusions

If you want certain file extensions or entire directories to be excluded and not served though the CDN URL, enter the exclusions (directories or extensions) separated by ,.

# 2.4 Relative Path

If you use relative paths to images in your theme, check this box.

# 2.5 CDN HTTPS Support

Whether or not to use the provided CDN URL for HTTPS connections. Note: This is disabled by default, and may be the reason for unexpected behaviour. If you site is using https://, try to enable CDN HTTPS Support.

# 2.5 ImageEngine Directives

If you want to append directives to image urls, you can input the directives here.

# 3. Test the Configuration

By clicking the “Test Configuration” button, a test verifying that the provided CDN URL is able to serve images using the origin coupled with the provided CDN URL.

# 4. Save Configuration

Click “Save Changes” and verify that your site is serving images through the CDN URL. You can do this by “view source” or “inspect element” and verify that the img elements have a src attribute referencing the CDN URL.

# Using Image CDN Plugin Filters

In most cases, you will not need to use these WordPress filters because the Image CDN plugin automatically rewrites all image URLs for you, however, Image CDN filters are available if you are working with custom themes or other plugins and find that some URLs are not being rewritten.

image_cdn_url will rewrite the given image/asset URL, for example:

<!-- Update /wp-content/logo.jpg to use the Image CDN >
<?php echo apply_filters( 'image_cdn_url', '/wp-content/logo.jpg' ); >

image_cdn_html will rewrite all image/asset URLs in the given HTML, for example:

// Update all images (bg.png and logo.jpg) to use the Image CDN
$html = '<div style="background-image: url(/wp-content/bg.png);"><img src="/wp-content/logo.jpg"/></div>';
$html = apply_filters( 'image_cdn_html', $html );

Note that the filters will only be run if the Image CDN plugin is activated and enabled (“Enable CDN support” is checked).

# ImageEngine without Plugins

Using the plugin, documented above, is recommended. However, if you have special use-cases the following alternative may be useful to know.

While you can use a plugin to add ImageEngine, you might not want to bloat your WordPress admin panel with functionality you might never use. Instead, you can follow these simple steps to ensure your image content is globally cached and optimized for every device.

# 1. Find your theme in wp-content/themes folder

Open the functions.php file in the themes folder.

# 2. At the end of the file add the following code

// Adding CDN Support (ImageEngine)

add_filter('the_content', 'cdn_urls');

function cdn_urls($content) {
  $scheme = "http";
  if (is_ssl() || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) {
    $scheme = "https";
  // Enter your domain name here...
  $domain = "localhost/wordpresstest";
  // Enter the ImageEngine URL provided by ScientiaMobile or the CNAME Domain...
  $rep = $scheme."://";
  $tof1 = "$scheme://$domain";
  $tof2 = "$scheme://www.$domain";
  $content = str_replace("$tof1/wp-content/uploads", "$rep/wp-content/uploads", $content);
  $content = str_replace("$tof2/wp-content/uploads", "$rep/wp-content/uploads", $content);
  return $content;

Note: this code will only change the image references in content reachable by the filter the_content. You may want to add your custom hooks to replace all image references:

add_filter('the_sidebar', 'cdn_urls');
add_filter('the_footer', 'cdn_urls');
add_filter('your_custom_hook', 'cdn_urls');

# 3. Add Client Hints (Optional)

Client Hints enables the browser to send more detailed information about what size the image should be, relative to the viewport size. Resource Hints will speed up the connection to ImageEngine by telling the browser as early as possible to connect to the ImageEngine server. You can enable both by adding the snippet of code below in your functions.php file:

Remember to update the domain in the code to reflect your ImageEngine domain.

// Add meta for Client Hints and Preconnect Resource Hint.
function wp_add_ie_meta() {
  echo '<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width, Save-Data">'."\n";
  echo '<link rel="preconnect" href="//">'."\n";