Why it's adding its on CSS?

[GorvGoyl]

I'm not sure the purpose but the plugin js is adding its own CSS which is breaking my bootstrap carousel.

Source code:

<div class="carousel-item" data-slide-number="4">
              <img
                ci-src="assets\img\my_image.jpg"
                class="img-fluid"
                ci-ratio="1.5"
                ci-blur-hash="LNAyTi9ZVsQ,.TM{WAkW4T%2WBt7"
              />
            </div>

Browser Output:

<div class="carousel-item" data-slide-number="4">
              <div
                class=" ci-image-wrapper"
                style="background: rgb(244, 244, 244); display: block; width: 100%; overflow: hidden; position: relative; padding-bottom: 66.6667%;"
              >
                <canvas
                  width="32"
                  height="32"
                  style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; opacity: 1; transition: opacity 0.3s ease-in-out 0s;"
                ></canvas
                ><img
                  ci-src="assets\img\my_image.jpg"
                  class="img-fluid ci-image"
                  ci-ratio="1.5"
                  ci-blur-hash="LNAyTi9ZVsQ,.TM{WAkW4T%2WBt7"
                  src="https://my_token.cloudimg.io/v7/https://www.my_domain.com/assets\img\my_image.jpg?w=2600"
                  style="display: block; width: 100%; padding: 0px; position: absolute; top: 0px; left: 0px; height: auto;"
                />
              </div>
            </div>

I mean why?

I have a carousel with variable height of images and the carousel could adjust its container height based on the image height (height:auto; width:100%), now because of the injected CSS, my carousel has the fixed height which is i am assuming based on the height of first image in carousel.

Can we just have appended ?w=2600/1300/600 etc based on the calculated width by your js? Is it achievable? no fancy stuff just the bare minimum and the job will be done.

[dzmitry-stramavus]

hey @JerryGoyal ,

Mostly all extra CSS and wrapper is applied for blur animation between low quality preview and right size image (or blur-hash image and right size image). We can add a param (image attribute) ci-no-css to not apply any CSS for that image. Does it sound good for you?

[GorvGoyl]

@dzmitry-stramavus yes, please do that. many devs use images in different ways with weird css rules attached to it. so, attaching your css even though it follows the right practice would break things. point is let there be an configurable option to only resize image and no additional css. P.S: regarding the blur technique , can't we just use the progressive jpeg which does the blurriness by default?

[GorvGoyl]

hey @dzmitry-stramavus is there any progress on this?

[dzmitry-stramavus]

hey @JerryGoyal !

it's ready in 3.3.1

https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-PLAIN.md

would be great to have some feedback, thx!

[GorvGoyl]

@dzmitry-stramavus thank you for hearing the feedback and implementing the lightweight version. much needed and works well for me.