search

scaleflex / js-cloudimage-responsive

Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load. Any questions or issues, please report to https://github.com/scaleflex/js-cloudimage-responsive/issues
Other
68 stars 15 forks source link

Background images? #3

Closed randallmlough closed 5 years ago

randallmlough commented 5 years ago

This is probably a feature request

Is there a way to do relative path background images while using an alias reference?

going by your docs, I know I can do it through the long form url //demo.cloudimg.io/width/500/none/_ALIAS_/boat.jpg but I'm hoping to be able to use a relative path since I'd like to use ci-src and css background-image interchangeably.

Maybe if it was class bound? For example, if I add .ci-bgimage to a div that includes a style attribute with a background-image: url(some/image/reference.jpg) property then the library knows to fetch and replace (and probably could get the best image because it would already know the width and height of the container).

For my use case the above would need to work with your alias functionality since I leverage it in the baseUrl like below.

const ciResponsive = new window.CIResponsive({
            token: 'demo',
            baseUrl: '_images_/'
        });
dzmitry-stramavus commented 5 years ago

Hey @randallmlough,

It's on our roadmap, will be done in next release.

dzmitry-stramavus commented 5 years ago

@randallmlough, hey

the feature is available in v2.2.0

doc: https://github.com/scaleflex/js-cloudimage-responsive#background-image

code sandbox: https://codesandbox.io/s/js-cloudimage-responsive-background-imxdm