Documentation

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 “Image CDN” 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 https://foo.com/blog, 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.

# 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."://images.example.com";
  $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 images.example.com 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="//images.example.com">'."\n";
}

add_action('wp_head','wp_add_ie_meta');