web-dev-qa-db-ja.com

ユーザーメニューのユーザーの写真と名前

Acquiaが https://dev.Twitter.com/ で行ったことを達成したいと思います。サインインすると、メニューバーの右端にユーザーの画像とユーザー名が表示されます。これが必要です。

私はまだいくつかの基本的な試みをしました：

最初に、メニュートークンモジュールを使用しようとしました。タイトルにユーザーの写真とユーザー名のトークンを入れようとしました。それから、check_plain（）を通過するときにメニュー項目のタイトルにhtmlを入れることができないことに気付きました（そして、それはそのように良いです）。これに関する他の問題は、メニュー項目が匿名ユーザーにも表示され、ユーザー名が「匿名」であるということでした。

私はオメガのテーマを使用しています。

全体的な問題のひねりは、Superfishモジュール（Twitterサイトのドロップダウン）も使用したいことであり、メニュー項目を作成/レンダリングするための独自のテーマ機能があります。

可能な解決策を考えることができます。それは、カスタムテーマ関数とメニューリンクの変更であり、タイトルのほかに画像を追加します。ただし、Superfishモジュールは「未加工」リンクに追加された画像を処理しません。私が間違っていたら訂正してください...

routesuserstokensnavigation
4
Temaruk

これを行う1つの方法は、_template.php_ファイルのtheme_menu_link()をオーバーライドすることです。具体的には、「マイアカウント」リンクを探して、テキストをユーザー名に変更し、画像を追加します。

Omegaサブテーマの_template.php_に以下を追加します。

_function OMEGASUBTHEME_menu_link(array $variables) {
  global $user;
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $title = '';
  // Check if the user is logged in, that you are in the correct menu,
  // and that you have the right menu item
  if ($user->uid != 0 && $element['#theme'] == 'menu_link__user_menu' && $element['#title'] == t('My account')) {
    $element['#title'] = $user->name;
    // Add 'html' = TRUE to the link options
    $element['#localized_options']['html'] = TRUE;
    // Load the user picture file information; Unnecessary if you use theme_user_picture()
    $fid = $user->picture;
    $file = file_load($fid);
    // I found it necessary to use theme_image_style() instead of theme_user_picture()
    // because I didn't want any extra html, just the image.
    $title = theme('image_style', array('style_name' => 'thumbnail', 'path' => $file->uri, 'alt' => $element['#title'], 'title' => $element['#title'])) . $element['#title'];
  } else {
    $title = $element['#title'];
  }
  $output = l($title, $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
_

これにより、問題のメニュー項目に対して次のHTMLが生成されます（私のサムネイルイメージスタイルは28 x 28に拡大縮小してトリミングするように設定されています）。

_<li class="first last expanded"><a href="/user" title=""><img typeof="foaf:Image" src="path/to/image" width="28" height="28" alt="username" title="username">username</a></li>
_

残りは単なるCSSであり、おそらくJavaScriptです。

4
Sean Adams-Hiett

私もこの問題に遭遇し、メニュートークンと組み合わせて Menu HTML モジュールを使用しました。この非常に単純なモジュールは、メニュー項目の編集フォームにチェックボックスを追加し、管理者がメニュー項目のタイトルにHTMLを追加できるようにします。このようにして[current-user:picture][current-user:name]とユーザーの写真（アバター）が表示されます。

4
Nigel Waters

D7の場合Bootstrap「マイアカウント」メニューの親メニュー項目としてプロフィール写真とユーザー名を使用したい3人のユーザー。

bootstrapメニューインクルードファイルmenu-link.func.phpからの数行とともに、上記の2つのコードサンプルから以下をハッキングしました。

私はそれが完璧ではないと確信していますが、私のインストールでは機能しています。私はtemplate.phpの代わりに（テーマのオーバーライド機能が組み込まれた）モジュールを使用しています。私のimagestyle "avatar40"はあなた自身のimagestyle名で置き換えられるべきであることに注意してください。

function MYMODULE_menu_link(array $variables) { // overrides the default "my account" link with avatar and name
  global $user;
  $element = $variables['element'];
  $sub_menu = '';
  $caret_text = '';

  if ($element['#below']) {
    unset($element['#below']['#theme_wrappers']); // remove default html menu wrappers
    $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>'; // add wrapper <ul> tag with bootstrap class
    $caret_text = ' <span class="caret"></span>'; // only show caret if submenu exists
  }
  $title = '';
  // Check if the user is logged in, that you are in the correct menu,
  // and that you have the right menu item
  if ($user->uid != 0 && $element['#theme'] == 'menu_link__user_menu' && $element['#title'] == t('My account')) {
    $element['#title'] = $user->name;
    // prepare bootstrap attributes for wrapper <li>, and then the <a> tag it contains
    $element['#attributes']['class'][] = 'dropdown';
    $element['#attributes']['class'][] = 'user-picture';
    $element['#localized_options']['html'] = TRUE;
    $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
    $element['#localized_options']['attributes']['data-target'] = '#';
    $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
    // manually prepare picture, <a> tag with image reference, username (theme_user_picture won't work due to nested <a> tag)
    if (!empty($user->picture)) {
      $fid = $user->picture; 
      $file = file_load($fid);
      $title = theme('image_style', array('style_name' => 'avatar40', 'path' => $file->uri, 'alt' => $element['#title'], 'title' => $element['#title'])) . $element['#title'] . $caret_text;
    }
    else {
      $title = $element['#title'] . $caret_text;
    }
  } 
  else {
    $title = $element['#title'];
  }
  $output = l($title, $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
2
Dizzle McShizzle

メニューHTML +メニュートークンを使用すると、メニューアイテムの可視性が損なわれます。上記のコードは、ユーザーが画像を設定しなかった場合を除いて機能します。そのために私はします：

// Check if the user is logged in, that you are in the correct menu,
// and that you have the right menu item
if ($user->uid != 0 && $element['#title'] == t('User Menu')) {
  $element['#title'] = $user->name;
  // Add 'html' = TRUE to the link options
  $element['#localized_options']['html'] = TRUE;
  //isset($user->picture) always returns true, don't know why. had to use !empty
  if (!empty($user->picture)) {
     $url = file_load($user->picture)->uri;
  }
  else if (variable_get('user_picture_default', ''))
  {
     $url = variable_get('user_picture_default','');
  }
  else
  {
     $url = "public://avatars/anon.png";
  }
  $title = $element['#title'] . theme('image', array('path' => $url, 'width' => '30px', 'height' => '30px'));
} else {
  $title = $element['#title'];
}

$output = l($title, $element['#href'], $element['#localized_options']);
1
ardarvin