🚀 - Aspect ratio support and custom background images

[transitive-bullshit]

Which @codeimage/* package(s) are relevant/releated to the feature request?

codeimage

Description

I'd love the ability to select the output aspect ratio since twitter and diff social platforms have specific rules about min and max aspect ratios before they start getting cut off.

Also, the min 600px is really annoying. E.g., for this image, I wanted to have it be less wide, but it's not currently possible afaict w/ codeimage.

Currently, I'm exporting with the background turned off and using figma to composite with a 16x9 or 3x2 aspect ratio that I know will not get cutoff on twitter.

I previously built this for a related quote screenshot tool called Kwote (free / open source), so feel free to take a look at the UX I built for that as inspiration.

Also, 99% of the time I want to use a background image from the gradients I have locally, and I'm not sure that's currently possible.

Overall, love this tool though – it'd be 100% perfect for my twitter social sharing use case with a few small tweaks 💯

Thanks! 🙏

[riccardoperra]

Hey, thanks for reaching us 😄

I'd love the ability to select the output aspect ratio since twitter and diff social platforms have specific rules about min and max aspect ratios before they start getting cut off.

Sounds good 🤔 I saw in your tool how it's handled, I would say that something similar can be done for codeimage as well 😄

Also, the min 600px is really annoying. E.g., for this image, I wanted to have it be less wide, but it's not currently possible afaict w/ codeimage.

Agree for that 😅 We'll remove that constraint

Also, 99% of the time I want to use a background image from the gradients I have locally, and I'm not sure that's currently possible.

I confirm that currently this is not possible to do 👍 Could be a little hard to integrate with the #472 which i'm working on with @hackpirodev, but we can disable the persistence of the images in our backend and just store a blob url reference 🤔

---

I need a review with @hackpirodev to get organized but I would say that we'll start to work on some of these features in the next few days. In case we'll keep you updated

[riccardoperra]

Just to inform you, I am planning a deploy next week with all these features 😄

[transitive-bullshit]

This is amazing – thanks, @riccardoperra 🙏

[riccardoperra]

Hey @transitive-bullshit, I need some feedback before pushing that into production.

I'm currently finishing the first part of aspect ratio feature #535, assuming that the space is not enough to wrap the content, what would you expect in this case?

One thing I'm sure of is that right now I can't use transform scale due to a browser issue with native getBoundingClientRect which CodeMirror uses to calculate everything

In case, here a working preview to that feature (including custom bg, min width and presets) https://codeimage-app-pr-535.vercel.app/

[riccardoperra]

To be deployed in 1.4.0

[riccardoperra]

Live with 1.4.0