Update image display to support multiple sizes and background colors

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

No files matched your search

+3 -3
View File
@@ -167,7 +167,7 @@ export default function MediaUpload() {
<img
src={selectedFile.facebookFeedUrl}
alt="Facebook preview"
className="w-full h-full object-contain bg-black"
className="w-full h-full object-cover"
/>
) : (
<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-contain bg-black"
className="w-full h-full object-cover"
/>
) : (
<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-contain bg-black"
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center">