User Avatar In Content Site

retrieving user avatar:

to present the user avatar in the content site we first need its user Id, the user ID will allow us to retrieve the correct user image from the tradesmarter CDN for images.
 

you can read more about getting the user ID in the Content Site Log-in \ Out guide

so in this guide less assume  you already have the user ID.

to present the user avatar you need to create an img tag that will get the tradesmarter CDN as a URL and will end with the user ID.

tradesmarter CDN url for the images is:

"https://s3-eu-west-1.amazonaws.com/tradesmarter-cdn/social/images/"

you can build a function that will insert this src to the image when the pages is loaded.

this is one example of how to do that:

var _id = getCookie('userID'); // (assuming we already have a function that gets the user id...) 

function getSocialImg (_id) {

        var socialImgUrl = 'https://s3-eu-west-1.amazonaws.com/tradesmarter-cdn/social/images/' + _id + '.png'; //adding the id of the user as the name of the image

        var img = new Image(); // creating a new img object

        $(img)

            .load(function(){

                $('#user-avatar').prepend('<img src="' + socialImgUrl + '">'); //adding url to the image containing element, E.G div with an ID of "user-avatar"

            })

            .attr('src',socialImgUrl); // setting the dom img object url here

    }

getSocialImg(_id); // calling our function

you can also set an element with a default image (in case user don't have an avatar)  and catch the img object error event for displaying the default image

     $(img).error(function(){

           // do here the code for displaying the default image

        });

so to conclude:

- user avatar image is based on the user id

- after a log in check explained here... you can also call to another function that will add the avatar image to the page.