My app has a public user profile page with a background header image similar to the profile pages on Facebook and Linkedin. I want the user to be able to select an image for the header but I’m finding it surprisingly difficult to do it. I have made a button below the header which the user should use to select and image from their device and upload but don’t know how to implement the workflow. I can’t use the standard Bubble Picture uploader because it uploads the image to the button and not the header. I have tried several uploader plugins but I still couldn’t figure out how to make it work.
Simple fix, really.
I’ve done them a couple of different ways.
I put together a quick demo.
This is what it looks like without an image:
This is with an image:
Here is the setup:
The group uploader is an aligned to parent group with a centered button that says upload image.
The picture uploader is in the same group aligned to center as well and is transparent. It is over the button. The picture uploader has a padding of 45 (the height of the uploader), which makes the picture invisible. Someone thinks they’re clicking the button, but in reality they’re clicking the picture uploader.
The group header is also an align to parent group with an image in it that is 100% width and height. The dynamic image is:
The icon is centered in the group and visible on page load with this conditional:
The border around the group has this conditional:
All very simple and takes minutes to set up.
You can also put the picture uploader over the whole image and do it that way if you prefer.
Added: You will also need to save the image to your database. You could do this with a workflow or autobind I guess however you prefer.
Added: I see I spelled uploader wrong, but I’m too lazy to change it now 
1 Like
Hi, thanks very much - I only just saw your message. That seems like a good solution - I have tried to implement it as you described but the image in the group is tiling horizontally. I have tried checking the box ‘make image as wide as parent element’ in the group’s editor but nothing seems to change. Do you know what might be the issue?
1 Like
The only way you can see those settings: horizontal tile, make as wide as parent, etc., is if you’re putting the image as the group background. You can do that if you want and still use imgix and set it to resize to fit the dimensions by cropping.
Occasionally, I place an image as a background…but it has some disadvantages. You can’t set conditionals on it (only the whole group). It doesn’t lazy load. Not good for SEO. Less control of the image. Can’t animate. Probably a couple more I’m forgetting. Having an actual image element is usually just a lot easier for me.
Anyway, the example I gave has an image element in the group.
On a couple of my picture uploaders, I have a holder image that switches to the picture of the uploaded image. I can do that with the image element inside the group with conditionals.
It’s up to you, I guess. If you’re having problems, the best thing is probably to show some screenshots for a better idea of exactly what you’re doing
You don’t need a special plugin for this – you can keep using the normal picture uploader, just not as the visible header itself.
-
Put your header area in a group (this is the “header image” group). Set the group’s background image to a dynamic image field from the User (for example: Current Page User’s Header image).
-
Add a picture uploader inside the header section (or in a small group below it), make it transparent and place it over your “Upload header image” button so clicking the button actually triggers the uploader.
-
In the workflow, when the picture uploader’s value is changed, save the uploader’s image to the User’s “Header image” field. The group’s background image will then update to show the new header image.
This way the uploader is only a control, and the real header is just a group that displays whatever image is stored on the user.
Thanks a lot. I found the issue which was that I hadn’t made the picture uploader invisible, it’s working now!
1 Like
This is actually terrible UI/UX the way you suggest.
The user wants to immediately see the image they uploaded, not wait until a workflow is run.
The way I suggested, where you make the image the uploader’s value, is the way anyone who knows design would do it in Bubble