# Wordpress

The [Cloudimage Wordpress plugin](https://wordpress.org/plugins/cloudimage/) 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 [#od\_5e983168](#od_5e983168 "mention") settings.

## Installation <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

### Prerequisites  <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

Create an account if you have not registered already. You can create an account on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="/files/sjtFHStNjLmnYjWgvvAt" alt=""><figcaption></figcaption></figure>

### Step 1. Install the plugin <a href="#od_dc248770" id="od_dc248770"></a>

#### Log in to your Wordpress admin panel <a href="#od_dc248770" id="od_dc248770"></a>

<figure><img src="/files/vcecrRF4dwFVP0ZZTisO" alt=""><figcaption></figcaption></figure>

#### In the Admin sidebar, navigate to *Plugins / Add New* <a href="#od_89cff714" id="od_89cff714"></a>

<figure><img src="/files/Xmynb1XT0M7cDBLVJTMh" alt=""><figcaption></figcaption></figure>

#### Search for "Cloudimage" in the search field and then install our plugin <a href="#od_576cb33c" id="od_576cb33c"></a>

<figure><img src="/files/DL2eD8FAE0Avz9tB6gpd" alt=""><figcaption></figcaption></figure>

### Step 2. Activate the installed plugin <a href="#od_8bbe90c1" id="od_8bbe90c1"></a>

<figure><img src="/files/eH9JYMb2YdaP7GA8QRRA" alt=""><figcaption></figcaption></figure>

### Configure the plugin <a href="#od_cec0c591" id="od_cec0c591"></a>

#### Navigate to the Cloudimage admin page <a href="#od_cec0c591" id="od_cec0c591"></a>

<figure><img src="/files/zAWWPhTTrgAOYDyumTMR" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/2Tn2QZskZxV3qsAuq0Jy" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/exqGTUgdOPy5FYrhNrfQ" alt=""><figcaption></figcaption></figure>

#### Configration options <a href="#od_5c9f6cf1" id="od_5c9f6cf1"></a>

The v7 option\ <br>

<figure><img src="/files/UiOG2RYhkilYbDm1NVw1" alt=""><figcaption></figcaption></figure>

* 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 <a href="#od_c02c2f97" id="od_c02c2f97"></a>

#### Without Cloudimage <a href="#od_01461c7d" id="od_01461c7d"></a>

Your image URL will be like this:

```html
<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 <a href="#od_99fc08ce" id="od_99fc08ce"></a>

```html
<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 <a href="#od_a9b4bc88" id="od_a9b4bc88"></a>

<figure><img src="/files/la0ZjURnIT8AUuGVOVJk" alt=""><figcaption></figcaption></figure>

```html
<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:

* 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 the`img`element, which will
  * generate `data-srcset`
  * set resize
  * lazy loading <https://github.com/scaleflex/js-cloudimage-responsive#lazyloading>

#### With JS Mode off and these `srcset`standard settings <a href="#od_0dd55484" id="od_0dd55484"></a>

<figure><img src="/files/QDzNY4h4ljb1Nrbcn40w" alt=""><figcaption></figcaption></figure>

```




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 <a href="#od_36853a95" id="od_36853a95"></a>

<figure><img src="/files/IS05izDZbSTURtM77c2s" alt=""><figcaption></figcaption></figure>

### The login option <a href="#od_1c90d423" id="od_1c90d423"></a>

With this turned on, Cloudimage will only take effect when the user is logged in

### Localhost <a href="#od_a5ebc4d2" id="od_a5ebc4d2"></a>

Please note that Cloudimage will not take effect on localhosts

### Advanced Configuration <a href="#od_5e983168" id="od_5e983168"></a>

#### Global <a href="#od_5e983168" id="od_5e983168"></a>

**Disable image downsize filter**

ON: disable WordPress’s default image-cropping functionality

#### Standard Mode <a href="#od_5e983168" id="od_5e983168"></a>

**Enable `srcset` adding**

If this is turned off, then “Srcset widths“ will have no effect.

#### `srcset` widths (px) <a href="#od_5e983168" id="od_5e983168"></a>

Add more sizes to `srcset`

#### Replaceable text <a href="#od_5e983168" id="od_5e983168"></a>

**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](/setup/shortening-urls/aliases.md) in Cloudimage admin and set up the alias `upload` with value `wp-uploads/2020`

#### Replacement text <a href="#od_8ee4bc36" id="od_8ee4bc36"></a>

(See above)

### JavaScript mode <a href="#od_ae33934a" id="od_ae33934a"></a>

#### Skip classes <a href="#od_45d4ca2e" id="od_45d4ca2e"></a>

Exclude Cloudimage processing by class name

#### Skip files <a href="#od_42230342" id="od_42230342"></a>

Exclude Cloudimage processing by file type, eg “.gif“

#### Use WordPress filter method <a href="#od_66b4fb31" id="od_66b4fb31"></a>

OFF: use `ob_buffer` PHP function

ON: use `the_content` filter from WordPress.

#### Local JavaScript libraries <a href="#od_f6649e7a" id="od_f6649e7a"></a>

ON: use Cloudimage JS files from CDN

OFF: use Cloudimage JS files from plugin locally

#### Ignore image node size <a href="#od_f63583d4" id="od_f63583d4"></a>

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 <a href="#od_fba2e1dd" id="od_fba2e1dd"></a>

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 <a href="#od_4a7b96e7" id="od_4a7b96e7"></a>

Optionally, use **Destroy Node Image Size** if you want to completely remove size attributes from the image tags.

#### Detect image node css <a href="#od_4de6bfff" id="od_4de6bfff"></a>

Use **Detect Image Node CSS** if the theme's CSS is involved in setting these incorrect sizes.

#### Process only width <a href="#od_7ad438e9" id="od_7ad438e9"></a>

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 <a href="#od_902b76e3" id="od_902b76e3"></a>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloudimage.io/implementation/cms-plugins/wordpress-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.