All files / src/lib/images cloudinary-loader.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Cloudinary Image Loader for Next.js
 *
 * Custom loader for next/image that transforms URLs through Cloudinary CDN.
 */

interface ImageLoaderProps {
  src: string;
  width: number;
  quality?: number;
}

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: ImageLoaderProps): string {
  const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;

  // If already a Cloudinary URL, transform it
  if (src.includes('res.cloudinary.com')) {
    const parts = src.split('/upload/');
    if (parts.length === 2) {
      const transformations = `w_${width},q_${quality || 'auto'},f_auto`;
      return `${parts[0]}/upload/${transformations}/${parts[1]}`;
    }
  }

  // If it's a local path starting with /, serve as-is (for local development)
  if (src.startsWith('/')) {
    return src;
  }

  // If it's a public ID, generate Cloudinary URL
  const transformations = `w_${width},q_${quality || 'auto'},f_auto,c_limit`;
  return `https://res.cloudinary.com/${cloudName}/image/upload/${transformations}/${src}`;
}