Prevent images from being cropped when displayed on social media

Update image display to use object-contain and remove server-side transformations, letting CSS handle aspect ratios.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/74fmQLN

client/src/components/media-upload.tsx

@@ -167,7 +167,7 @@ export default function MediaUpload() {
                     <img
                       src={selectedFile.facebookFeedUrl}
                       alt="Facebook preview"
-                      className="w-full h-full object-cover"
+                      className="w-full h-full object-contain bg-black"
                     />
                   ) : (
                     <div className="w-full h-full flex items-center justify-center">
@@ -191,7 +191,7 @@ export default function MediaUpload() {
                     <img
                       src={selectedFile.instagramFeedUrl}
                       alt="Instagram feed preview"
-                      className="w-full h-full object-cover"
+                      className="w-full h-full object-contain bg-black"
                     />
                   ) : (
                     <div className="w-full h-full flex items-center justify-center">
@@ -215,7 +215,7 @@ export default function MediaUpload() {
                     <img
                       src={selectedFile.instagramStoryUrl}
                       alt="Instagram story preview"
-                      className="w-full h-full object-cover"
+                      className="w-full h-full object-contain bg-black"
                     />
                   ) : (
                     <div className="w-full h-full flex items-center justify-center">

server/services/cloudinary.ts

@@ -51,39 +51,17 @@ class CloudinaryService {
     const publicId = uploadResult.public_id;
     const originalUrl = uploadResult.secure_url;
 
-    // Generate transformation URLs manually with lpad (limit pad) for images
+    // For now, use the original URL for all formats - no transformations
+    // The frontend will handle display with CSS to prevent cropping
     let facebookFeedUrl = null;
     let instagramFeedUrl = null;
     let instagramStoryUrl = null;
 
     if (!isVideo) {
-      // Use lpad (limit pad) - only scales down if needed, adds padding to fit dimensions
-      facebookFeedUrl = cloudinary.url(publicId, {
-        width: 1200,
-        height: 630,
-        crop: 'lpad',
-        background: 'black',
-        fetch_format: 'auto',
-        quality: 'auto'
-      });
-      
-      instagramFeedUrl = cloudinary.url(publicId, {
-        width: 1080,
-        height: 1080,
-        crop: 'lpad',
-        background: 'black',
-        fetch_format: 'auto',
-        quality: 'auto'
-      });
-      
-      instagramStoryUrl = cloudinary.url(publicId, {
-        width: 1080,
-        height: 1920,
-        crop: 'lpad',
-        background: 'black',
-        fetch_format: 'auto',
-        quality: 'auto'
-      });
+      // Use original image for all formats - NO CROPPING
+      facebookFeedUrl = originalUrl;
+      instagramFeedUrl = originalUrl;
+      instagramStoryUrl = originalUrl;
     }
 
     return {