Forum Academy Marketplace Showcase Pricing Features

Support for outputing standard sizing / cropping of user submitted images

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

@mishav I’ll do that hour of design if you’re interested. :slight_smile:

3 Likes

I could also contribute :slight_smile:

2 Likes

Awesome guys :slight_smile:

Latest changes:

  • Added EXIF library, image now picks up the orientation from the image exif properties.
  • Slider now showing - had to set a boundary smaller than the container.
  • Removed references to HTML element ids, so can now have more than one instance on a page.

Next will be:

  • Options for the element.
  • Styled “Browse” and “Save” buttons.

Any opinions on the button style and text for the “Browse” and “Save” buttons?

I want to also have settings to not show these inside the container, so the designer can supply their own buttons.

2 Likes

Great stuff. Is it possible to inherit button styles from the user’s app?

I think its a great idea to be able to have the browse and save buttons outside the container, it would make the design options a lot more flexible :slight_smile:

1 Like

Guys this is amazing, keep it up!

Thanks for the questions and encouragement, and the feedback on the styling :slight_smile:

To keep things simple, I’ve dropped the buttons from inside the container, and now rely on actions from a workflow.

Now there’s a choice of inputs, Browse opens a file browser, Load uses a supplied url (which has not yet made it into the options).

I find Croppie’s zoomer control nicer to use than the slider in Bubble, because it zooms as it is being dragged, whereas the Bubble one sends an update event when the handle has stopped being dragged around.

Options so far:

Events:

Actions:

Next steps:

  • Option for source url.
  • Other Croppie options, like Boundary.
  • Publish state: loading, uploading, result, browserSupported.
  • Publish events: uploaded, upload started, file loaded locally.
  • Documentation.

I plan on publishing the plugin, then add more such as:

  • Optional responsive adjustment of Boundary to keep in proportion to container size.
  • Drag-drop file onto page

Your feedback will be appreciated!

3 Likes

This looks really great @mishav!
I think the interface and options look logical and from what you’re telling it sounds like a good idea to keep the Croppie zoomer control.
Can’t wait to implement this in my app :slight_smile:

1 Like

This is amazing @mishav!
Not a big deal of course, but would there be a way to let Bubblers customize the background color? (where the purple gradient is?)

1 Like

Yes, the purple just happened to sneak up on me while I wasn’t looking … Bubble style properties similar to other elements, plus sizing, responsive, etc:

It is kind of fun playing with it already :slight_smile:

Latest options:

The boundary is useful to leave room for the zoomer control. Boundary width/height can be set as a percentage, which allows for different container sizes, or set to specific pixel size.

At the moment I’m having difficulty getting the Browse to work with touch devices.

any way to start playing with this yet? Awesome idea and execution from what I can see thus far, thanks so much for working on this!

Last updates:

  • Field documentation.
  • Source image url use image picker.
  • Output format option, auto picks jpg if input is jpg, png for everything else.
  • Tested on Firefox, Chrome, IE, Edge, Android.
  • Bug fixed: IE and Android don’t support Number.parseInt, so Rotate wasn’t working.
  • Bug fixed: Browse wasn’t working on Android.

The plugin needs more testing in areas of:

  • popups
  • Safari browser
  • Apple devices

I’ll open it to public when I tidy up the debug messages to console, and put on better documentation.

I’ve published this as a private plugin, if you send me a private message with the name of a Bubble app I’ll add it to the authorised apps list so you can play with it.

Wow it’s taken about six days to get this far!

3 Likes