Frontend Next Images

Images & Media

Media URL Helper

// lib/media-url.ts
export function getMediaUrl(path: string): string {
  if (!path) return '';
  if (path.startsWith('http')) return path;
  return `${process.env.NEXT_PUBLIC_API_BASE_URL}${path}`;
}

Always pipe API paths through this before <Image src={...}>.

next.config.ts

images: {
  remotePatterns: [
    { protocol: 'https', hostname: 'server.yourdomain.com' },
    { protocol: 'http', hostname: 'localhost' },
  ],
}

Gallery Components

Fullscreen Gallery Pattern

• react-zoom-pan-pinch TransformWrapper
• motion AnimatePresence for slide transitions
• Body scroll lock when open
• Keyboard arrows + Escape

Homepage CMS Images

Locale + mobile variants: url_en, url_ar, url_phone_en, url_phone_ar HomepageService.getImageUrl(section, locale, isMobile)

Product Card

next/image with fill or explicit dimensions. Lazy load. Variation image swap on hover.

Video

Detect via file extension or MIME. Render GalleryVideo instead of Image in gallery strip.