Wordpress Integration

Enabling ImageEngine for your WordPress image content is very simple. While you can use a plugin to add ImageEngine, you might not what 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 and open functions.php
  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";

}

$domain = "localhost/wordpresstest"; //Enter your domain name here...

$rep = $scheme."://images.example.com"; //Enter the ImageEngine URL provided by ScientiaMobile or the CNAME Domain...

$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;

}


3. (Optional but recommended) 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. By adding the snippet of code below in your functions.php file you can enable both. 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() {
<!-- ?> <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width, Save-Data"/>
<link rel="preconnect" href="//images.example.com" crossorigin> --> //Remember to update URL with the correct ImageEngine domain.  
}

// add_action('wp_head','wp_add_ie_meta');