LogoLogo
BlogHelp CenterPrivacyLoginRegister
  • Let's optimize your images
  • Transformations
    • Input formats
    • Image operations
      • Width and height
      • Prevent enlargement
      • Crop
        • Automatic gravity crop
        • Positionable crop
        • Focal point crop
        • Face crop
        • Face hide
        • Aspect ratio crop
      • Fit
      • Cropfit
      • Bound
      • Boundmin
      • Cover
      • Device pixel ratio
      • Flip
      • Rotate
      • Trim
      • Rounded corners
      • Background removal
    • Image filters
      • Adjustment
        • Brightness
        • Contrast
        • Saturate
      • Color manipulation
        • Color overlay
        • Grayscale
        • Duotone
        • Sepia
        • Invert
      • Blur
      • Pixelate
      • Sharpen
      • Face blur
    • Image watermarking
      • Static watermark
      • Dynamic watermark
      • Text watermark
        • Text watermark fonts
    • Image compression
      • Image formats
      • Optipress
      • SVG compression
      • Color management
    • Static content
      • PDF to image
      • JS/CSS optimization
    • Video operations
  • Setup
    • Shortening URLs
      • Origin URL prefix
      • Aliases
      • Presets
      • Rules
    • Connecting storage bucket
      • Amazon S3
      • Google Cloud Storage
      • Microsoft Azure Blob
      • Basic authentication HTTP
    • Security
      • Token security
        • Domain whitelisting
        • URL signature
        • URL sealing
      • Account security
      • Origin security
  • Implementation
    • URL API implementation
    • Responsive images JS plugin
    • CMS plugins
      • Spryker
      • Drupal
      • Kontent.ai
      • Contentful
      • Adobe Commerce (Magento)
        • Basic implementation
        • Advanced implementation
      • Opencart
      • Prestashop
        • Prestashop tutorial
      • Shopware
      • Sylius
      • Wordpress
      • Shopify tutorial
        • Shopify integration
        • Theme files
        • FAQ
      • Commercetools tutorial
      • Ruby wrapper
    • Migrating from another image CDN
  • Caching and acceleration
    • CDN basics
    • Caching interval
    • Invalidation API
    • Warmup API
  • Analytics
    • Dashboards
      • Overview
      • Volumetry
      • Optimization
      • Delivery
      • Top-Ranking
      • RUM
      • Logs API
  • Cloudimage_v6 EOL
Powered by GitBook
LogoLogo

Resources

  • Help center
  • Contact support
  • Developers
  • cloudimage.io

Solutions

  • Media optimization
  • DAM
  • Performance report

Company

  • Blog
  • Service status
  • About us

Legal stuff

  • Terms & conditions
  • Privacy center
  • DMCA

Copyright © 2023 Scaleflex

On this page
  • Installation
  • Prerequisites
  • Step 1. Install the plugin
  • Step 2. Activate the installed plugin
  • Configure the plugin
  • The JS Mode option
  • The login option
  • Localhost
  • Advanced Configuration
  • JavaScript mode

Was this helpful?

Export as PDF
  1. Implementation
  2. CMS plugins

Wordpress

Cloudimage Wordpress Plugin

PreviousSyliusNextShopify tutorial

Last updated 7 months ago

Was this helpful?

The 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 .

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&amp;w=300&amp;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&amp;w=300&amp;h=300" 
  alt="" 
  data-srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound 1x, 
               https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&amp;org_if_sml=1&amp;func=bound 1.5x, 
               https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&amp;org_if_sml=1&amp;func=bound 2x" 
  data-src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound" 
  srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound 1x, 
          https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&amp;org_if_sml=1&amp;func=bound 1.5x, 
          https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&amp;org_if_sml=1&amp;func=bound 2x" 
  src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound"
>

With JS Mode turned on, Cloudimage will:

    • generate data-srcset

    • set resize

With JS Mode off and these srcsetstandard 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&amp;w=300&amp;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)

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

Better to turn this on when there are AJAX loaded images, so that the late-loaded images don’t miss out on Cloudimage processing

the ci-src() attribute will be added into theimgelement, which will

lazy loading

https://github.com/scaleflex/js-cloudimage-responsive#step-3-implement-in-an-img-tag-or-use-it-as-a-background-image
https://github.com/scaleflex/js-cloudimage-responsive#lazyloading
Cloudimage Wordpress plugin
Cloudimage registration page