The Liquifire Resolve is used to resize the non-liquid pixel images according to the device the user viewing, In SCA we have default image resizing and we can also use this for the specific image if required by using below solution.
- add the liquefier resolve script to head of document
<script src="https://lpi.liquifire.com/zap/dhtml/com.liquidpixels.Resolve.jsr"></script>
- create a image tag with Resolve class add the default image to data-resolvesrc
<img class="Resolve" src="https://lpi.liquifire.com/lpi?blank=width[2],height[1],color[none]&sink=format[gif]" data-resolvesrc="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e&image=1" alt="couch" />
- run the script with the liquifire server details
var resolve = new com.liquidpixels.Resolve({
server: "lpi.liquifire.com",
uri: "lf",
imageFit: "containerWidth",
handleEvent: function(type, data) {
console.log("[%o]: %o", type, data);
}
});