We use the Advanced settings of the WordPress Cloudimage plugin when some 3rd party plugins or themes influence its service and lead to broken, blurred or incorrectly resized images.
In this article we listed all available Advanced Settings and gave examples for some use cases from our practice, which can be resolved if we activate/deactivate these settings.
Back-end vs. JavaScript mode
This is the switch on the General page.
When it is deactivated (it appears in this way by default, after installation of the plugin) it means back-end mode:
When we toggle the switch, it activates the JavaScript mode:
A major difference between these 2 modes is the way how they handle the Cloudimage processing. The Back-end mode works with the image URLs in your Media Gallery, prepending them with token.cloudimg.io and appending a query string at the end. The JavaScript mode filters all the content on the webpage and adapts the HTML to work with the Cloudimage JavaScript library.
We have a separate article with tips on which mode to choose depending from your WP configuration.
Advanced settings
Advanced settings for JavaScript mode
These settings will work if you have activated JavaScript mode.
Skip classes - here we list different classes which, if Cloudimage finds them in the <img> tag, will exclude this tag from further processing.
A typical use case where this setting can be useful: "When Cloudimage is active most of the images on the webpage appear correctly. Only the website logo appears as "broken". The <img> tag which contains the logo, has class "custom-logo". We add this value in the "Skip classes" setting. After Save and clearing of the WP cache, the logo shows correctly because Cloudimage skips its <img> tag from processing."
Skip files- similar functionality like the above, but skips file types.
Typical usecase: "I want to exclude .mp3 files from Cloudimage processing so I add ".mp3" in the Skip files setting"
Use WordPress filter method - when this setting is active, the plugin starts using the native WordPress method for filtering/change of the HTML Content. Typical usecase where this setting could be applicable: "My server supports older PHP version. Some of the JS Mode functionalities are not applied correctly. After activation of the WP filter method, the HTML content is changed as expected."
Local JS libraries - by default the images are delivered by the CDN, but when this setting is "ON" some files may be delivered from local JS libraries. If you do not have some very specific reason why to activate this setting, we advise you to keep it "OFF" because the CDN delivery has better overall performance.
Ignore Image Node Size
Save image node ratio
Ignore style image size
Destroy node image size
Detect image node CSS
Process only width - all these settings are applicable when the Cloudimage plugin is installed in a website that uses a non-standard theme. WordPress has some conventions on how a theme should be implemented and when it doesn't follow the "rules", it may affect the Cloudimage performance too. We could adapt the plugin to the theme by switching "ON" one or several of these settings. Example usecase: "Cloudimage renders most of the images on the website correctly. But there are some images in the footer which are blurred. I inspected their <img> tag and I noticed that the "width" and "height" properties are set up explicitly inside with some strange size - 1px:
So I toggled "Ignore Image Node Size" and the problem was fixed:
Disable set Timeout checks -Cloudimage checks every x time if new images are requested to be rendered on the webpage. This feature is very useful for websites with many pop-ups or sliders but not so much for websites that have mainly static content. In such cases with static websites, we advise the website's owners to activate this setting. It would help to improve the overall website speed performance.
Advanced settings for Back-end mode
These settings will work if you have activated Back-end mode.
Enable srcset mode - when "ON", it allows addition of the "srcset" attribute in the <img> tag.
Srcset widths (px) - when the above setting is "ON", this one will add in the srcset by default image versions, resized with widths 320px, 576px, 940px and 1080px. You could add some customized values too. Please remember that the total number of resized versions shouldn't exceed 5!
Replaceable text
Replacement text - in most cases these 2 settings are used in combination. They are applied to the image URL. When these settings are correctly set up, the replacement value would replace the replaceable text.
Example: "I want to set up an Alias for my image URLs. I already add the values in the Cloudimage Admin panel but to make them work, I need to set them in the WP plugin too. So I take the original URL and put it in "Replaceable text". Then I add the alias name in the "Replacement text". My alias is correctly set up"
Advanced settings for both modes
These settings will work, whatever mode I have activated.
Disable Image Downsize - WordPress has a cropping function, enabled by default, If it creates some problems, we can switch this setting "ON" and it will disable the function.
In conclusion:
The Advanced Settings will help you to finely tune your Cloudimage plugin and adapt it to work with some specific 3rd party plugins and themes.
If you experience some WordPress issue that can not be resolved by switching ON and OFF these settings, please contact us and we will troubleshoot your case. Do not forget to add a screenshot as an example of your issue and an image URL.
If you have any questions or issues, please feel free to contact our Software Engineer and mention the following details:
-
- Token
- Short description of the issue (including URLs, screenshot, short video if available)
- Steps to reproduce the issue.
Comments
Please sign in to leave a comment.