Update image uploading to generate social media formats on demand

Remove eager transformations from Cloudinary uploads and generate transformation URLs manually using `cloudinary.url` with `lpad` crop, enabling dynamic image resizing for different social media platforms.

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/74fmQLN
This commit is contained in:
michaelschal committed 2025-10-02 11:55:12 +00:00
1 parent b6929e7830
commit a641ec69a0
2 files changed
+30 -19

No files matched your search

+30 -15
View File
@@ -31,22 +31,13 @@ class CloudinaryService {
const isVideo = mimeType.startsWith('video/');
// Define eager transformations for images (generated during upload)
const eagerTransformations = !isVideo ? [
{ width: 1200, height: 630, crop: 'pad', gravity: 'center', background: 'black' }, // Facebook Feed
{ width: 1080, height: 1080, crop: 'pad', gravity: 'center', background: 'black' }, // Instagram Feed
{ width: 1080, height: 1920, crop: 'pad', gravity: 'center', background: 'black' } // Instagram Story
] : undefined;
// Upload to Cloudinary with eager transformations
// Upload to Cloudinary (without 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);
@@ -60,15 +51,39 @@ class CloudinaryService {
const publicId = uploadResult.public_id;
const originalUrl = uploadResult.secure_url;
// Extract eager transformation URLs (generated by Cloudinary during upload)
// Generate transformation URLs manually with lpad (limit pad) for images
let facebookFeedUrl = null;
let instagramFeedUrl = null;
let instagramStoryUrl = null;
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)
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'
});
}
return {