freoカスタマイズ集

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

※Gravatarの登録方法については Gravatarの使い方、WordPressプロフィール画像の作り方 を参照して下さい。

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

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

で表示することが可能です（xxxxの部分は状況によって変わります）。

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

1. templates/internals/profile/default.html の3行目にある

   <h3>ユーザー {$user.id} のプロフィール</h3>

   の下に、

   <p><img src="https://www.gravatar.com/avatar/{$user.mail|md5}?d=mm&size=50" alt="{$user.id}のアバター"></p>

   を追加します。（2023.9.5追加部分を変更しました）
   
   のようにアバターが表示されます。
   
   Gravatarに登録していないユーザーではデフォルトで
   
   が表示されます。
2. templates/internals/regist/default.html、templates/internals/user/profile_form.html、templates/internals/admin/user_form.html、templates/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}?d=mm&size=50" alt="{$refer_user.name}のアバター" title="{$refer_user.name}"></a></li>
       <!--{/if}-->
       <!--{/foreach}-->
     </ul>
   </div>

   に変更（緑字を削除して赤字を追加）します（2023.9.5追加部分を変更しました）。
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;
   }

   を追加します（この設定はデフォルトのテンプレートの場合です）。
   
   のようにアバターがブロック表示されます。

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

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}?d=mm&amp;size=50" alt="アバター">
     {$comment.text|nl2p|autolink}
   </div>

   に変更（赤字を追加）します（2023.9.5追加部分を変更しました）。
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;
   }

   を追加します（この設定はデフォルトのテンプレートの場合です）。
   
   これでコメント欄は
   
   になります。