ユーティリティ

2019年12月

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

ブログパーツ

Twitter

Twilogを見る

Feed

エントリー

freoのプロフィールやコメントでGravatarのアバターを表示する方法

freoのユーザープロフィールやコメント欄にユーザーの画像を設置したいと思っている方に向けてWordpressでも利用されている Gravatar のアバターを表示させる方法です。
これでGravatarの登録にしたメールアドレスでユーザー登録もしくはコメント投稿すればアバターが表示されます。

※Gravatarの登録方法については グローバルなアバターGravatarに登録してみよう を参照して下さい。

※freoではGravatarのアバター画像は

<img src="https://www.gravatar.com/avatar/{$xxxx.mail|md5}" alt="アバター">

で表示することが可能です(xxxxの部分は状況によって変わります)。
その他のオプション等については Gravatarをウェブサービスに導入しよう を参照して下さい。

プロフィール欄にアバターを表示させる

  1. templates/internals/profile/default.html の3行目にある
    <h3>ユーザー {$user.id} のプロフィール</h3>

    の下に、

    <p><img src="https://www.gravatar.com/avatar/{$user.mail|md5}&amp;default=https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm" alt="{$user.id}のアバター"></p>
    を追加します。
    ファイル 72-1.jpg
    のようにアバターが表示されます。

    Gravatarに登録していないユーザーではデフォルトで

    が表示されます。
  2. templates/internals/regist/default.htmltemplates/internals/user/profile_form.htmltemplates/internals/admin/user_form.htmltemplates/internals/admin/profile_form.html のユーザー登録フォームにある
    <dt>メールアドレス <abbr class="attention" title="入力必須">*</abbr></dt>

    の部分を、

    <dt>メールアドレス <abbr class="attention" title="入力必須">*</abbr>(<a href="https://ja.gravatar.com/" target=_blank>Gravatar</a>に登録しているアドレスを入力するとアバターが表示されます)</dt>
    に変更(赤字を追加)します。

サイドバーのユーザー欄にアバターを表示させる

  1. templates/utility.html の95~103行目辺りにある
    <h3>ユーザー</h3>
    <div class="content">
      <ul>
        <!--{foreach from=$freo.refer.users|smarty:nodefaults item='refer_user'}-->
        <!--{if $refer_user.authority == 'root' or $refer_user.authority == 'author'}-->
        <li><a href="{$freo.core.http_file}/profile/{$refer_user.id}">{$refer_user.name}</a></li>
        <!--{/if}-->
        <!--{/foreach}-->
      </ul>
    </div>

    の部分を、

    <h3>ユーザー</h3>
    <div class="content">
      <ul class="user">
        <!--{foreach from=$freo.refer.users|smarty:nodefaults item='refer_user'}-->
        <!--{if $refer_user.authority == 'root' or $refer_user.authority == 'author'}-->
        <li><a href="{$freo.core.http_file}/profile/{$refer_user.id}"><img src="https://www.gravatar.com/avatar/{$refer_user.mail|md5}&amp;default=https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&amp;size=50" alt="{$refer_user.name}のアバター" title="{$refer_user.name}"></a></li>
        <!--{/if}-->
        <!--{/foreach}-->
      </ul>
    </div>
    に変更(緑字を削除して赤字を追加)します。
  2. css/default.css の309行目あたり(ユーティリティの最後)に
    div#utility div.utility ul.user {
      margin: 0;
      padding: 0;
    }
    div#utility div.utility ul.user li {
      list-style: none;
      display: inline;
      margin-bottom: 5px;
    }
    を追加します(この設定はデフォルトのテンプレートの場合です)。
    ファイル 72-2.jpg
    のようにアバターがブロック表示されます。

コメント欄にアバターを表示させる

  1. templates/internals/view/default.html または templates/internals/page/default.html
    {$comment.text|nl2p|autolink}

    の部分を、

    <div class="comment_view">
      <img src="https://www.gravatar.com/avatar/{if $comment.user_id}{$freo.refer.users[$comment.user_id].mail|md5}{else}{$comment.mail|md5}{/if}&amp;default=https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&amp;size=50" alt="アバター">
      {$comment.text|nl2p|autolink}
    </div>
    に変更(赤字を追加)します。
  2. さらに templates/internals/view/default.html または templates/internals/page/default.html のコメント登録フォームにある
    <dt>メールアドレス</dt>

    の部分を、

    <dt>メールアドレス(<a href="https://ja.gravatar.com/" target=_blank>Gravatar</a>に登録しているアドレスを入力するとアバターが表示されます)</dt>
    に変更(赤字を追加)します。
  3. css/default.css の195行目あたり(コメントの最後)に
    div#comment div.comment_view {
      overflow: hidden;
      height: auto;
    }
    div#comment div.comment_view img {
      float: left;
      margin-right: 10px;
    }
    div#comment div.comment_view p {
      margin-top: 0;
      overflow: hidden;
      height: auto;
    }
    を追加します(この設定はデフォルトのテンプレートの場合です)。

    これでコメント欄は
    ファイル 72-3.jpg
    になります。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)