Fix preset preview cropping for tall images

[asgharali97]

Fixes #41

What
Fixes an issue where preset preview thumbnails cropped tall images (e.g. mobile / vertical screenshots).

Why
Preview container forced a 16:9 aspect ratio and used object-cover, causing vertical images to be clipped.

How
Switched preview image rendering to object-contain to preserve original aspect ratio.

Testing
Verified preview behavior with vertical, square, and wide images.

stage.mp4

[vercel]

@asgharali97 is attempting to deploy a commit to the Kartik Labhshetwar's projects Team on Vercel.

A member of the Team first needs to authorize it.

[KartikLabhshetwar]

Hi @asgharali97 I think you have misunderstood the issue, the issue is to solve the preview of the preset bg not cropping of the image I mean you can do that too but the view on the canvas and preview in the preset is different we need to fix the preview gallery.

[asgharali97]

Hi @asgharali97 I think you have misunderstood the issue, the issue is to solve the preview of the preset bg not cropping of the image I mean you can do that too but the view on the canvas and preview in the preset is different we need to fix the preview gallery.

@KartikLabhshetwar Thanks for the clarification, and apologies for the misunderstanding earlier.

I spent some more time observing the preset previews on the live site to better understand the issue. Here’s what I’ve noticed so far, and I want to confirm if this matches the intended behavior.

Currently, the preset previews already reflect some visual properties correctly for example, the image border radius shown in the preview matches what gets applied on the canvas, and this seems to be handled by a wrapper/parent element rather than the image itself.

However, for presets that apply more complex effects (such as 3D transforms, glass/frosted borders, or multiple borders), the preview gallery mainly shows a background change and a basic image layout. Visually, these presets look very similar to simple background presets, even though the actual canvas result is significantly different.

Based on this, my understanding is that the expected behavior is for the preset preview to better represent the effect of the preset itself not just the background, but also cues for things like depth, glass, or multi-border styles so users can understand what a preset does without relying on the title or description.

Could you please confirm if this interpretation is correct? Once aligned, I can start working on updating the preset preview accordingly (or adjust the existing PR if needed).

[KartikLabhshetwar]

Hi @asgharali97 I think you have misunderstood the issue, the issue is to solve the preview of the preset bg not cropping of the image I mean you can do that too but the view on the canvas and preview in the preset is different we need to fix the preview gallery.

@KartikLabhshetwar Thanks for the clarification, and apologies for the misunderstanding earlier.

I spent some more time observing the preset previews on the live site to better understand the issue. Here’s what I’ve noticed so far, and I want to confirm if this matches the intended behavior.

Currently, the preset previews already reflect some visual properties correctly for example, the image border radius shown in the preview matches what gets applied on the canvas, and this seems to be handled by a wrapper/parent element rather than the image itself.

However, for presets that apply more complex effects (such as 3D transforms, glass/frosted borders, or multiple borders), the preview gallery mainly shows a background change and a basic image layout. Visually, these presets look very similar to simple background presets, even though the actual canvas result is significantly different.

Based on this, my understanding is that the expected behavior is for the preset preview to better represent the effect of the preset itself not just the background, but also cues for things like depth, glass, or multi-border styles so users can understand what a preset does without relying on the title or description.

Could you please confirm if this interpretation is correct? Once aligned, I can start working on updating the preset preview accordingly (or adjust the existing PR if needed).

Hi @asgharali97, Yes you are right, but this behavior is shown in every case.

[asgharali97]

Hi @KartikLabhshetwar Thanks for the clarification earlier that helped a lot.

I revisited the issue and focused on fixing the preset preview mismatch in a scoped way. The core problem was that the PresetGallery preview was using hardcoded layout assumptions instead of deriving its structure from the preset config itself, which caused the preview to differ from the canvas in all cases.

I explored two approaches:

1. Rendering a mini canvas per preset using the same canvas components
2. Keeping the preview lightweight and making it data-driven based on PresetConfig

Given the issue labels and scope, I went with option 2.
I refactored the preset preview rendering so presets better reflect their actual output:
Preset-specific aspect ratios are now respected instead of forcing 16:9.
Image frames now account for border padding, radius, and border types (solid, glassy, infinite-mirror).
Added support for 3D perspective transforms directly in preset previews.
Background blur and noise overlays are rendered closer to final output.

happy to adjust if you prefer a different tradeoff

I’ve attached a short before/after video showing the improved consistency between the preset preview and the canvas.

before

before.stage.mp4

after

after.stage.mp4

[KartikLabhshetwar]

Hi @KartikLabhshetwar Thanks for the clarification earlier that helped a lot.

I revisited the issue and focused on fixing the preset preview mismatch in a scoped way. The core problem was that the PresetGallery preview was using hardcoded layout assumptions instead of deriving its structure from the preset config itself, which caused the preview to differ from the canvas in all cases.

I explored two approaches:

1. Rendering a mini canvas per preset using the same canvas components
2. Keeping the preview lightweight and making it data-driven based on PresetConfig

Given the issue labels and scope, I went with option 2. I refactored the preset preview rendering so presets better reflect their actual output: Preset-specific aspect ratios are now respected instead of forcing 16:9. Image frames now account for border padding, radius, and border types (solid, glassy, infinite-mirror). Added support for 3D perspective transforms directly in preset previews. Background blur and noise overlays are rendered closer to final output.

happy to adjust if you prefer a different tradeoff

I’ve attached a short before/after video showing the improved consistency between the preset preview and the canvas.

before

before.stage.mp4
after

after.stage.mp4

Hi @asgharali97 can you fix the border view in the preset gallery.

[asgharali97]

Hi @KartikLabhshetwar, thanks for the feedback.

Just to clarify what you mean by “fix the border view” in the preset gallery I want to make sure I’m addressing the right thing:

the border appears visually too large / dominant for certain presets (e.g. artistic texture, vintage film), likely because it’s currently scaling with the preset aspect ratio?

Or is this about the border shape / radius not matching the canvas output?

If you can point to one preset as an example of the expected behavior, I’ll align the gallery preview exactly to that.

[KartikLabhshetwar]

Hi @KartikLabhshetwar, thanks for the feedback.

Just to clarify what you mean by “fix the border view” in the preset gallery I want to make sure I’m addressing the right thing:

the border appears visually too large / dominant for certain presets (e.g. artistic texture, vintage film), likely because it’s currently scaling with the preset aspect ratio?

Or is this about the border shape / radius not matching the canvas output?

If you can point to one preset as an example of the expected behavior, I’ll align the gallery preview exactly to that.

yes i am talking about this thing only. the preview in the preset should be identical to how it looks in the canvas.