Avatar: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K (Frontend module for avatar upload)
K (Using avatars by insert tag)
 
(5 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
[[Category:Extensions]]
 
===Features===
 
===Features===
  
 
* Adds an avatar to both, user and member settings
 
* Adds an avatar to both, user and member settings
 
* Includes a module to let frontend members upload a personal avatar
 
* Includes a module to let frontend members upload a personal avatar
* Avarars can be included anywhere with the {{avatar}} insert tag
+
* Avarars can be included anywhere with the <nowiki>{{avatar}}</nowiki> insert tag
 
* Simple usage and API for other extensions
 
* Simple usage and API for other extensions
  
Zeile 11: Zeile 12:
 
* Unzip the content of TL_ROOT to your TYPOlight base directory on your webserver.
 
* 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.
 
* Unzip the content of TL_FILES to the file upload directory on your webserver.
* Point your browser to http://www.yourdomain.com/typolight/install.php
+
* Point your browser to http://www.yourdomain.com/contao/install.php
 
* Enter the installation password and click Login
 
* Enter the installation password and click Login
 
* Scroll down to Update database tables and click on Update database
 
* Scroll down to Update database tables and click on Update database
Zeile 40: Zeile 41:
  
 
===Using avatars by insert tag===
 
===Using avatars by insert tag===
 
+
<source lang="text">
 
   {{avatar}}
 
   {{avatar}}
 
+
</source>
 
This will insert the avatar of the currently logged in frontend member as HTML IMG tag.
 
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.
 
For not logged in guest, the tag will not insert anything.
 
+
<source lang="text">
 
   {{avatar::123}}
 
   {{avatar::123}}
 
+
</source>
 
Inserts the avatar of the frontend member with ID 123.
 
Inserts the avatar of the frontend member with ID 123.
 
+
<source lang="text">
 
   {{avatar::25::be}}
 
   {{avatar::25::be}}
 
+
</source>
 
Inserts the avatar of the backend user with ID 25.
 
Inserts the avatar of the backend user with ID 25.
 +
{{msgInfo|Contao 3 User: use this extension for backend user avatar: [https://contao.org/de/extension-list/view/avatar_ext.de.html avatar_ext]}}
  
===API for using avatars in other extensions===
+
===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:
 
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:
 
+
<source lang="php">
 
   if (FE_USER_LOGGED_IN) {
 
   if (FE_USER_LOGGED_IN) {
 
     $this->import('FrontendUser', 'User');
 
     $this->import('FrontendUser', 'User');
Zeile 63: Zeile 65:
 
     // avatarfile will be the filename of the avatar, relative to TL_ROOT
 
     // avatarfile will be the filename of the avatar, relative to TL_ROOT
 
   }
 
   }
 
+
</source>
 
For even more convenience, you may use the method Avatar::img to create a IMG tag:
 
For even more convenience, you may use the method Avatar::img to create a IMG tag:
 
+
<source lang="php">
 
   if (TL_MODE == 'BE') {
 
   if (TL_MODE == 'BE') {
 
     $this->import('BackendUser', 'User');
 
     $this->import('BackendUser', 'User');
 
     echo Avatar::img($this->User->avatar);
 
     echo Avatar::img($this->User->avatar);
 
   }
 
   }
 
+
</source>
 
Avatar::img has some optional parameters for more fine control over the IMG tag:
 
Avatar::img has some optional parameters for more fine control over the IMG tag:
 
+
<source lang="php">
 
   public static function img(
 
   public static function img(
 
     $avatar,                // the filename from tl_user.avatar or tl_member.avatar
 
     $avatar,                // the filename from tl_user.avatar or tl_member.avatar
Zeile 79: Zeile 81:
 
     $attribs = ''          // additional attributes, for example 'title="Your avatar"'
 
     $attribs = ''          // additional attributes, for example 'title="Your avatar"'
 
   )
 
   )
 +
</source>

Aktuelle Version vom 3. September 2013, 12:07 Uhr

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.


Contao 3 User: use this extension for backend user avatar: avatar_ext

"Information"


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"'
  )
Ansichten
Meine Werkzeuge

Contao Community Documentation

God: "what is your job?"
me: "i am a software developer ... i develop websites with Contao 3"
God: "sounds cool, what are you working on today? Web sockets? Ajax? HTML5 video streaming?"
me: "no, i am trying to send an email ...."

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge