Feat: Possibility to not replace URL to single image - T6606

Author: Amr Wagdy

Diff for: README-BLUR-HASH.md

@@ -485,6 +485,12 @@ It is recommended to prevent page layout jumping. The parameter is used to calcu
 
 To see the full cloudimage documentation [click here](https://docs.cloudimage.io/go/cloudimage-documentation)
 
+### ci-do-not-replace-url (or data-ci-do-not-replace-url)
+
+###### Type: **Boolean** | _optional_ | Default: **false**
+
+If set to true, the plugin will only add query parameters to the provided image source URL.
+
 ### ci-not-lazy (or data-ci-not-lazy)
 
 ###### Type: **Bool**

Diff for: README-PLAIN.md

@@ -471,6 +471,12 @@ adds possibility to use fixed height or width and change dynamically other dimen
 **NOTE:** if size is not set, the plugin uses a special algorithm to
 detect the width of image container and set the image size accordingly. This is the recommended way of using the Cloudimage Responsive plugin.
 
+### ci-do-not-replace-url (or data-ci-do-not-replace-url)
+
+###### Type: **Boolean** | _optional_ | Default: **false**
+
+If set to true, the plugin will only add query parameters to the provided image source URL.
+
 ### ci-not-lazy (or data-ci-not-lazy)
 
 ###### Type: **Bool**

Diff for: README.md

@@ -492,6 +492,12 @@ It is recommended to set this parameter to prevent page layout jumping. It is us
 
 To see the full Cloudimage documentation, [click here](https://docs.cloudimage.io/go/cloudimage-documentation).
 
+### ci-do-not-replace-url (or data-ci-do-not-replace-url)
+
+###### Type: **Boolean** | _optional_ | Default: **false**
+
+If set to true, the plugin will only add query parameters to the provided image source URL.
+
 ### ci-not-lazy (or data-ci-not-lazy)
 
 ###### Type: **Bool**

Diff for: README_v6.md

@@ -391,6 +391,12 @@ It is recommended to prevent page layout jumping. The parameter is used to calcu
 
 To see the full cloudimage documentation [click here](https://docs.cloudimage.io/go/cloudimage-documentation)
 
+### ci-do-not-replace-url (or data-ci-do-not-replace-url)
+
+###### Type: **Boolean** | _optional_ | Default: **false**
+
+If set to true, the plugin will only add query parameters to the provided image source URL.
+
 ## <a name="lazy_loading"></a> Lazy Loading
 
 Lazy loading is not included into js-cloudimage-responsive by default. If you [enable lazy loading](#lazy_loading_config) in the configuration, you need to add an additional library.

Diff for: examples/low-preview/src/index.html

@@ -90,7 +90,12 @@ <h2 class="content-text">
           </a>
         </div>
         <div class="sea-coast container">
-          <img id="hero-section-image" ci-params="ci_info=1" ci-src="Main+image.jpg?vh=a1983b" alt="sea-coast" />
+          <img
+            id="hero-section-image"
+            ci-params="ci_info=1"
+            ci-src="Main+image.jpg?vh=a1983b"
+            alt="sea-coast"
+          />
           <div class="image-size-wrapper">
             <p class="text">
               <span><span id="hero-section-image-size"></span> px</span>

Diff for: src/common/ci.utils.js

@@ -24,7 +24,8 @@ const getCommonImageProps = (image) => ({
   isLazyCanceled: (attr(image, 'ci-not-lazy') !== null || attr(image, 'data-ci-not-lazy') !== null) || undefined,
   preserveSize: (attr(image, 'ci-preserve-size') !== null || attr(image, 'data-preserve-size') !== null) || undefined,
   imgNodeWidth: attr(image, 'width'),
-  imgNodeHeight: attr(image, 'height')
+  imgNodeHeight: attr(image, 'height'),
+  doNotReplaceImageUrl: isTrue(image, 'ci-do-not-replace-url')
 });
 
 export const getParams = (params) => {
@@ -82,7 +83,8 @@ export const getImageProps = (image, imgSelector) => {
     ...getCommonImageProps(image),
     imgNodeSRC: attr(image, imgSelector) || undefined
   };
- const params = {
+
+  const params = {
     ...getParamsFromURL(props.imgNodeSRC || ''),
     ...props.params
   };
@@ -118,6 +120,13 @@ const getURLWithoutQueryParams = (url = '') => url.split('?')[0];
 
 const attr = (element, attribute) => element.getAttribute(attribute);
 
+const isTrue = (element, attribute) => {
+  const imgProp = attr(element, attribute);
+  const imgDataProp = attr(element, `data-${attribute}`);
+
+  return (imgProp !== null && imgProp !== 'false') || (imgDataProp !== null && imgDataProp !== 'false');
+};
+
 export const addClass = (elem, className) => {
   if (!(elem.className.indexOf(className) > -1)) {
     elem.className += ' ' + className;