We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

How to offer your members avatars without a plugin | Forum

dave Leader
dave Feb 16 '14
We all know there are some good plugins out there, and there is even a plugin that allows your member to create avatars male or female and thats fine.  But as of this writing i know of no plugin which allows the selection from a custom avatar gallery during registration or as a member.  


Also lets say you are on a budget and you want to get started right away and you need to provide some avatars to your users.  Well here is how you do it. 


Challenge:  Provide convenient option for avatars during the registration process as well as members access while on a budget and without having to purchase a plugin. 


So lets get started....


1.CREATE AVATARS: Make a bunch of jpg avatars - this is the hardest and most painstaking part... Use photoshop, paint or other photo editor and create you a bunch of avatars that are 190x190, and a duplicate set that are 100x100, no larger no smaller.   


Save them as jpg  (lowercase)  i prefer jpg for several reasons which i wont get into here.   If your original image is NOT jpg and you have to use paint (and not a professional image editor) then save is as same meaning png as png and so forth.  If you dont you will lose image quality.


If you have an image you want to use that is less than 190x190 either height or width, then:

a. cut the image

b. make a box 190x190

c. fill in with black (or the color you want)

d. and then paste the image and center it inside the box.

e. dont forget to also make your 100x100 version as well. 


Example: 


Original jpg image       New jpg Avatar  190x190                   100x100 version


                        



File naming:   

    a. I would suggest you name them avatar_1.jpg  2 3 4 5  and so on... 


    b. Name your 100x100 versions something like smallavatar_1.jpg 2 3 4 5 6 ..... and so on



Once you get 10 or 15 made (which can be fun) then your ready to start building the user interface. 


2. Create A Folder:  First create folder to store the avatar images in.  Just create it in your site root and i called mine myavatars.  The folder can be 755 permission that is just fine.


   a. Right now before you forget add that folder to your htaccess list so that oxwall will not give you a 500 server error for a folder it does not recognize.


   b.  Now upload all of your 190x190 and 100x100 images to this folder.


   c.  Check to be sure you can access the images from inside the site, if you get a 500 then you did not add the folder correctly to htaccess.


3. Build Avatar Page: Now we need to build a page for the user to visit when they want to see all your wonderful avatars on display. 


    a. Go to admin pages and create new page, make sure you drag it to the hidden page section.  This will help assure that only access through the link you provide is done.  Its not fullproof but its helpful. 


    b.  Be sure you check both guest and members for visibility and also DO NOT use an external page when you set it up.  


    c.  When it comes to the page content if you are familiar with html and a little javascript then it should be easy for you.  


         c1.  The premise here is that you display the smaller 100x100 images to the user, this is done in a new tab (window) because you do not want to interfere with their registration or their profile edit process. 


          c2. When they click on the image then you open a small window with the downloadable image inside it at the proper size 190x190 


          c3. Then they (right-click/save as) that image and it downloads to their computer. 


          c4.  Then they simply close your avatar tab (window) and they are right back on their registration or edit profile page and they can just select and upload the image as their avatar. 


           c5.  So with that said the first thing you have to do in the page content is put some text on the top explaining the page but that is up to you. What we really need to do is to build a little table to display the images. 


Here is the very basic layout of the table (my page is alittle fancier but this will give the idea of the layout)  again this part can be tedious and take a while when listing the images but its worth it.. 


code follows:  The table will hve 4 cells per row, so 4 images per row.


<blockquote>

<h3 style="color:#c3b00d;">Directions:</h3>

1. Click on the small image on this page to open a larger version of that image.<br />

2. Right click on the larger image and select "Save Picture as" to save the image to your computer. <br /><br />

3. <span style="color:#c6ae3d;">If you are just registering for the site</span> then when you are done downloading an avatar just close this page(tab). You will be able to complete your registration on the original window by uploading the avatar you just saved. <br /><br />


  3a. <span style="color:#c6ae3d;">Otherwise if you are a member</span> and logged in, you can also just close the avatar display page and upload the image you just saved as your profile avatar. 

</blockquote>

<br /><br />


<table width="90%" border="0" cellspacing="0" cellpadding="10">

<tr align="center">


<td align="center"><a href="javascript:void(0):" onclick="popitpic('/myavatars/avatar_1.jpg'); return false;"><img src="/myavatars/smallavatar_1.jpg"  border="0" alt="" /></a></td>


<td align="center"><a href="javascript:void(0):" onclick="popitpic('/myavatars/avatar_2.jpg'); return false;"><img src="/myavatars/smallavatar_2.jpg"  border="0" alt="" /></a></td>


<td align="center"><a href="javascript:void(0):" onclick="popitpic('/myavatars/avatar_3.jpg'); return false;"><img src="/myavatars/smallavatar_3.jpg"  border="0" alt="" /></a></td>


