Skip to content

Commit

Permalink
Adding Proper Size for WooCommerce zoom image plus lazy loading #118
Browse files Browse the repository at this point in the history
  • Loading branch information
@akshaywali
akshaywali committed Jan 20, 2024
1 parent ff6d40b commit 290a475
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 112 deletions.
12 changes: 12 additions & 0 deletions includes/images/convert-webp.php
View file
Expand Up @@ -96,6 +96,7 @@ function cwvpsb_display_webp($content) {
}
$mod_url = explode('uploads',$url);
$mod_url = count($mod_url)>1?$mod_url[1]:$mod_url[0];

$wp_upload_dir = wp_upload_dir();
$upload_baseurl = $wp_upload_dir['baseurl'] . '/' . 'cwv-webp-images';
$upload_basedir = $wp_upload_dir['basedir'] . '/' . 'cwv-webp-images';
Expand All @@ -108,6 +109,17 @@ function cwvpsb_display_webp($content) {
if (file_exists($img_webp_dir)) {
$node->setAttribute('src', $img_src);
$node->setAttribute('srcset', $img_srcset);
// Fix for woocommerce zoom image to work properly
$large_image = $node->getAttribute('data-large_image');
if($large_image){
$mod_url_large = explode('uploads',$large_image);
$mod_url_large = count($mod_url_large)>1?$mod_url_large[1]:$mod_url_large[0];
$img_webp_large = $upload_baseurl . $mod_url_large . ".webp";
$img_src_large = str_replace($large_image, $img_webp_large, $large_image);
$node->setAttribute('data-large_image', $img_src_large);
$node->setAttribute('data-src', $img_src_large);
}

} else {
// Convert the image to WebP if it doesn't exist
$image_path = $wp_upload_dir['basedir'] . str_replace($wp_upload_dir['baseurl'], '', $url);
Expand Down
197 changes: 87 additions & 110 deletions includes/images/lazy-load-public.js
View file
Expand Up @@ -2,165 +2,142 @@
if (typeof exports === "object") {
module.exports = factory(root);
} else if (typeof define === "function" && define.amd) {
define([], factory(root));
define([], function () {
return factory(root);
});
} else {
root.LazyLoad = factory(root);
}
}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) {

})(typeof global !== "undefined" ? global : this.window || this.global, function (root) {
"use strict";

const defaults = {
src: "data-src",
srcset: "data-srcset",
sizes: "data-sizes",
sizes: "data-sizes",
style: "data-style",
selector: ".cwvlazyload"
};

const extend = function () {

let extended = {};
const extend = function (target, ...sources) {
let deep = false;
let i = 0;
let length = arguments.length;

/* Check if a deep merge */
if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
deep = arguments[0];
i++;
if (typeof target === "boolean") {
deep = target;
target = sources.shift();
}

/* Merge the object into the extended object */
let merge = function (obj) {
for (let prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
/* If deep merge and property is an object, merge properties */
if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") {
extended[prop] = extend(true, extended[prop], obj[prop]);
for (const source of sources) {
for (const prop in source) {
if (Object.prototype.hasOwnProperty.call(source, prop)) {
if (deep && Object.prototype.toString.call(source[prop]) === "[object Object]") {
target[prop] = extend(true, target[prop], source[prop]);
} else {
extended[prop] = obj[prop];
target[prop] = source[prop];
}
}
}
};

/* Loop through each object and conduct a merge */
for (; i < length; i++) {
let obj = arguments[i];
merge(obj);
}

return extended;
return target;
};

function LazyLoad(images, options) {
this.settings = extend(defaults, options || {});
this.images = images || document.querySelectorAll(this.settings.selector);
this.observer = null;
this.init();
}

LazyLoad.prototype = {
init: function() {
class LazyLoad {
constructor(images, options) {
this.settings = extend({}, defaults, options || {});
this.images = images || document.querySelectorAll(this.settings.selector);
this.observer = null;
this.init();
}

/* Without observers load everything and bail out early. */
//if (!root.IntersectionObserver) {
init() {
if (!root.IntersectionObserver) {
this.loadImages();
return;
//}
}

let self = this;
let observerConfig = {
this.createObserver();
this.observeImages();
}

createObserver() {
const self = this;
const observerConfig = {
root: null,
rootMargin: "0px",
threshold: [0]
};

this.observer = new IntersectionObserver(function(entries) {
entries.forEach(function (entry) {
this.observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
self.observer.unobserve(entry.target);
let src = entry.target.getAttribute(self.settings.src);
let srcset = entry.target.getAttribute(self.settings.srcset);
let sizes = entry.target.getAttribute(self.settings.sizes);
if ("img" === entry.target.tagName.toLowerCase()) {
if (src) {
entry.target.src = src;
}
if (srcset) {
entry.target.srcset = srcset;
}
if (sizes) {
entry.target.sizes = sizes;
}
} else {
//entry.target.style.backgroundImage = "url(" + src + ")";
entry.target.style = entry.target.getAttribute(self.settings.style);
}
self.handleIntersection(entry.target);
}
});
}, observerConfig);
}

this.images.forEach(function (image) {
observeImages() {
const self = this;
this.images.forEach(image => {
self.observer.observe(image);
});
},
}

handleIntersection(target) {
this.observer.unobserve(target);
const src = target.getAttribute(this.settings.src);
const srcset = target.getAttribute(this.settings.srcset);
const sizes = target.getAttribute(this.settings.sizes);

if (target.tagName.toLowerCase() === "img") {
if (src) {
target.src = src;
}
if (srcset) {
target.srcset = srcset;
}
if (sizes) {
target.sizes = sizes;
}
} else {
target.style = target.getAttribute(this.settings.style);
}
}

loadAndDestroy: function () {
if (!this.settings) { return; }
loadAndDestroy() {
if (!this.settings) {
return;
}
this.loadImages();
this.destroy();
},

loadImages: function () {
if (!this.settings) { return; }

let self = this;
this.images.forEach(function (image) {
let src = image.getAttribute(self.settings.src);
let srcset = image.getAttribute(self.settings.srcset);
let sizes = image.getAttribute(self.settings.sizes);
if ("img" === image.tagName.toLowerCase()) {
if (src) {
image.src = src;
}
if (srcset) {
image.srcset = srcset;
}
if (sizes) {
image.sizes = sizes;
}
} else {
//image.style.backgroundImage = "url('" + src + "')";
image.style = image.getAttribute(self.settings.style);
}
}

loadImages() {
if (!this.settings) {
return;
}

this.images.forEach(image => {
this.handleIntersection(image);
});
},
}

destroy: function () {
if (!this.settings) { return; }
destroy() {
if (!this.settings) {
return;
}
this.observer.disconnect();
this.settings = null;
}
};

root.lazyload = function(images, options) {
return new LazyLoad(images, options);
};

if (root.jQuery) {
const $ = root.jQuery;
$.fn.lazyload = function (options) {
options = options || {};
options.attribute = options.attribute || "data-src";
new LazyLoad($.makeArray(this), options);
return this;
};
}

root.LazyLoad = LazyLoad;

return LazyLoad;
});
jQuery( document ).ready(function() {
jQuery(".cwvlazyload").lazyload();
});

// Usage
document.addEventListener("DOMContentLoaded", function () {
const lazyLoader = new LazyLoad(document.querySelectorAll(".cwvlazyload"));
});
2 changes: 1 addition & 1 deletion includes/images/lazy-load-public.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 6 additions & 1 deletion includes/images/lazy-loading.php
View file
Expand Up @@ -168,7 +168,12 @@ public function buffer_start_cwv($wphtml) {
{

if ($stuff->tagName == 'img'){
pq($stuff)->attr('data-src',pq($stuff)->attr('src'));
// Fix for woocommerce zoom image to work properly
if(!empty(pq('.woocommerce')) && !empty(pq('.single-product')) && pq($stuff)->attr('data-large_image')){
pq($stuff)->attr('data-src',pq($stuff)->attr('data-large_image'));
}else{
pq($stuff)->attr('data-src',pq($stuff)->attr('src'));
}
pq($stuff)->removeAttr('src');
pq($stuff)->attr('src','data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw==');
pq($stuff)->attr('data-srcset',pq($stuff)->attr('srcset'));
Expand Down

0 comments on commit 290a475

Please sign in to comment.