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.
Create an account if you have not registered already. You can create an account on the Cloudimage registration page.
You need to enter your Cloudimage account token which you have received upon account creation (step 1).
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.
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"
>
<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.
<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 theimgelement, which will- generate
data-srcset - set resize
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
With this turned on, Cloudimage will only take effect when the user is logged in
Please note that Cloudimage will not take effect on localhosts
Disable image downsize filter
ON: disable WordPress’s default image-cropping functionality
Enable
srcset addingIf this is turned off, then “Srcset widths“ will have no effect.
Add more sizes to
srcsetFor example
Cloudimage URL:
token.cloudimg.io/mywebsite/wp-uploads/2020/image.png Replaceable text: wp-uploads/2020 Replacement text: uploadThen from frontend users will see the image URL as:
token.cloudimg.io/mywebsite/upload/image.pngBut we need to configure Aliases in Cloudimage admin and set up the alias
upload with value wp-uploads/2020(See above)
Exclude Cloudimage processing by class name
Exclude Cloudimage processing by file type, eg “.gif“
OFF: use
ob_buffer PHP functionON: use
the_content filter from WordPress.ON: use Cloudimage JS files from CDN
OFF: use Cloudimage JS files from plugin locally
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.
(See above)
(See above)
(See above)
(See above)
(See above)
Better to turn this on when there are AJAX loaded images, so that the late-loaded images don’t miss out on Cloudimage processing
Last modified 2mo ago