I Built PosterPilot: A Cloudinary-Powered Tool to Adapt University Event Posters Without Cropping Important Details

University societies and event organizers regularly create posters for seminars, workshops, competitions, hackathons, and other campus activities.

However, sharing one poster across different platforms can become challenging. Instagram posts, Instagram Stories, and website previews all require different dimensions. Simply resizing an image can crop important information, such as event titles, dates, venue details, or sponsor logos.

To explore how image transformation can solve this problem, I built PosterPilot, a Cloudinary-powered web application that helps users adapt one uploaded event poster into multiple formats.

What is PosterPilot?

PosterPilot is a web-based image adaptation tool designed with university societies and event organizers in mind.

Users upload an event poster once and generate different output formats using Cloudinary image transformations.

The main idea is simple: make poster adaptation easier while giving users control over whether the entire image should remain visible or fill the selected dimensions.

🌐 Live Demo: https://posterpilot.vercel.app
💻 GitHub Repository: https://github.com/alpha5-rdx/posterpilot

The Problem I Wanted to Solve:

Imagine a university society has designed a poster for an upcoming technology event. The society wants to share it in three places:

• Instagram Square post
• Instagram Story
• Website or social media preview

Each platform requires a different image size. Cropping the original poster to fit these dimensions can remove important information.

I wanted to build a simple solution that could generate these formats without requiring users to manually edit the same poster multiple times.

Technology Stack

I used the following technologies:

1. React: Building the user interface and reusable components.
2. Vite: Development environment and production build tooling.
3. JavaScript: Application logic and interactions.
4. CSS: Responsive styling and layout.
5. Cloudinary: Image uploading, transformation, delivery, and optimization.
6. Vercel: Deploying and hosting the application.

The project uses a frontend-only architecture. Cloudinary handles image storage and delivery, so I did not need to build a separate backend for this version.

How Cloudinary Powers PosterPilot?

Cloudinary is the central part of the application.

I integrated Cloudinary's Upload API using an unsigned upload preset. This allows the frontend to upload an image without exposing the Cloudinary API Secret. The application sends the selected image and upload preset to the Cloudinary image upload endpoint: https://api.cloudinary.com/v1_1//image/upload

After a successful upload, Cloudinary returns information such as:

• Secure image URL
• Public ID
• Image dimensions
• File format
• File size
• Asset version

PosterPilot uses the returned image information to generate transformed image URLs.

This approach allows the application to work with one original uploaded image and dynamically generate different versions through Cloudinary transformations.

Five Output Formats

PosterPilot currently supports five predefined formats:

Format: Innsta Square Dimensions: 1080 x 1080
Format: Innsta Story Dimensions: 1080 x 1920
Format: Web/Social Preview Dimensions: 1080 x 1080
Format: LinkedIn Portrait Dimensions: 1080 x 1350
Format: LinkedIn Square Dimensions: 1080 x 1080

Users can preview the generated versions before copying their URLs or downloading the images.

*My Main Feature: No-Crop vs Crop-to-Fill
*
One of the main features I wanted to explore was the difference between preserving the complete image and filling a target canvas.

1. No-Crop Mode

For this mode, I used Cloudinary's c_pad transformation.

Example transformation: c_pad,w_1080,h_1080,b_white/q_auto/f_auto

This transformation fits the original image inside the specified dimensions while preserving the entire image. If the aspect ratios differ, padding is added to complete the canvas.

This is useful when the poster contains important information that should remain visible.

2. Crop-to-Fill Mode

For the alternative mode, I used Cloudinary's c_fill transformation with center gravity.

Example transformation: c_fill,g_center,w_1080,h_1080/q_auto/f_auto

This fills the target dimensions by cropping the image where necessary.

It is useful when users prefer a completely filled canvas and accept that some parts of the original image may be cropped.

Image Optimization and Delivery

I also used two useful Cloudinary transformation parameters:

• q_auto: Automatically selects an appropriate image quality setting.
• f_auto: Automatically selects a suitable delivery format based on browser support.

These transformations help optimize image delivery without requiring users to manually create multiple optimized files.

Other Application Features

In addition to image transformations, PosterPilot includes:

1. Drag-and-drop image upload.
2. File browsing and image validation.
3. JPG, PNG, and WebP support.
4. A 10 MB client-side upload limit.
5. Upload progress and error handling.
6. Image replacement and reset functionality.
7. Copy transformed image URL.
8. Download transformed images.
9. Responsive user interface.

Testing and Deployment

After development, I tested the application locally and deployed it using Vercel. I also tested the live application to verify that:

• Image uploads work with Cloudinary.
• All three output formats generate correctly.
• No-Crop and Crop-to-Fill modes update the previews.
• Generated image URLs can be copied and opened.
• Transformed images can be downloaded.

The live application is available here: (https://posterpilot.vercel.app)

What I Learned?

Building PosterPilot gave me practical experience with Cloudinary's image upload and transformation capabilities. Some of the important concepts I explored include:

• Integrating an external image service into a React application.
• Using unsigned uploads without exposing API secrets.
• Generating image variations through dynamic transformations.
• Understanding the difference between padding and cropping.
• Optimizing images for web delivery.
• Deploying a frontend application with environment variables.

I also learned that a useful project does not always need a complicated architecture. Sometimes, combining the right service with a focused real-world problem can produce a practical solution.

*What's Next?
*
PosterPilot is an initial version, and there is room for improvement. Some possible future enhancements include:

• More social media presets.
• Custom width and height controls.
• Background color selection for padded images.
• Batch poster processing.
• Additional image editing options.

*Final Thoughts
*
PosterPilot started with a simple campus-related problem: adapting event posters into different formats without unnecessarily losing important information.

Through this project, I explored how Cloudinary can make image uploading, transformation, optimization, and delivery easier to integrate into a modern web application.

I'm excited to continue learning, building, and exploring more practical applications of Cloudinary.

I'd appreciate your feedback and suggestions!

*Project Links
*
Live Demo: Vercel Link
GitHub: GitHub Repo