Back

Website Update - Cropping Tool

Howdy folks! Back again with another short but sweet update detailing a new feature for the site!

Note: This feature is for premium users only, as it utilizes our image hosting service, which we pay for via your premium subscriptions. If you want access to this feature, consider subscribing! You don't even need a Patreon account now!

As always head to our support server for feedback on functionality, bug reports, or cool new ideas.

Preview

TL;DR Premium users can upload full size images on the dashboard, and a handy new tool to crop the image will pop up before uploading now!

Demonstration of using the crop tool to select a headshot while keeping the fullbody for reference

Context

Previously, when a user used the premium avatar upload tool, the image would automatically be resized and cropped to optimize for Discord's profile pic specifications. Discord profile pics look best when they originate as a 512x512px image, so if you uploaded an image that didn't fit that specification, we would automatically crop it into a square shape, then resize the result.

The original image has always been kept, but the image we tell Discord to display on the bot uses the cropped version, not the original.

The only issue with this approach has been that we have no way of guessing where the user would like the image to be cropped to, so we just kind of hoped that cropping toward the center would be good enough.

Cropping Tool

Introducing the cropping tool!

Cropping tool preview

When a premium user uploads a new avatar for their tupper via the website, this new fancy modal will pop up, allowing them to manually preview and select which portion of the image ends up in the final profile pic!

This system gives the user much more power in decided how their tupper's profile pic will appear. The default setting is still set to match the same as the old auto-centering system, though, so if that's good enough, just click through to Submit Avatar.

This tool also works just as smoothly (if not better) on mobile! You can move the cropping window, zoom, and resize until you get your selection just how you like it.

Cropping tool selection set to crop a face

Once you get it just how you like it, hit "Submit Avatar" to upload and crop your image! As before, you'll still be able to preview the changed avatar before you save it.

Demonstration of tupper info page

Full Avatar View

Please note that the cropped version is only the version shown for profile pics in Discord and the dashboard. The original image is still saved and uploaded. You can view it at any time by clicking on your tupper's avatar in the dashboard, or by using tul!avatar or any similar command in the bot.

Full avatar view preview image

This feature is particularly nifty if you like using a fullbody image for the base, but keeping the pfp a headshot cropped version of the original.

Demonstration of using the crop tool to select a headshot while keeping the fullbody for reference

Art credit for Diva Doo character to @divanios.

~ Gasparr, Magus of Markup