Wordpress
Cloudimage Wordpress Plugin
The Cloudimage Wordpress plugin will automatically adapt the image URLs in your Wordpress site to deliver your images rocket fast over Cloudimage. You only need to register with Cloudimage and install the plugin in your Wordpress site.
If you need to adjust the behaviour of the plugin, please see the Advanced Configuration settings.
Installation
Prerequisites
Create an account if you have not registered already. You can create an account on the Cloudimage registration page.

Step 1. Install the plugin
Log in to your Wordpress admin panel

In the Admin sidebar, navigate to Plugins / Add New

Search for "Cloudimage" in the search field and then install our plugin

Step 2. Activate the installed plugin

Configure the plugin
Navigate to the Cloudimage admin page

You need to enter your Cloudimage account token which you have received upon account creation (step 1).


Configration options
The v7 option

Some tokens are associated with a v7 URL, while others are not.
But not to worry, this plugin automatically checks and sets it for you, all within a few seconds.
Eg: If you enter a v7 token into the text input field, then a few seconds later, the v7 dial will automatically turn itself on.
Please be patient and wait for the “The v7 checking process …” message to disappear, before pressing the “SAVE ALL CHANGES“ button.
The JS Mode option
Without Cloudimage
Your image URL will be like this:
<img
class="alignnone size-medium wp-image-437"
src="http://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-201x300.jpeg"
alt=""
width="201"
height="300"
srcset="https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-201x300.jpeg 201w,
https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-600x894.jpeg 600w,
https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg 644w"
sizes="(max-width: 201px) 100vw, 201px"
>
With Cloudimage
<img
class="alignnone size-medium wp-image-440"
src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&w=300&h=300"
alt=""
width="300"
height="300"
srcset="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=150 150w,
https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450 450w,
https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=100 100w
sizes="(max-width: 300px) 100vw, 300px"
>
Notice that the URLs has been appended with
https://token.cloudimg.io/
to ensure CDN delivery and optimization of images.
With Cloudimage and its JavaScript Mode turned on

<img
class="alignnone size-medium wp-image-440 ci-image ci-image-loaded lazyloaded"
ci-src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&w=300&h=300"
alt=""
data-srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&org_if_sml=1&func=bound 1x,
https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&org_if_sml=1&func=bound 1.5x,
https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&org_if_sml=1&func=bound 2x"
data-src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&org_if_sml=1&func=bound"
srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&org_if_sml=1&func=bound 1x,
https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&org_if_sml=1&func=bound 1.5x,
https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&org_if_sml=1&func=bound 2x"
src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&org_if_sml=1&func=bound"
>
With JS Mode turned on, Cloudimage will:
the
ci-src
(https://github.com/scaleflex/js-cloudimage-responsive#step-3-implement-in-an-img-tag-or-use-it-as-a-background-image) attribute will be added into theimg
element, which willgenerate
data-srcset
set resize
With JS Mode off and these srcset
standard settings
srcset
standard settings
theme-light<img
class="alignnone size-medium wp-image-440"
src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&w=300&h=300"
alt=""
width="300"
height="300"
srcset="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=150 150w,
https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450 450w,
https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=100 100w,
https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=666 666w"
sizes="(max-width: 300px) 100vw, 300px"
>
Notice the 666 in the
srcset
When to use JS Mode and when it’s better not used

The login option
With this turned on, Cloudimage will only take effect when the user is logged in
Localhost
Please note that Cloudimage will not take effect on localhosts
Advanced Configuration
Global
Disable image downsize filter
ON: disable WordPress’s default image-cropping functionality
Standard Mode
Enable srcset
adding
If this is turned off, then “Srcset widths“ will have no effect.
srcset
widths (px)
srcset
widths (px)Add more sizes to srcset
Replaceable text
For example
Cloudimage URL: token.cloudimg.io/mywebsite/wp-uploads/2020/image.png
Replaceable text: wp-uploads/2020
Replacement text: upload
Then from frontend users will see the image URL as: token.cloudimg.io/mywebsite/upload/image.png
But we need to configure Aliases in Cloudimage admin and set up the alias upload
with value wp-uploads/2020
Replacement text
(See above)
JavaScript mode
Skip classes
Exclude Cloudimage processing by class name
Skip files
Exclude Cloudimage processing by file type, eg “.gif“
Use WordPress filter method
OFF: use ob_buffer
PHP function
ON: use the_content
filter from WordPress.
Local JavaScript libraries
ON: use Cloudimage JS files from CDN
OFF: use Cloudimage JS files from plugin locally
Ignore image node size
Can become helpful to turn on when using non-standard WordPress themes. Especially for badly-made themes, to compensate for some adverse impact on images.
Save image node ratio
Enable Save Image Node Ratio to preserve the aspect ratio.
Turn on Ignore Image Node Size to bypass the incorrect width
and height
attributes.
Destroy node image size
Optionally, use Destroy Node Image Size if you want to completely remove size attributes from the image tags.
Detect image node css
Use Detect Image Node CSS if the theme's CSS is involved in setting these incorrect sizes.
Process only width
This setting ensures that only the width is considered for image processing, and the height is adjusted proportionally to maintain the aspect ratio.
Disable setTimeout
checks
setTimeout
checksBetter to turn this on when there are AJAX loaded images, so that the late-loaded images don’t miss out on Cloudimage processing
Last updated
Was this helpful?