Forum Documentation Showcase Pricing Learn more

Is it possible to put a transparent guideline image over Croppie?


#1

Hello! I am new to Bubble! I am trying to use the Croppie plugin to let a user upload their photo and crop it. I want to let the user upload a photo of their face and align it to some facial guidelines. I tried to put a transparent image right on top of Croppie (supposed to represent the facial guidelines), but when I upload the image, I cannot drag it around anymore.

Thank you so much.


How to make an image drag another image?
#2

Hi and welcome

Yes it should be possible to have another element such as an image over the Croppie plugin element.

It sounds like maybe the image that is on top of the Croppie is actually underneath, therefore you cant move it around.
Try right clicking on the Croppie element and clicking ‘Send to back’ then if you select the element of the image from the elements tree bar on the left, once selected, right click on the image and click ‘Bring to front’ - you should then be able to move the image about freely.

Hope that sorts it?

Luke.


#3

I don’t think that will work as you will lose the ability to drag and drop the crop.

From a quick look at the “original” code …

You only have two options for the guidelines, a circle or a square. So no other shape.

I wonder if there is a way to have some sort of transparent (to the mouse) image ?


#4

Ah sorry, I think I have misunderstood the question - I thought you meant adding a visual element like a grid e.g. Croppie - element plugin to crop and zoom images before upload I follow now.

Yes, exactly as Nigel has rightly pointed out, there are only circle and square cropped viewports:
image

With that said, you could use Imgix on the result image to crop around the face e.g.


But unfortunately this wouldnt interactive initially with Croppie.

Tricky one…


#5

Hello! Thank you for the reply. I didn’t mean about the viewport of croppie, but putting a transparent image over croppie that the user can use to line up the face to. I put a transparent image over it that has grid guidelines, but I could not drag the croppie around the part that the overlayed image was on, only around the parts that the overlayed image was not on. By the overlayed image, I meant a transparent image like this:

. Everything I have made transparent in Photoshop except for the black lines on the face that are the guidelines.


#6

Right I see.

So I’ve re-created, see below screen capture:

Just to confirm, is this what you are trying to achieve?

Best,
Luke.


#7

Yes! Exactly that! That’s so beautiful.


#8

Great, glad to here and thanks.

Its a simple solution so to get started you will need to create a group and with the group you will need to drag the Croppie element inside, make sure this element (Croppie) is visible on page load = unchecked.

The group will have a background image, this will be the facial grid image. You will need to have the facial grid image as a PNG (or SVG), white or black outline, whichever works best and you just need to bear in mind the size of the group with the width and height is consitant with the facial grid image which your set to as the background e.g.
image

You can then add some text to the group, maybe as pre-instructions. But I have then set a condition to hide the text once the Croppie has an image loaded e.g.
image

On the Croppie element you can select the viewport type preference, either square or circle. I have increase the viewport width and height e.g.
image
Also on the Croppie element your need to set the custom class as follows
image

Then with the custom class in place, on your page click the ‘HTML’ element and add to the page, I have added it as a 20px X 20px and moved to the top right corner of the page out the way. Add the code:
image
You can fiddle with the opacity levels to get the best view (if you prefer you could also integrate this code in CSS Tools plugin).

Then its just a button on the page with the following Workflow (When Upload button is clicked):

image
image
image

You may find you have to play around with the dimensions of the group and group to get the positioning just right.

There are other options, for instance you could have the facial grid appear only when an image is loaded into Croppie e.g.


Then just set the default of the group to no background.

Anyhow hope that helps.

Luke


#9

That is very clever.

Would you mind if I put the solution (credited to you) on Buildingonbubble ?


#10

Thanks Nigel, appreciated.

Yes sure, please do - anything to help out the community of Bubblers :+1:


#12

Hi Luke, Can you share the bubble app with this working example…


#13

Hey @melon

I’ve just checked my app where I created the mock version of the Croppie guideline and unfortunately I no longer have this example page, I must of deleted it a while ago…

My post above does cover the main steps in how to re-create, they should be somewhat accurate.

I’ve been thinking about creating a test app to share on the Forum with all sorts of demos, one could cover this functionality - I might create something soon if your interested?


#14

Only two years late !

I haven’t added it to buildingonbubble.com yet !


#15

Better late than never ay - looks good :+1:


#16

Upload button never change to to a save button, What condition to give on it. How to evaluate a finished crop…?


#17

So on the button you’d have a condition like so:
image

Then you’ll have separate workflows depending on the state of Croppie, one for browsing and the other for saving using ‘When’ conditions.


#18

Im still struggling to save a cropped image…Examples are half way mark, tutorials doesn’t bring results.

Got a weird instance that When im clicking upload a image is not getting loaded, When the run-time is changed to step-by-step its getting loaded…Why this behaviour…?


#19

Hey @melon

It seems your missing a workflow on the button. The button should have 2 workflows, 1 to browse and then the other to save, but only once the Croppie is loaded (with an image).

I can’t remember the whole process, I’ll have to re-trace my steps. If I have time I’ll later today add the fully example to a test app I have and share on this post.


#20

Have a look at this for the full process.

It is for multi croppies, but it will work in the same way for one.

https://buildingonbubble.com/block/mulitple-cropped-images-1498803294304x966981573587238900


#21

I have 2 separate button for upload & save. The issue is croppie is not getting loaded on single click, insted on step-by-step workflow its loaded…Using Chrome as browser

image

After loading, its not getting saved (Save action completes with null in the picture value)

image