Movable Type 備忘録

 CommentUserPic プラグイン

こんばんわ^^

今日は( 昨日の夜も )寒いですね。とても夏とは思えないくらいの寒さです （；￣－￣）

さて、先日訪問者さんのプロフィール編集を可能にするでご紹介した、ユーザ登録してくれた訪問者さんのプロフィール画像を編集可能にするテンプレット作成ですが、以下の理由からやめました。

  1. コミュニティ・パックが同梱された Movable Type Pro でしか適用できないから。
  2. 元々コミュニティ・フォーラム／ブログ用のものを無理やり使えるようにしてるので、スマートじゃないから。

で、どのバージョンの Movable Type でも使えるようにするには･･･というのを今週ずっといろいろ考えてたのですが、結局プラグインに頼るしかないことに行き着きました。
プラグイン使用するなら、以前からUser Profiles プラグインというのがありました。 でも、こちらは独自のフォームを作成するタイプのもので、できればデフォルトのテンプレート( ログイン画面などのテンプレート )で使用したかったのでせっせと作ることにしたのですが、トラックバックいただいたWeeeblog.net::okayama websiteさんとこで CommentUserPic プラグインというものが作られてたので使わせてもらうことにしました。
だって、なかなか上手く作れなかったんだもん (;￣∇￣A 相変わらずコールバックがよく分からない bzbell です（つω-`｡）とほほ

使い方

使い方はカンタンです。

  1. プラグインのアップロード

    上記ページから CommentUserPic プラグインの圧縮ファイルをダウンロードしていただいて、CommentUserPic/ フォルダをそのまま mt/plugins/ フォルダにアップロードします。

  2. コメント欄の修正

    次にプロフィール画像を表示できるようにコメント欄の修正を行います。

    わたしのとこのテンプレートをお使いの人は既に組み込まれてますのでここでの作業を不要です。

    プロフィール画像は、先日コメント欄にアバター表示でご紹介したように、MTCommenterUserpicURL ファンクションタグで表示することができます。
    Movable Type のデフォルトテンプレートだと、「コメント」テンプレートモジュールを以下のように修正します。

    「コメント」テンプレートモジュールの修正

    1. <mt:SetVar name="userpic_size" value="50">
    2. <mt:Comments>
    3.     <mt:CommentsHeader>
    4. <h2 class="comments-header"><$mt:EntryCommentCount singular="<__trans phrase="1 Comment">" plural="<__trans phrase="# Comments">" none="<__trans phrase="No Comments">"$></h2>
    5. <div class="comments-content">
    6.     </mt:CommentsHeader>
    7.     <div id="comment-<$mt:CommentID$>" class="comment<mt:IfCommentParent> comment-reply</mt:IfCommentParent>">
    8.         <div class="inner">
    9.             <div class="comment-header">
    10.                 <div class="asset-meta">
    11.                     <span class="byline">
    12.                         <$mt:CommentAuthorIdentity$>
    13.     <mt:IfCommentParent>
    14.                         <__trans phrase="[_1] replied to <a href="[_2]">comment from [_3]</a>" params="<span class="vcard author"><$mt:CommentAuthorLink$></span>%%<mt:CommentParent><$mt:CommentLink$></mt:CommentParent>%%<mt:CommentParent><$mt:CommentAuthor$></mt:CommentParent>">
    15.     <mt:Else>
    16.                         <span class="vcard author"><$mt:CommentAuthorLink$></span>
    17.     </mt:IfCommentParent>
    18.                         | <a href="<$mt:CommentLink$>"><abbr class="published" title="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></abbr></a>
    19.     <mt:IfCommentsAccepted>
    20.                         | <$mt:CommentReplyToLink$>
    21.     </mt:IfCommentsAccepted>
    22.                     </span>
    23.                 </div>
    24.             </div>
    25.             <div class="comment-content">
    26.                 <div class="user-pic"><img src="<mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$><mt:Else><$mt:StaticWebPath$>images/default-userpic-90.jpg</mt:If>" width="<$mt:Var name="userpic_size"$>" height="<$mt:Var name="userpic_size"$>" alt="user-pic" /></div>
    27.                 <$mt:CommentBody$>
    28.             </div>
    29.         </div>
    30.     </div>
    31.     <mt:CommentsFooter>
    32. </div>
    33.     </mt:CommentsFooter>
    34. </mt:Comments>

    11 行目辺りに青字の部分を追加します。これはプロフィール画像サイズを指定してますので、お好みでサイズを変更してください。上記例では縦横 50px となってます。
    35 行目辺りに赤字の部分を追加します。これはプロフィール画像が登録されたユーザさんの場合にはその画像を使用して、未登録の場合には mt/mt-static/images/default-userpic-90.jpg を使用するようにしてます。

  3. プログ記事アーカイブの再構築

    一通り修正したら保存して、ブログ記事アーカイブのみ再構築してください。

  4. 表示確認

    再構築が終わったら、ブログ記事ページにデフォルトの画像( mt/mt-static/images/default-userpic-90.jpg )が表示されてることを確認します。
    次にサインインすると、「●●●としてサインインしています。(サインアウト)」と表示されますので、●●●のとこのリンクをクリックしてユーザプロフィールの編集画面が表示されることを確認します。

    そこからプロフィール画像を登録して適当にコメント投稿してみてください。
    正しく表示できれば OK です。

以上です。
プロフィール画像は <div class="user-pic"><img … /></div> というようにマークアップされますので、CSS 使ってお好みでデザインしちゃってください。
でも、できれば Movable Type のデフォルトでプロフィール画像登録を可能にして欲しいですね。

 Trackback Pings(1)

from 岡野@神戸

サインイン登録された方が自分のプロフィール画像をアップロードしたり別の画像に変更...

Tracked on August 24, 2008

 Comments(4)

#1: Posted by Author Profile Page oscar @ October 26, 2008 [REPLY]
user-pic

こんにちは。
この数日Javascriptでコメント周りの確認しています。
Javascriptのソース見てて、気になる部分があります。

＞次にサインインすると、「●●●としてサインインしています。(サインアウト)」と表示されますので、
＞●●●のとこのリンクをクリックしてユーザプロフィールの編集画面が表示されることを確認します。

この部分をソースでみると、「if ( u.is_author )」の時だけ、処理されると「__mode=edit_profile」へと処理が移るようで、つまりエントリー書いた私達以外は、すべて外部のプロファイル表示を行うだけじゃないですか？
u.is_authorの判別無効にして、常に「__mode=edit_profile」が表示されるようにしないと、動作しないんじゃないでしょうか？

 
#2: Posted by Author Profile Page bzbellからoscarへの返信 @ October 26, 2008 [REPLY]
user-pic

>>1 oscar さん

こんばんわ^^

> ･･･つまりエントリー書いた私達以外は、すべて外部のプロファイル表示を行うだけじゃないですか？

えと、oscar さんが言われてるのは、たとえば TypeKey や mixi などの外部認証でサインインした場合でも、プロフィール編集画面で編集できないとまずくね!? ということですよねあせあせ!? 違ってたらすいませんテレテレ
仮に上記のことを言われてる場合、外部認証サービスのプロフィールを、MT のプロフィール編集画面から編集／保存可能なんですか!?
あちゃぁキャハハわたし知りませんでした。
基本的に MT にユーザ登録して頂いた人向けに、アバター変更やメアド変更などの為のプロフィール編集だと思ってたので、外部認証サービスによるサインインの場合には、ぶっちゃけプロフィール編集は不要かと思ってましたあせあせ

 
#3: Posted by Author Profile Page oscarからbzbellへの返信 @ October 26, 2008 [REPLY]
user-pic

>>2 bzbell さん

＞TypeKey や mixi などの外部認証でサインインした場合でも、プロフィール編集画面で編集できないとまずくね!?
そうですよ。確認してみたところ、ちゃんと外部認証サービスのプロフィールからインポートした情報を、MT側で表示修正可能なようです。
外部サービスでも、認証状態で __mode=edit_profile 呼び出すと、そのプロフィールが表示されます。
これ、いじれちゃまずだろ！って部分もありますが、mixi認証に写真つけるとか出来るようになります。
試しに自分のサイト改造してみました。

 
#4: Posted by Author Profile Page bzbellからoscarへの返信 @ October 26, 2008 [REPLY]
user-pic

>>3 oscar さん

ホントだっキャハハ
知らなかったわぁ!!

今 oscar さんとこでサインインして TypeKey と VOX で認証させてみました。
ちゃんと各データが表示されますね。プロフィール画像は認証によっては表示／変更できないみたいですね。
でも、すっごぉ~いパチパチ
いいこと教わりました。ありがとございますやあ！

 

 Post a Comment

 

コメント用フィード