@gudhub/ssg-web-components-library 1.0.122 → 1.0.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudhub/ssg-web-components-library",
-  "version": "1.0.122",
+  "version": "1.0.124",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/components/image-component/image-component.js

@@ -183,7 +183,11 @@ class ImageComponent extends GHComponent {
         const fallbackSrc = this.getAttribute('src');
         const dataMaxWidth = parseInt(this.getAttribute('data-max-width'), 10);
     
-        const src = this.normalizeUrlPath(dataSrc && dataUrl ? dataSrc : fallbackSrc);
+        const rawSrc = this.normalizedSrc 
+            || imageFromPicture.getAttribute('data-src') 
+            || this.getAttribute('src');
+
+        const src = this.normalizeUrlPath(rawSrc);
         if (!src) {
             console.warn('No valid image source found.');
             return;

package/src/components/masonry-gallery/masonry-gallery.js

@@ -76,12 +76,12 @@ class MasonryGallery extends GHComponent {
                 'masonry-images'
             );
 
-            const isInitImagesEqualNull =
-                this.getAttribute('init-count') === 'null';
+            const initCountFromJson = Number(this.getAttribute('init-count'));
 
-            const initCountImages = this.contactUsButton
-                ? this.showCount
-                : images.length;
+            const initCountImages =
+                initCountFromJson > 0
+                    ? initCountFromJson
+                    : (this.showCount || 10);
 
             const initImages = images.slice(0, initCountImages);
             const initMoreImages = images.slice(initCountImages);
@@ -208,68 +208,73 @@ class MasonryGallery extends GHComponent {
         const msnry = this.msnry;
 
         const promise = new Promise(async (res, rej) => {
-            const img = document.createElement('img');
-
-            const fileName = imageSrc.split('/').pop();
-
-            const pathToJpg = `/assets/images/masonry/${fileName}`;
-            const pathToWebp = `${pathToJpg}.webp`;
-
-            const response = await fetch(pathToWebp, {
-                method: 'HEAD'
-            });
+            try {
+                const img = document.createElement('img');
+
+                const fileName = imageSrc.split('/').pop();
+
+                let finalSrc = `/assets/images/masonry/${fileName}`;
+
+                try {
+                    const uploadResponse = await fetch('/upload-image-path', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            imageSrc: finalSrc,
+                            imageUrl: imageSrc,
+                            isCrop: true
+                        })
+                    });
+
+                    const uploadData = await uploadResponse.json();
+
+                    if (uploadData?.normalizedSrc) {
+                        finalSrc = uploadData.normalizedSrc;
+                    }
+                } catch (error) {
+                    console.error('upload-image-path error:', error);
+                }
 
-            if (!response.ok) {
-                await fetch('/upload-image-path', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        imageSrc: pathToJpg,
-                        imageUrl: imageSrc,
-                        isCrop: true
-                    })
-                });
-            }
+                img.src = finalSrc;
 
-            img.src = `/assets/images/masonry/${fileName}`;
+                img.setAttribute('src', finalSrc);
+                img.setAttribute('alt', imageAlt);
+                img.setAttribute('title', imageTitle);
 
-            img.setAttribute(
-                'src',
-                `/assets/images/masonry/${fileName}`
-            );
-            img.setAttribute('alt', imageAlt);
-            img.setAttribute('title', imageTitle);
+                if (fullImageSrc) {
+                    const tempoFullImageSrc = await this.temporaryImage(fullImageSrc);
 
-            if (fullImageSrc) {
-                const tempoFullImageSrc = await this.temporaryImage(fullImageSrc);
+                    img.classList.add('open-modal');
+                    img.setAttribute('data-modal-image', tempoFullImageSrc);
+                }
 
-                img.classList.add('open-modal');
-                img.setAttribute('data-modal-image', tempoFullImageSrc);
+                img.setAttribute('data-image-loading', 'true');
+
+                // Set image wrapper size while the image is loading
+                const interval = setInterval(() => {
+                    if (img.width !== 0) {
+                        img.style.width = `${img.naturalWidth}px`;
+                        img.style.height = `${img.naturalHeight}px`;
+                        clearInterval(interval);
+                        res(imageWrapper);
+                    }
+                }, 10);
+                
+                // Create image wrapper and append the image to it
+                const imageWrapper = document.createElement('div');
+                imageWrapper.classList.add('masonry-grid-item')
+                // img.onload = () => {
+                    img.removeAttribute('data-image-loading');
+                // }
+                imageWrapper.appendChild(img);
+                this.imagesContainer.appendChild(imageWrapper);
+            } catch (error) {
+                console.error(error);
+                rej(error);
             }
-
-            img.setAttribute('data-image-loading', 'true');
-
-            // Set image wrapper size while the image is loading
-            const interval = setInterval(() => {
-                if (img.width !== 0) {
-                    img.style.width = `${img.naturalWidth}px`;
-                    img.style.height = `${img.naturalHeight}px`;
-                    clearInterval(interval);
-                    res(imageWrapper);
-                }
-            }, 10);
-            
-            // Create image wrapper and append the image to it
-            const imageWrapper = document.createElement('div');
-            imageWrapper.classList.add('masonry-grid-item')
-            // img.onload = () => {
-                img.removeAttribute('data-image-loading');
-            // }
-            imageWrapper.appendChild(img);
-            this.imagesContainer.appendChild(imageWrapper);
-        });
+            });
         
         // After image is loaded, append it to Masonry layout and re-layout the grid
         promise.then((img) => {