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.



Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
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.

Views: 562

Replies to This Discussion

very nice tip indeed .



You rock!!!
I think it won't works because the banner images I used i s too cute. A member had told me that he like the default photo so won't change it. I think the next step is to put AD banner there. If he don't want the AD in his page, change the photo.




if you manage to make ad banner moved when member ad there photo you will open a new area for us


 we could do better


we can make VIP membership as they won't bother with comercial ads all over the place if they sign up with a VIP account


tagged and HI5 do that


Ok, I'll do this. But the problem is how to identify a member sign in with a VIP account? Is there any CSS id or class name, or HTML patterns can be used for identify?
This is great tip. I think I will do something similar to this for my network.. Except I think because my network is for artists and the default photo is a giant red heart (which I though members would want to change right away but they don't) I'm going to put lettering on the heart that says something like "default photo, Change your heart to art" maybe that sounds cheesy though?????
I like cheese, go for it!

Now I changed the banner to a google AD and have text link above: Upload your profile photo to remove AD. The google AD also display in every other pages except the profile pages which member already changed the default photo. And the text link above only display in profile pages with AD.

Here is the snap:

By the way, you can use the same code here to do this. Just replace the second pink highlight code in the .js file with your AD and link code.

Whoa! Wow! Alex you are really getting to be a top-notch js coder. I have to give you a huge Cheers and BRAVO!

Thanks you for sharing with us.

Best Regards,


I'm just a professional Front-end Engineer. XD

You are awesome Alex! I read some of your experience on Creators, and was again blown away. Honored to have you on JenSocial.

Best Regards,




© 2022   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips