Support for outputing standard sizing / cropping of user submitted images

@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

Thank you so much for all of your hard work on this plugin @mishav. Happy to help with design (more than the pledged one hour) considering all the time that you’ve put into developing this for the community. Feel free to let @pnodseth and me know what we can help out with!

1 Like

I couldn’t get the Load to get access to images from Bubble’s database. Hopefully a fix on the server side will come, until then I’m yanking out the Load function and image default.

Latest update … v0.1.0

  • Load and default image function works on Firefox and IE 11. Fails with CORS error on Chrome. Waiting for bug analysis from Bubble.
  • Make file private function fails. Waiting for bug analysis from Bubble.
  • Added background white for transparent sections output in jpeg (unrelated to the black border for circle viewpoints).
  • Increased size of zoomer button, for mobiles.

Also, I’ve added “forumapp3” as an authorized application, so anyone can mess around with it.

Sample page, editor and runtime.

2 Likes

More info on this version v0.1.0 …

  • Make file private function now works, thanks to a bugfix Bubble.

  • Load and default image function works on Firefox and IE 11. Fails with CORS error on Chrome, but succeeds if the image was saved as a private image. Waiting for bug analysis from Bubble.

3 Likes

Great work Mishav!
Looking forward to play around with it. Does it work on iOS/Android?

I’ve tested on Android, the native browser I used couldn’t drag the zoomer, but it could move it by tapping.

I’d appreciate seeing test results on iOS!

@daniel3 I’ve taken out the Load function, the CORS issue is still unresolved, but Emmanuel and I have an ongoing investigation.

About time to release it into the wild!

1 Like