Show placeholder image when no photo uploaded

I’m not sure why I am finding this so difficult. All I want to do is show a default image if user has not uploaded a profile image.

I’ve tried many variables to make this work but no joy?

Firstly remove the static image URL you’ve got in your dynamic image box, and instead change that to show the Current User’s Profile Image

Then add a conditional to the image:

if current User's Profile Image is empty

then set the image source to be your static default profile image.

I’ve tried this but it still won’t show the placeholder.

What are the constraints on your search?

And, obviously, I’m assuming you’ve removed the placeholder image from the main image source?

If your conditional is showing up as true (you can check in the debugger to see if the condition is true or false) then it means there are less that 1 user images being returned. If that’s the case, and you’re sure there are images in the DB, then either your search constraints are set up incorrectly, or there are some privacy rules applied that don’t allow the results to be seen by whoever is doing the search, so check both of those.

Personally I wouldn’t use a search on the conditional at all - I’d either use the current user (if that’s who it refers to), or the page’s User (if it’s a profile page), or the parent group’s User if it’s somewhere else on the page - that would simplify things - but the conditional behaviour will be the same regardless.

Feel free to post some more screenshots of your search constraints and privacy rules if you still can’t get it to work as you’re intending.

You’re a lot more advanced than I am so you’ll have to simplify a bit! I have removed the placeholder and attached my settings below. Where should I put the placeholder then, do I upload it to my DB? Users image shows up fine, but I want to show this placeholder if they have no images uploaded.

photo1


photo3

No, I meant remove the placeholder from the main image source (not the conditional image source) which you have done, so that’s fine.

So put the conditional image source back how you had it previously.

I still don’t know what your search constraints are, so there’s a chance that’s where your issue lies, especially regarding your conditional (unless it’s a privacy rules issue).

It’s also worth noting then whenever you do a search, you’ll get a list of items back (even if there’s only 1 item in that list), so you generally need to specify which item from that list you want to refer to (i.e. :first item).

In your screenshots above your conditional is searching for a list of Users (that match your constraints), then counting ALL of those Users’ images.

So your conditional image source will only show if there if there are 0 images in your returned list of User images.

If your search is returning more than a single user then it will be counting all those users’ images - so you’ll need to specify which item from the returned list you want to refer to.

As I said previously, it would be much simpler not to do any searches here at all, and simply refer to the User directly - that would eliminate any confusion and make errors less likely, as well as speeding up your page load etc. but regardless, my guess is that your search is not set up correctly and/or the way your conditional is set is causing the issue.

Without seeing more of your app I can’t say much more than that, so if you’re still struggling feel free to post a link to your editor (read-only) so myself or someone else can take a look and hopefully get to the bottom of it - it’s usually much quicker to find the issue that way.

I’ve got very confused with this. Here is my latest attempt (probably totally wrong).

photo placeholder

Could you show me in a image what I should do. I am finding this waaaay harder than it should be! I need to start again but with pictures showing me I think :frowning:

Also, I don’t know what a 'conditional ’ is or where to find them? I am not sure how I post a link to my editor?

image

Conditionals, conditional formatting, conditions etc. - this is what you’re setting up here on your image element, accessed via the ‘Conditional’ tab in the element properties editor.

Currently your condition is set so that when your ‘user image’ element is not visible it will change the image source to the placeholder image - which doesn’t make sense, as if the image element is not visible then it doesn’t matter what the image source is, it won’t be displayed on the screen. And besides, there’s nothing to hide the element in the first place.

Could you show me in a image what I should do. I am finding this waaaay harder than it should be! I need to start again but with pictures showing me I think :frowning:

This entirely depends on how your database is setup, and your on-page data structure, as well as the specifics of what you’re trying to do.

But, if I was doing something like this I’d go about it in the following way…

  1. My page would have a content type of ‘User’ (but that very much depends on what the page is for - I’d only do that if the page is for a public User profile or something similar - i.e. one that I want other users to be able to access. If it’s for a private user settings page, dashboard, or account access page then I definitely wouldn’t do that, instead I’d just refer to the current User).

  1. My Image source would be current page user's image

  1. My conditional would be when current page user's image is empty and the conditional image source would be the URL of the placeholder image.

image

That’s it.

If you need to post a link to your editor you just literally copy and paste the link from the URL bar in your browser for the editor (not preview). Just make sure you set your application rights to ‘Everyone Can View’ on the General tab of your app settings.

Thank you, that made it much clearer. I “think” it work, although it has opened a slight issue in that now the users photo doesn’t display if they HAVE uploaded an image!

EDIT: It didn’t work. I will post a link to my editor, the page in question is “dashboard”.

https://bubble.io/page?type=page&name=dashboard&id=vdfgfdg&tab=tabs-1

Just noticed a strange thing, when I use my website links to reach the dashboard page it doesn’t work. But, if I go to the dashboard in the editor and preview that page, then the image does work?!

yup, a page reload remove the users uploaded image and inserts the placeholder, that’s odd!?

Ok, so a few things…

Firstly, I’m assuming that the dashboard is for use by the person who is using your app? (not for someone else to access another users data etc.)?

In that case you don’t want to have a content type on this page at all - you only want the current user to be able to access the page for themselves, not for other users. So get rid of the page content type.

Secondly, you’re not applying any constraints to your search…

Currently your doing a search for ALL your Users - there are no constraints at all so you’re loading a list of your entire User database.

If you’re doing a search you need to refine it using constraint to tell the search which users you want to return, otherwise it will just return the entire list of users (which could be thousands, or even hundreds of thousands). So generally you need to use as many constrains as possible to narrow the search down.

But even if you narrow it down to a single database entry, the search results (in Bubble’s eyes) will still be a list - so you need to specify the :first item in order to tell Bubble that it refers only to a single database entry. *

In any case, as I’ve mentioned previously, there’s no need (or much logic) in doing a search here at all (you could do but it will just overcomplicate things and slow down your page)

The dashboard is for the current User, so the image source should simply be current user's image

For the conditional, as you’ll no longer be using a content type on the page, you just need to change it to when current user's image is empty

Edit * - I see that you have privacy rules applied to your user datatype so that users can only see their own database entry, including in searches. So with that in mind you could say that you don’t need to apply any constraints to your search for users as the only user returned will be themselves, in which case you could just apply :first item to the returned results. It’s still simpler to just refer to the current user’s image though.

Thank you, that worked! I kind of see what you mean, I guess I’m a little out of my depth as only been on Bubble for a week but things are slowly seeping in! I will add images for others who have same issue:

Show avatar placeholder in user’s dashboard area if no image uploaded by user.


1 Like