Skip to main content

ImageEngine for Wordpress

Jonathan
  • Updated

The ImageEngine WordPress plugin lets you implement ImageEngine easily on your Wordpress website or WooCommerce webshop.

ImageEngine works well with any of the common pagebilders like Gutenberg, Elementor, Divi, and ThriveThemes to name a few.

Install the ImageEngine Wordpress Plugin

First, download the ImageEngine plugin from the WordPress plugin store. You can do this by logging into the admin section of your WordPress site, clicking the "Plugins" option, 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.

After activating the plugin, ImageEngine will show up as a menu item in the main menu in your WordPress admin.

Connect your site to ImageEngine

authenticate.png

If you don't already have an ImageEngine account, you can create one from the WordPress admin.

If you have an account already, you can log in to connect one of your existing engines to the specific WordPress site. Alternatively, if you know your engine delivery address, you can paste the delivery address into the Deivery Address field directly.

Sign up for a new ImageEngine account

If you don't have an ImageEnigne account, you can easily create one by providing your email address and a password. This will also be your credencials when you log in to the ImageEngine Control Panel in the future.

Next, select either a 30 day free trial or a Developer Account. The 30 day free trial is recommended as the Developer Account has limitations not compatible with a production website. See more about the different ImageEngine plans here.

Then, hit the Register button to create your ImageEngine account with an engine. The origin connected with the engine will be the public facing hostname/domain of your current WordPress site. You can always change this later inthe ImageEngine Control Panel if desired.

Connect your existing ImageEngine account

To connect your ImageEngine account, click the tab "Log in if you already got a Delivery Address" and provide your username and password. The same as you use on ImageEngine Control Panel.

Once authenticated, you'll be presented with a list of existing Delivery Addresses. Choose the one you'd like to use for this specific WordPress site.

dl_created.png

Enable ImageEngine

Once you've obtained a delivery address, you may test the configuration by clicking the "Test Configuration" button. This will preform a test request to an image on your website using the provided Delivery Address.

If the test is successful, make sure to enable the plugin by selecting "Enabled" from the dropdown next to the Delivery Address input field. Once you hit "Save Changes", ImageEngine will be serving images on your website.

enable.png

For a detailed look into the features, see this video:

Statistics

Once authenticated, you'll see a dashboard with key statistics. For more detailed statistics, please refer to the ImageEngine Control Panel.

Advanced settings

Under the "Advanced" tab you'll find more settings to tweak the setup. You may also find more settings to optimize your site on the ImageEngine Control Panel.

Included Directories

Assets in the provided directories will be served through the delivery address. Commas must separate the directories ",". By default, the content in wp-content and wp-includes are served through the delivery address.

Exclusions

If you want certain file extensions or entire directories to be excluded and not served through the delivery address, enter the exclusions (directories or extensions) separated by commas ",".

Relative Path

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

ImageEngine Directives

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

Always make sure to save your configuration

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

Use ImageEngine with hooks and filters

To cover specific cases related to custom development in themes or other plugins, you may also use the ImageEngine plugin in your php code.

The ImageEngine Wordpress plugin offers two filters which can be used in theme code:

  • image_cdn_url - Rewrite a single URL to refer to ImageEngine
  • image_cdn_html - Rewrite all URLs in a html string to refer to ImageEngine

An example of how to use:

// 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 );

Use ImageEngine without the ImageEngine Plugin

Although we recommend to install the plugin for best coverage and performance, we acknowlede that there might be cases where it makes sense to integrate ImageEngine directly from code. Below is a simple example to explain the basics of how that can be done.

Find your theme in the wp-content/themes folder. Open the functions.php file in the themes folder.

Add a function in the functions.php file which will rewrite URLs to point to ImageEngine. (Note that changes in the function.php file may be overwritten by theme updates. Depending on your setup, you could consider creating a child theme where the ImageEngine code lives.)

function imageengine($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 = "mycoolwebsite.com";
// Enter the ImageEngine delivery address or the CNAME Domain...
  $rep = $scheme."://xyz.cdn.imgeng.in";
  $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;
}

Now, you can use this function add filters to hooks which is likely to contain image references:

add_filter('the_content', 'imageengine');
add_filter('the_sidebar', 'imageengine');
add_filter('the_footer', 'imageengine');
add_filter('your_custom_hook', 'imageengine');

Additionally, it is recommended to add client hints:

// Add meta for Client Hints and Preconnect Resource Hint.
function wp_add_ie_meta() {
echo '<meta http-equiv="delegate-ch" content="sec-ch-dpr https://xyz.cdn.imgeng.in; sec-ch-width https://xyz.cdn.imgeng.in; sec-ch-viewport-width https://xyz.cdn.imgeng.in;  sec-ch-ua-bitness https://xyz.cdn.imgeng.in; sec-ch-ua-arch https://xyz.cdn.imgeng.in; sec-ch-ua-model https://xyz.cdn.imgeng.in; sec-ch-ua-platform https://xyz.cdn.imgeng.in; sec-ch-ua-platform-version https://xyz.cdn.imgeng.in; sec-ch-ua-full-version https://xyz.cdn.imgeng.in; sec-ch-ua-full-version-list https://xyz.cdn.imgeng.in ; ect https://xyz.cdn.imgeng.in ">'."\n";
echo '<link rel="preconnect" href="//xyz.cdn.imgeng.in">'."\n";
}
add_action('wp_head','wp_add_ie_meta');
``

Related articles

Comments

0 comments

Please sign in to leave a comment.