Avatar

The avatar component allows you to display a rounded picture at the usual avatar size. This size is of course customizable. This component can be useful for displaying pictures of logged-in users, a contacts list, directory of employees etc. The avatar component can either display a single image or a horizontal stack of images. Images are displayed as inline-block elements. A default image is used when the image attribute is either blank or not specified.

Single Avatar

                
                    <x-bladewind.avatar image="/path/to/the/image/file" />

The avatar component expects a value for its image attribute. A default image is however, used if the attribute is either blank or not specified.

Different Sizes

You can specify a size for the avatar. See the full list of attributes for the available sizes. The default size is regular

                
                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    size="tiny" />

                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    size="small" />

                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    size="medium" />

                 // this is the default
                 <x-bladewind.avatar
                    image="/path/to/the/image/file" />

                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    size="big" />

                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    size="huge" />

                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    size="omg" />

Stacked Avatars

Stacked avatars have an overlapping effect. The component will not restrict you from stacking avatars of different sizes but, for a more appealing visual effect, stacking images of the same size is advised. You can achieve stackability by setting the stacked="true" attribute on each avatar that you want as part of the stack.

                
                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    stacked="true" />

                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    stacked="true" />

                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    stacked="true" />

                <x-bladewind.avatar
                    image="/path/to/the/image/file"
                    stacked="true" />

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Avatar component.

IMPORTANT: Projects running Laravel 8 please read this

Option	Default	Available Values
image	public/vendor/bladewind/images/avatar.png	The url to the image file. By default a generic headshot image is used if no url is passed.
alt	image	The text to display as the value for the image's alt attribute.
size	regular	Defines the size of the avatar. `tiny` `small` `mediumregular` `bighuge` `omg`
stacked	false	Defines if the avatar images are displayed as a stack. Value needs to be set as a string not boolean. `true` `false`
class	mr-2 mt-2	Any additonal css classes can be added using this attribute.

Avatar with all attributes defined

                
                    <x-bladewind.avatar
                        image="/path/to/the/image/file"
                        alt="company logo"
                        size="big"
                        stacked="true"
                        class="ring-blue-200 ring-offset-2" />

The source file for this component is available in resources > views > components > bladewind > avatar.blade.php. The default image displayed when no image is passed is public > vendor > bladewind > images > avatar.png