Refactor: Implement Cloudflare Image Variants

src/lib/cloudflareImageUtils.ts

@@ -0,0 +1,61 @@
+/**
+ * Cloudflare Images variant utilities
+ * Generates properly formatted URLs for Cloudflare Image variants
+ */
+
+export type CloudflareVariant = 
+  | 'avatar' 
+  | 'banner' 
+  | 'bannermobile' 
+  | 'card' 
+  | 'cardthumb' 
+  | 'logo' 
+  | 'public';
+
+const CLOUDFLARE_ACCOUNT_HASH = import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH;
+
+/**
+ * Build a Cloudflare image URL with specified variant
+ */
+export function getCloudflareImageUrl(
+  imageId: string | undefined, 
+  variant: CloudflareVariant = 'public'
+): string | undefined {
+  if (!imageId) return undefined;
+  return `https://imagedelivery.net/${CLOUDFLARE_ACCOUNT_HASH}/${imageId}/${variant}`;
+}
+
+/**
+ * Generate responsive image srcset for card images
+ * Useful for <img srcset> elements
+ */
+export function getCloudflareImageSrcSet(imageId: string | undefined): string | undefined {
+  if (!imageId) return undefined;
+  
+  return [
+    `${getCloudflareImageUrl(imageId, 'cardthumb')} 600w`,
+    `${getCloudflareImageUrl(imageId, 'card')} 1200w`,
+    `${getCloudflareImageUrl(imageId, 'public')} 1366w`
+  ].join(', ');
+}
+
+/**
+ * Get responsive banner URLs for mobile and desktop
+ */
+export function getBannerUrls(imageId: string | undefined) {
+  if (!imageId) return { mobile: undefined, desktop: undefined };
+  
+  return {
+    mobile: getCloudflareImageUrl(imageId, 'bannermobile'),
+    desktop: getCloudflareImageUrl(imageId, 'banner')
+  };
+}
+
+/**
+ * Extract Cloudflare image ID from various URL formats
+ */
+export function extractCloudflareImageId(url: string): string | null {
+  // Match imagedelivery.net URLs
+  const match = url.match(/imagedelivery\.net\/[^\/]+\/([a-f0-9-]+)\//i);
+  return match ? match[1] : null;
+}

src/lib/imageUploadHelper.ts

@@ -60,9 +60,11 @@ export async function uploadPendingImages(images: UploadedImage[]): Promise<Uplo
       // Clean up object URL
       URL.revokeObjectURL(image.url);
 
+      const CLOUDFLARE_ACCOUNT_HASH = import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH;
+      
       // Step 3: Return uploaded image metadata with wasNewlyUploaded flag
       return {
-        url: result.result.variants[0], // Use first variant (usually the original)
+        url: `https://imagedelivery.net/${CLOUDFLARE_ACCOUNT_HASH}/${result.result.id}/public`,
         cloudflare_id: result.result.id,
         caption: image.caption,
         isLocal: false,