Implementing Cloudimage JS in WordPress theme without plugin

This article will show you how to natively integrate the Cloudimage JS Plugin inside your theme - fast and easy!

15 Dec 2020

The Cloudimage WordPress plugin allows to quickly and easily enable the image optimization and acceleration solution Cloudimage on WordPress.

It has been thoroughly tested on the majority of standard themes as well as interactions with other popular plugins (WP Rocket, Yoast, Autoptimize, W3 Total Cache).

The WordPress world allows vast customizations options for themes and plugins, some impacting the standard image rendering behavior of the CMS, making it very hard to have a one-size-fits-all plugin supporting all kind of customizations (especially because we want to keep the plugin simple and avoid many configuration option).

If the Cloudimage WordPress plugin is not working out-of-the box for your theme/plugin/customization, then the alternative is to embed the Cloudimage Responsive Images Plugin (the foundation behind the Cloudimage WordPress plugin) directly.

This article will show you how to natively integrate the Cloudimage JS Plugin inside your theme, which offers the following advantages:

Faster processing time server-side as content will not be filtered on-the-fly (as does the Cloudimage WordPress plugin)
Possibility to make configurations, which are not available natively in the plugin.
Avoiding conflicts with very specific problems and dependencies, coming from your plugins or other custom modifications.

Getting a Starter Theme for WordPress
Installation
Browser support
Checking that all works
Make a Full Backup
Test Load Time

Getting a Starter Theme for WordPress

If you are starting the development of your theme, you will probably want to have a good schema or boilerplate, where you can add your custom logic and design. For example, there are some boilerplates and generator, which can help you do that:

If you just want to modify your theme, the steps below will still work.

Installation

The first action needed is to add a script tag in <head> part of the website.

<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.6.5/js-cloudimage-responsive.min.js"></script>

This is the initialization script, which includes the CIResponsive class, which is the backbone of the library.
The second step is to add the js-cloudimage-responsive library, simply initialize it with your token and the baseURL of your image storage:

<script>
const ciResponsive = new window.CIResponsive({
token: 'demo',
baseURL: 'https://cloudimage.public.airstore.io/demo/' // optional
});
</script>

As you can see, some of the parameters are optional and you can adapt to your needs.

Most used in WordPress context are:

token - Your Cloudimage customer token. Subscribe to a Cloudimage account to get one. The subscription takes less than a minute and is totally free.
domain - Your custom domain.
doNotReplaceURL - If set to true, the plugin will only add query parameters to the provided image source URL. It is useful in some cases, where you use aliases and want to avoid a double CDNization.
baseURL - Your image folder on the server; this allows you to shorten your origin image URLs.
lazyLoading - Only images close to the client's viewport will be loaded, hence accelerating the page loading time. If set to true, an additional script must be included, see Lazy loading

A more complete list can be found here, you might need some of the other configuration options if you are implementing more complicated logic.

Finally, use ci-src instead of the src attribute in the image tag. It is crucial to change and often overlooked. The purpose is straightforward: having an own attribute for an image, which the CIResponsive class will handle, and stop the browser from immediately downloading the image from the standard src attribute.

<img ci-src="magnus-lindvall.jpg" ci-ratio="1.5"/>

NOTE: setting "ci-ratio" is recommended to prevent page layout jumping. The parameter is used to calculate the image height to hold the image position while the image is loading.

But what if you have a background image? You can use this property:

<div ci-bg-url="magnus-lindvall.jpg"></div>

And for all edge cases, you can meet, for example data-attributes or different type of non-standard content inclusion, you can use the Cloudimage built-in URL composition:

https://token.cloudimg.io/v7/original_image_url?operations&filters

Browser support

Tested in all modern browsers and IE 11,10,9. It is highly recommended to address the use case where your visitors disable JS, You have to add a noscript tag:

<noscript><img src="path-to-original-image"/></noscript>

Checking that all works
Inspecting the image you will see a lot of additional elements, added with JavaScript:

You can also check the network tab and identify the source of delivery of your images.

Some other tips, you can take into consideration:

Make a Full Backup

It’s always recommended to back up your posts, images, plugins, and the database before changing your theme in production.

You can use a WordPress backup plugin to create the backup of your entire site.

Make sure that you download this backup to your computer before moving forward. An alternative approach is to download your files, via FTP (for example with FileZilla) and export your database to a local file with phpMyAdmin.

This step will ensure that you can recover your website easily if anything goes wrong.

Test Load Time

Before changing your theme, you should check the load time of your website, so you can easily compare the differences in the page load time after you made changes to your website.

Remember, WordPress speed is an important factor in user experience and SEO, so you need to make sure that the new theme is faster than your previous one. You can use Cloudimage Performance Reporter to check the speed and potential problems.