Merge branch 'fix/product-card-galeria-object-contain'

fix(storefront): galería de tarjetas sin recortes y sin sobrecargar el optimizador
- object-contain en vez de object-cover: las fotos secundarias no son cuadradas (Buzz 933x1500, Tristeza 896x1052) y cover les cortaba cabeza/pies. Mismo criterio que product-gallery.tsx. - unoptimized desde la 2da imagen: pasar las ~58 imagenes de las galerias por el optimizador de Next dejo un pod de prod OOMKilled (768Mi) ante una carga en rafaga. Originales ~165 KB promedio, lazy; la 1ra imagen sigue optimizada como antes de la galeria. Validado con build de produccion local y fotos reales (Playwright: fit contain medido, fuentes optimizada/directa, suite de galeria completa). Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_018r19s4H8MBGegqToqw5guP
2026-09-27 04:00:45 +00:00 · 2026-09-27 04:00:44 +00:00
1 changed files with 15 additions and 1 deletions
@@ -53,13 +53,27 @@ export function ProductCardGallery({
            aria-label={total > 1 ? `${name}, imagen ${slide + 1} de ${total}` : name}
            tabIndex={slide === 0 ? 0 : -1}
          >
+            {/* object-contain (no object-cover): las fotos secundarias del
+                catálogo no son cuadradas (verticales tipo 933x1500 u
+                horizontales) y cover les cortaba cabeza, pies o bordes
+                -- reportado en vivo con Tristeza y Buzz. Mismo criterio que
+                product-gallery.tsx; el letterbox queda del bg-white de la
+                tarjeta. */}
+            {/* unoptimized desde la 2da imagen: pasar todas por el
+                optimizador de Next multiplica el trabajo de sharp dentro
+                del pod (~58 imagenes en el catalogo vs. 18 antes) -- una
+                carga en rafaga de todas las galerias dejo un pod de prod
+                OOMKilled (limite 768Mi) el 2026-09-27. Los originales de
+                media.cruzcloud.net pesan ~165 KB promedio y son lazy: solo
+                se bajan al deslizar. La 1ra sigue optimizada como antes. */}
            <Image
              src={src}
              alt={slide === 0 ? name : `${name} (imagen ${slide + 1})`}
              fill
+              unoptimized={slide > 0}
              priority={priority && slide === 0}
              sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px"
-              className="object-cover transition duration-500 group-hover:scale-[1.035]"
+              className="object-contain transition duration-500 group-hover:scale-[1.035]"
            />
          </Link>
        ))}