<td align="center"><a href="javascript:void(0):" onclick="popitpic('/myavatars/avatar_4.jpg'); return false;"><img src="/myavatars/smallavatar_4.jpg"  border="0" alt="" /></a></td>


</tr>


to explain the above code for those that dont know, what your doing is displaying the small image and then when they click it opens the larger one via a js window open routine when i will share that with you also. 


The above was one row, you need to repeat that 

<tr> row

<td>cell</td>

<td>cell</td>

<td>cell</td>

<td>cell</td>

</tr>


over and over for ever row of images that you have.... 


when you are done then just close the table like so:  

</table>


     Now save your page... 


4.  Now for the javascript:   I created a file in my root and you may call it whatever you like just as long as it has the .js extention on it.    So for this example we will call it avatarpop.js 


Be sure you also add this file name to your htaccess to prevent a 500 server error


The purpose of this file is to display the larger images in a popup box so it looks more professional and clean.  (if people block the popup thats not my problem sorry, just tell them not do) 


inside this file i have this js code: 




/* this is the function that is used for the avatar larger images to be shown in a popup window.  */


function popitpic(url) 

{

    picwin=window.open( url, 'popwin','location=0,status=0,scrollbars=1,directories=0,resizable=0,height=250,width=250');


    if ( window.addEventListner )

    {

     picwin.addEventListener( "load", picwinload, false );

      }else{

            picwin.attachEvent( "onload", picwinload );

           }


    function picwinload( )

    {

        picwin.moveTo(0,0);

        picwin.document.body.bgColor="#100206";

    }


}//close function

               


The way that is set up is that it will listen for the popup window, if the popup window is open it wont open it again. Also the popup window will open in the left corner of the page.  Also the background will be set for the popup window. 


5. Assigning the new JS file to oxwall header:  Now that you have your js file, now you need to tell oxwall where it is so when someone clicks the image it knows where to find the function.  


    5a.  open up admin settings, main settings, page settings. 

           Now inside of custom head code put this code.. 


<script type="text/javascript" src="http://www.yoursite.com/avatarpop.js"></script>


              replace yoursite.com with your domain info.. 


               save the changes. 


Now you should be able to open up your new page (just type in the direct url in your browser) and then click the image and you should be able to see the larger avatar and then right click save as and save the image to your computer. 


6.  Now to include this in the registration process:  Since an image is required to register then all we need to do is add a link option to that part of the registration to show them the avatar page. 


      open up admin languages and search for User Photo (i believe is the default) or whatever you have as your default next to the checkbox on the registration form right here... 


should be this lang key   text key='base+questions_section_user_photo_label'}


and then just change the key language to read as follows. 


Remember to change avatargallery to whatever you named your page to.


User photo - or choose from <a href="{$site_url}avatargallery" target="_blank">Avatar Gallery</a>



so now it should look like this in registration.. 




7. Now to include this in the edit avatar process: When they click on the change avatar link in the top right corner of their current avatar (profile page) then it will take you to a upload avatar page. This is what we need to add some text to.   So again we just have to tweak some language text and we are good to go. 


     7a. Open up your admin language section and i believe the default is something like this "Avatar is a graphic"  should be key {text key='base+avatar_avatar_is'}


      7b.  Just change the text to this:


           Avatar is a graphic picture/photo of a reduced size displayed for your profile.  You can save one from our <a href="{$site_url}avatargallery" target="_blank">Avatar Gallery</a> to your computer and upload it or you can upload one you already have that you like.



And thats it folks, now both the registration and avatar edit process your avatar will open in a new page and will not interfere with there process, they just simply click on the avatar they want, then right click save as (in the popup), then close the avatar page, and upload their new image.. 


Presto bango.... :)  


Enjoy.. 

The Forum post is edited by dave Feb 16 '14
tammy harris
tammy harris Mar 3 '14
now that a cool mod dave 

but i am wondering if theres a way to put a handler on the join select avatar button that give a popup with 2 options  select from your computer or select a avatar that takes you to the avatar page you made and on clicking the selected image it loads that on the join form and is uploaded and handled by the script from there
dave Leader
dave Mar 3 '14

Thanks Tammy :),


On the first part of your question if they want to upload something from computer then they would not even click the avatar gallery link at all, just go with normal process, and if they go to the gallery link and change thier mind then they just need to close that window and continue the process. 


Maybe i should have made this a plugin, but i never got around to it.


The Forum post is edited by dave Jul 21 '19
Marcus
Marcus Jul 21 '19
Omg this is amazing thanks so much
dave Leader
dave Jul 21 '19
your welcome :)