I always push my members to change their default profile photos. Because my site is a social netwrok to share things and make friends. I don't think they can make new friends with the default profile photos and no any other contents. I don't ask them to upload a real face photo since I'm not the dating service. Just any image they like to replace the default one.

Base on the discussion in Creators: HIGHLIGHT COOL FEATURES TO YOUR USERS. I decide to put a very big image banner into the member's profile page who still use the default photo. Yes, that big image banner promotes member to change the default photo. And it won't show in the profile pages that already upload profile photos.

I use this image banner. The Chinese characters say: Don't be shy. Click your default photo to replace it with a new one.

And I put it in the bottom of right column. Since the right column of profile page in my site is quite empty. Here is the screen snap. Click here for the real action.

If you want do the same thing. You need a promote image or text and my Javascript. Actually the image don't need to be so big. It totally depends on your site.

Here are the install steps:

1. Make sure you know the filename of the default photo image. Because the script need it to check if members still use the default one. If you don't know the filename. You can upload a new default photo image in site control panel. And before you upload it, rename it to default_photo_filename.jpg or default_photo_filename.png. So that you don't need to modify the script for this.

2. Prepare your promote image and upload it with the File Manager or to anywhere in your site ( I upload it to the Photo ). Copy the image url.

3. Right click to download this Javascript file: ningAskChangeProfilePhoto.js 

Open it with any text editor (don't use Word). There are two places with the pink highlight you need to modify. Here is the content of the .js file:

( Click the image to view the full size. )

• The first highlight is the filename of the default photo image. If you already rename it to default_photo_filename.xxx before uploading, then you don't need to change anything here. Other wise you need to replace default_photo_filename with your filename ( don't need to add file extension ).
• The second highlight is the HTML code you want to insert into the profile page. The orignal one in the .js file is: 
  
  <div class=\"ask_to_change_photo\"><a href=\"http://.....your site domain...../profiles/settings/editProfileInfo\"><img src=\"http://api.ning.com/files/...........your image file url.jpg\" alt=\".....your alt text.......\"/></a></div>
  
  It's a div with a link to the member's setting page and the promote image just uploaded. All should be in one line non-break. And careful with the quotes. All quotes between the two quotes of sideBar.appendChild("............."); should have a backslash before. 

4. When you finished, save it. And then upload the .js file with the File Manager or to anywhere in your site ( I create a private Page and upload all files I need in that page as a file manager page). Copy the url of the .js file.

5. Go to the Custom Code, add this line for YUI 3 if you don't have yet:
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>

note: YUI 3 is a Javascript framework writing by Yahoo!. Just like jQuery is another Javascript framework.

6. Still in Custom Code, add this line for the Javascript file you just uploaded.
<script src="http://api.ning.com/files/............/ningAskChangeProfilePhoto.js" charset="utf-8"></script>

Now save and check the profile pages with the default photo. Also check the profile pages without the default photo.

Sorry for those complicated steps. I put the Javascript code in a separate file, don't put it directly in the Custom Code for better performance and maintenance reasons. The browsers will auto-cache the .js file for faster downloading and bandwidth saving.

If you get some trouble when installing it. Check the .js and image file path, default_photo_filename and the HTML code in .js file. Any mistake in HTML code is not allowed. And please add Help, Support Discussions or Suggestions to the Support Group.

This tips is tested with Design Studio.

This tips also can be used with old themes. You just need to change .xj_sidebar_content to . xj_classic_sidebar in the Javascript file. That's all.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported.... Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at iYouMe.net.