UserImage

If the user didn't upload a photo, the UserImage will generate a fallback image based on his or her name.

You can initialize a UserImage by assigning data-ts="UserImage" to an img element. A fallback image will be generated based on the users name if the image has no src attribute or if the image somehow failed to load. You also can define initials in parentheses. For example:Karl Alfonso Benson (KB), you will get KB as an initials

Jim Bob Johnson Karl Benson Marshall Garrett Kelvin Castro Natalie Carr Rochelle Cox Mae Schultz Jimmie Edwards Cindy Jordan Karl Alfonso Benson (KB)
<img data-ts="UserImage" src="assets/jim.png" alt="Jim Bob Johnson"/>
<img data-ts="UserImage" alt="Karl Benson"/>
<img data-ts="UserImage" alt="Marshall Garrett"/>
<img data-ts="UserImage" alt="Kelvin Castro"/>
<img data-ts="UserImage" alt="Natalie Carr"/>
<img data-ts="UserImage" alt="Rochelle Cox"/>
<img data-ts="UserImage" alt="Mae Schultz"/>
<img data-ts="UserImage" alt="Jimmie Edwards"/>
<img data-ts="UserImage" alt="Cindy Jordan"/>
<img data-ts="UserImage" alt="Karl Alfonso Benson (KB)"/>

The image defaults to a size of 44x44 pixels. If you prefer a different size, you'll need to specify both width and height as attributes in the HTML.

<img ts-userimage alt="Trip Fontaine" width="88" height="88"/>

You can select users from a menu by adding the classname ts-user-menu to a standard Menu while also replacing the icon (i element) with a UserImage.

    •  
    <menu data-ts="Menu" class="ts-user-menu">
	<li class="ts-checked">
		<button>
			<img data-ts="UserImage" src="assets/jim.png" alt="Jim Bob Johnson"/>
			<span>Jim Bob Johnson</span>
			<sub>jimbob@company.com</sub>
			<i class="ts-icon-checked"></i>
		</button>
	</li>
	<li>
		<button>
			<img data-ts="UserImage" alt="Karl Benson"/>
			<span>Karl Benson</span>
			<sub>karl@company.com</sub>
		</button>
	</li>
	<li>
		<button>
			<img data-ts="UserImage" alt="Marshall Garrett"/>
			<span>Marshall Garrett</span>
			<sub>marshall@company.com</sub>
		</button>
	</li>
</menu>

    JSON API

    In case you need to work with the JSON model of an UserImage directly, this is all you need to know: