Support for outputing standard sizing / cropping of user submitted images

I’m enabling users to submit images and am using them in a variety of locations to personalize the feel of our site for each user. This includes, full background images, stripes across the page, images within repeating groups, etc.

I’d find it really helpful if there were a simple way to set the output of the images in different locations so that I could control what portion of an image was display. In general, I want to make the images fit the full size of the container I’m using. And, when the image is too tall or too wide to fit perfectly, then I want to decide what portion to cut.

Seems this has been a moderately common request in the forums. Wondering if there’s any chance something like this is coming down to Bubble soon? If not, I’ll probably hire someone to help me add custom CSS to manage this on certain elements. Workable, but not ideal.

Thanks!

3 Likes

Ive talked to Emmanuel about integrating this, and they can do it pretty quick on a sponsored basis.
I don’t have the resources to do that on my own, but If some people are willing to share the cost it might go somewhere. :slight_smile:

I like the idea of sponsored features - unfortunately perhaps not this one. But there seems to be no good place to list sponsored ideas and attached members.

Not sure if good idea @emmanuel but I’m on this forum practically everyday - it’s a really good resource. What about a section called “feature requests” or “current sponsored features” - this would basically be a major category And each topic in this category will basically be a list of current sponsored ideas from users.

3 Likes

I second that @propvideo great idea

@pnodseth, great idea.

I’m in for $50 for Bubble to add support for outputing standing sizing / cropping of user submitted images. Anyone else able to chip in?

@emmanuel, what’s the total sponsor cost for a crowd-sourced feature addition of this scope?

The tool that was discussed regarding sponsoring was this: https://foliotek.github.io/Croppie/
I’m not sure if I can disclose the amount Emmanuel told me, so I’ll let him chime in.

By the way, someone made an app for crowd-sourcing sponsored features some months ago, but I haven’t heard about it in a while and can’t remember the name.

Ok so I got a heads up from emmanuel. The sum is $900, and they can have it integrated quite fast.
Who would be willing to join this? I’ll sponsor 1/10 of it.

I’ll up my offer to 1/10 of the price so long as it gets approved within 2 weeks. If not, I’ll have already custom coded a solution.

This is core functionality that I’m sure lots of user will want. Afterall, even all of the landing page builders like unbounce have this type of capability. So, hopefully we can get enough community support for it because $900 is too large of a pill to swallow for any one user I’m sure.

1 Like

Yes please — I would contribute to having the ability to change the Image Run Mode to something like “Fill the Element” so that the image fills the entire element without distorting the image. Surprised this isn’t a standard behavior as all modern web apps handle images much better than the current Bubble options. It seems like this would be something Bubble should fix but if I need to contribute dollars to make it happen I would.

@emmanuel, can we get this going?

~ Andy

I’m ready to sponsor this if it becomes a run mode like “fill the element” or something so that user uploaded images don’t destroy the design by skewing the layout or stretching the image.

@emmanuel — can we get this in queue. How do I sponsor a feature? Does the $900 include the ability for users to adjust the portion that will be seen (like facebook profiles or a focal point like Squarespace?

Thanks!

This is a different request from the others, they want to offer the ability to their users to crop their images.

@emmanuel — Can we make a new run mode like this? How much would it cost? I can’t launch my app unless I find a way to make a user uploaded image work in both a Square format and landscape orientation.

If you use a group or a shape and enter the image there as a background you can pick

Crop the image to fit the element size

and

Make image as wide as parent element

which gets you very far.

2 Likes

@emmanuel — Just tried that and it does get me pretty far. Thank you.

This will work for launch but not a great long-term solution.

Can you get me a quote to make this a run mode so that users can choose a focal point (best solution) — not sure if a run mode is necessary, but make it so a user is able to adjust the visible area of an image they upload.

Perhaps what the other folks above are asking for above might work, but I’m not entirely sure what that would look like. If a user would be able to choose how their image looks like (in both a square and landscape format then that is the end goal.

Sponsoring features it’s a bit tight these days, 2017 will be better for this.

@emmanuel — 2017 is fine. Just want to get in the queue or see if its feasible for me. Your background image idea works in the mean-time. Thanks again!

The app is https://featureseed.com

Would love to see one of these sponsorships to be successful using it.

2 Likes

Not that we are able to create our own elements and actions ([New Feature] Opening the Element Plugin builder to everyone) , does any of you have the skills to integrate something like Croppie - javascript image cropper tool ?

@Kfawcett, just an idea - with the new JS plugins, you may be able to position futureseed to crowdsource funding of specific JS plugins. Two formats come to mind:

1 - A group of people all contribute, futureseed sources someone to build it (either Bubble team into the core app, or external team via a JS plugin) and then it becomes available to everyone for free.
2 - A group of people contribute money, futureseed hires someone to build the feature, then each contributor gets access to that JS plugin and a % of revenue on future sales to other people.

Just an idea for you.

Best,
Scott

2 Likes

I can do this :slight_smile: Anyone interested in supporting the development? Rather than money, how about pledge an hour of design, our team is lacking in designers …

Rough ugly integration with rubber bands and no controls or options yet, using the mouse for zoom and positioning.

Getting the image into the browser is almost instant, uploading to Bubble takes the same time as the image uploader.

3 Likes