Render Shopify imagery through next/image

Turn the optimizer back on by dropping images.unoptimized, and widen the
Shopify remote pattern to **.shopify.com so any image subdomain resolves.
With the optimizer live, remotePatterns is now actually enforced.

Convert the seven Shopify CDN call sites: the product/collection cards and
the gallery carousel size with fill + sizes, while the cart, order and
search thumbnails carry explicit dimensions. The avatar, markdown,
attachment, assistant and logo images stay plain <img> — they take
blob:/data: or arbitrary hosts that next/image cannot process.

The lightbox needs w-auto h-auto: the width and height attributes
next/image requires make both axes definite, so max-w/max-h clamp them
independently instead of preserving the ratio. object-contain masked that,
but the stretched element covered the overlay and ate the backdrop clicks
that close the dialog.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015uSQQNWrmiYDRW9L9VnsGC
This commit is contained in:
Rami Bitar
2026-08-08 17:48:19 -04:00
co-authored by Claude Opus 5
parent 58742d5d00
commit 82c9626c75
7 changed files with 56 additions and 27 deletions
+16 -16
View File
@@ -3,23 +3,23 @@ export default {
typescript: {
ignoreBuildErrors: true,
},
images: {
unoptimized: true,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com',
},
{
protocol: 'https',
hostname: 'cdn.shopify.com',
},
{
protocol: 'https',
hostname: '**.frontend.co',
},
],
},
{
protocol: 'https',
hostname: 'images.unsplash.com',
},
// Covers cdn.shopify.com plus any other Shopify-hosted image subdomain.
{
protocol: 'https',
hostname: '**.shopify.com',
},
{
protocol: 'https',
hostname: '**.frontend.co',
},
],
},
experimental: {
reactDebugChannel: false
},