Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-11 17:26:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update image display to support multiple sizes and background colors

Browse Source 
Configure Cloudinary service to generate multiple image transformations (Facebook Feed, Instagram Feed, Instagram Story) upon upload and update frontend to use these generated URLs, adjusting CSS from `object-contain` to `object-cover` for proper display.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nGcGXQw
This commit is contained in:
michaelschal committed 2025-10-02 12:28:33 +00:00
1 parent 2456cb7c9c
commit 4bbdabdbde
3 files changed
+22 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

server/services/cloudinary.ts
+15 -8
View File
@@ -31,13 +31,22 @@ class CloudinaryService {
const isVideo = mimeType.startsWith('video/');
// Upload to Cloudinary (without eager transformations)
// Define eager transformations for images (generated during upload)
const eagerTransformations = !isVideo ? [
{ width: 1200, height: 630, crop: 'pad', gravity: 'center', background: 'auto' }, // Facebook Feed
{ width: 1080, height: 1080, crop: 'pad', gravity: 'center', background: 'auto' }, // Instagram Feed
{ width: 1080, height: 1920, crop: 'pad', gravity: 'center', background: 'auto' } // Instagram Story
] : undefined;
// Upload to Cloudinary with eager transformations
const uploadResult = await new Promise<any>((resolve, reject) => {
const uploadStream = cloudinary.uploader.upload_stream(
{
folder: 'social-flow',
public_id: `${Date.now()}-${fileName.replace(/\.[^/.]+$/, '')}`,
resource_type: isVideo ? 'video' : 'image',
eager: eagerTransformations,
eager_async: false, // Generate transformations immediately
},
(error, result) => {
if (error) reject(error);
@@ -51,17 +60,15 @@ class CloudinaryService {
const publicId = uploadResult.public_id;
const originalUrl = uploadResult.secure_url;
// For now, use the original URL for all formats - no transformations
// The frontend will handle display with CSS to prevent cropping
// Extract eager transformation URLs (generated by Cloudinary during upload)
let facebookFeedUrl = null;
let instagramFeedUrl = null;
let instagramStoryUrl = null;
if (!isVideo) {
// Use original image for all formats - NO CROPPING
facebookFeedUrl = originalUrl;
instagramFeedUrl = originalUrl;
instagramStoryUrl = originalUrl;
if (!isVideo && uploadResult.eager && uploadResult.eager.length === 3) {
facebookFeedUrl = uploadResult.eager[0].secure_url; // Facebook Feed (1200x630)
instagramFeedUrl = uploadResult.eager[1].secure_url; // Instagram Feed (1080x1080)
instagramStoryUrl = uploadResult.eager[2].secure_url; // Instagram Story (1080x1920)
}
return {