Avatar

Features

• Adds an avatar to both, user and member settings
• Includes a module to let frontend members upload a personal avatar
• Avarars can be included anywhere with the {{avatar}} insert tag
• Simple usage and API for other extensions

Manual Installation

• Download the install package from here.
• Unzip the content of TL_ROOT to your TYPOlight base directory on your webserver.
• Unzip the content of TL_FILES to the file upload directory on your webserver.
• Point your browser to http://www.yourdomain.com/contao/install.php
• Enter the installation password and click Login
• Scroll down to Update database tables and click on Update database

Getting started

You need to adjust some settings first. Login to the backend as administrator and scroll down to the avatar settings. :

Select the avatar file directory in the first input. In case you want to use another one than the default avatars directory, you need to move the existing files there manually.

In the user and member settings you will now find a section for the avatar:

Frontend module for avatar upload

The module has no special settings. However you should apply some CSS for the frontend to style it, here is a suggestion for a start:

  /**
   * Avatar frontend module
   */
  .mod_avatar .checkbox_container * { vertical-align:middle; }
  .mod_avatar .label_container { margin-top:10px; }
  .mod_avatar .textlabel { font-weight:bold; }
  .mod_avatar .error_message { color:red; }
  .mod_avatar .hint { color:#888; margin-bottom:10px; }

Using avatars by insert tag

  {{avatar}}

This will insert the avatar of the currently logged in frontend member as HTML IMG tag. For not logged in guest, the tag will not insert anything.

  {{avatar::123}}

Inserts the avatar of the frontend member with ID 123.

  {{avatar::25::be}}

Inserts the avatar of the backend user with ID 25.

API for using avatars in other extensions in Contao 2.x

You will find the avatar image file path (relative to TL_ROOT) in the column avatar of the tables tl_member and tl_user. When this column is empty, the default avatar should be displayed. This simple logic is implemented in the Avatar::filename method, for example:

  if (FE_USER_LOGGED_IN) {
    $this->import('FrontendUser', 'User');
    $avatarFile = Avatar::filename($this->User->avatar);
    // avatarfile will be the filename of the avatar, relative to TL_ROOT
  }

For even more convenience, you may use the method Avatar::img to create a IMG tag:

  if (TL_MODE == 'BE') {
    $this->import('BackendUser', 'User');
    echo Avatar::img($this->User->avatar);
  }

Avatar::img has some optional parameters for more fine control over the IMG tag:

  public static function img(
    $avatar,                // the filename from tl_user.avatar or tl_member.avatar
    $alt = 'Avatar',        // The alt text
    $classes = 'avatar',    // The class(es) to assign
    $attribs = ''           // additional attributes, for example 'title="Your avatar"'
  )