by Joseph LoPresti
ImageEngine by ScientiaMobile is a powerful Image CDN that not only caches your image content but also optimizes your images tailored to the end users device, resulting in a perfectly optimized image.
Adding WordPress Image Content
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.
3 Step Installation
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 & 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> <?php //Remember to update URL with the correct ImageEngine domain.
}
add_action('wp_head','wp_add_ie_meta');
With these steps, you should be all set and ready to improve your website for the better. If you have any questions or concerns about getting started, you can always contact me at Joe@ScientiaMobile.com and use our free resources such as our ImageEngine Getting Started Guide.
