feat (img): add fallback for cloudinary

Author: 28nitin07

index.html

@@ -12,7 +12,7 @@
 
 <nav>
   <div class="logo" onclick="showPage('home')">
-    <img src="/https://res.cloudinary.com/duij1lw6u/image/upload/f_auto,q_auto/public/logo/Paws Logo.jpg" alt="Pawsitive Logo" style="height:32px;vertical-align:middle;margin-right:8px;">
+    <img src="/https://res.cloudinary.com/duij1lw6u/image/upload/f_auto,q_auto/public/logo/Paws Logo.jpg" alt="Pawsitive Logo" style="height:32px;vertical-align:middle;margin-right:8px;" onerror="_cldImgError(this)">
     pawsitive
   </div>
   <div class="nav-links" id="nav-links">
@@ -51,7 +51,7 @@
 <div class="img-lightbox" id="imgLightbox" onclick="closeLightbox(event)">
   <button class="lb-nav lb-prev" onclick="event.stopPropagation();lightboxNav(-1)">&#8249;</button>
   <div class="lb-inner" onclick="event.stopPropagation()">
-    <img id="lbImg" src="" alt="Pawsitive photo">
+    <img id="lbImg" src="" alt="Pawsitive photo" onerror="_cldImgError(this)">
     <div class="lb-counter" id="lbCounter"></div>
   </div>
   <button class="lb-nav lb-next" onclick="event.stopPropagation();lightboxNav(1)">&#8250;</button>

js/app.js

@@ -1,5 +1,14 @@
 /* ─── app.js ─── page navigation, page loading, theme ─── */
 
+/* ── Cloudinary image fallback — falls back to local /public/... copy ── */
+function _cldImgError(img) {
+  img.onerror = null; // prevent infinite loop
+  const src = img.src;
+  const m = src.match(/\/public\/.+/);
+  if (m) { img.src = m[0]; return; }
+  if (img.dataset.fallback) { img.src = img.dataset.fallback; delete img.dataset.fallback; }
+}
+
 /* ── Shared scroll-lock utility (used by all modals) ── */
 function lockScroll() {
   document.body.style.overflow = 'hidden';

js/dogs.js

@@ -230,7 +230,7 @@ function initDogPhotos() {
         applyDogOrientation(img);
         img.classList.add('loaded');
       });
-      img.addEventListener('error', () => { img.style.display = 'none'; });
+      img.addEventListener('error', () => { _cldImgError(img); });
     }
   });
 }
@@ -315,7 +315,7 @@ function initDogModals() {
       .join('');
 
     const photoSection = card.dataset.image
-      ? `<div class="dog-modal-photo"><img src="${card.dataset.image}" alt="${card.dataset.name}" style="opacity:0;transition:opacity 0.3s" onload="this.style.opacity=1"></div>`
+      ? `<div class="dog-modal-photo"><img src="${card.dataset.image}" alt="${card.dataset.name}" style="opacity:0;transition:opacity 0.3s" onload="this.style.opacity=1" onerror="_cldImgError(this)"></div>`
       : `<div class="dog-modal-emoji" style="background:${bg}"><span style="font-size:7rem">${card.dataset.emoji || '🐕'}</span></div>`;
 
     const statusBadges = [];

js/gallery.js

@@ -340,12 +340,16 @@ function renderMediaGrid() {
     tile.className = 'media-tile media-tile-loading';
     const img = document.createElement('img');
     img.dataset.src = _imgUrl(filename);
+    img.dataset.fallback = '/public/gallery/' + filename;
     img.alt = 'Pawsitive campus photo';
     img.onload = () => {
       img.classList.add('loaded');
       tile.classList.remove('media-tile-loading');
     };
-    img.onerror = () => tile.classList.remove('media-tile-loading');
+    img.onerror = () => {
+      if (img.dataset.fallback) { const fb = img.dataset.fallback; delete img.dataset.fallback; img.src = fb; }
+      else { tile.classList.remove('media-tile-loading'); }
+    };
     const overlay = document.createElement('div');
     overlay.className = 'media-tile-overlay';
     overlay.innerHTML = '<span>🔍</span>';
@@ -377,7 +381,9 @@ function openLightbox(i) {
   _lbImages = null;
   _lbIndex = i;
   const lb = document.getElementById('imgLightbox');
-  document.getElementById('lbImg').src = _imgUrl(mediaImages[_lbIndex]);
+  const lbImg = document.getElementById('lbImg');
+  lbImg.dataset.fallback = '/public/gallery/' + mediaImages[_lbIndex];
+  lbImg.src = _imgUrl(mediaImages[_lbIndex]);
   document.getElementById('lbCounter').textContent = (_lbIndex + 1) + ' / ' + mediaImages.length;
   lb.classList.add('open');
   lockScroll();
@@ -408,7 +414,12 @@ function lightboxNav(dir) {
   const img = document.getElementById('lbImg');
   img.style.opacity = '0';
   setTimeout(() => {
-    img.src = _lbImages ? _lbImages[_lbIndex] : _imgUrl(mediaImages[_lbIndex]);
+    if (_lbImages) {
+      img.src = _lbImages[_lbIndex];
+    } else {
+      img.dataset.fallback = '/public/gallery/' + mediaImages[_lbIndex];
+      img.src = _imgUrl(mediaImages[_lbIndex]);
+    }
     document.getElementById('lbCounter').textContent = (_lbIndex + 1) + ' / ' + pool.length;
     img.style.opacity = '1';
   }, 150);