>フリーウェアfreo> freoのコメント欄にアイコン画像をつける

エントリー

freoのコメント欄にアイコン画像をつける

05/15 : 動作確認用のサンプルファイルを追加しました。

freoのプロフィールやコメントでGravatarのアバターを表示する方法
http://cccabinet.jpn.org/customize.cgi?no=72
こちらの少し改変版になります。

このブログのコメント欄を適当に見てくれればわかると思います。
注)2013/11月現在、外部サイトからキャッシュを生成してる関係で、
ブログ上のアイコンがランダム表示されません。
正確にはキャッシュを作成する最初の1アクセス目でランダムで決定され、
それ以降はキャッシュが消されるまで1アクセス目の状態で固定されちゃいます。
キャッシュ機能を使ってないブログの場合はアクセスのたびにランダムでアイコンが変わります。

管理者1人のみで運用している場合、
外部サービス(Gravatar)を利用しなくても表示させられたほうが便利じゃない?
自分以外の投稿は全て人影アイコンになってさみしいし。
という考えで少し変更を加えたものになります。

管理者は管理者専用アイコンで固定。
ランダムにもできますけど固定しないと管理者とわかりにくくなる。
ゲストはいくつかのゲスト用アイコンの中からランダム表示。
となります。

まずはアイコンを用意してください。
サンプル用のファイル一式を用意しました。
手っ取り早く確認してみたいという人は、
そのままアップロードすれば終わりです。
下の画像をクリック。

以下は設定内容の説明になります。

管理者用アイコンが1枚
管理者以外の未登録ユーザー(ゲスト)が4枚
画像はJPG形式です。
画像のピクセルサイズは統一しておいてください。

管理者用のアイコンのファイル名
webmaster.jpg

ゲスト用アイコン
gest1.jpg
gest2.jpg
gest3.jpg
gest4.jpg

とします。

templatesフォルダ内にiconフォルダを作成。

freo_1_18_0
  ├─configs
  ├─css
  ├─database
  ├─files
  ├─images
  ├─js
  ├─libs
  ├─mails
  ├─templates
  │   ├─icon
  │   ├─internals
  │   ├─mobiles
  │   └─plugins
  ├──templates_c
  └──tiny_mce

このiconフォルダにアイコン画像と、.htaccessを入れてください。
.htaccessの内容は以下

<Files  ~ "\.(jpg|png|gif)$">
allow from all
</Files>

Deny from all

内容は拡張子jpg,png,gifのアクセスを許可し、
それ以外はすべて拒否という内容です。
Deny from all の下には改行が必要です。
templatesフォルダ内はアクセスが拒否されているため、
iconフォルダ内のみhtaccessでアクセスを許可する必要があります。

今回使うのはjpgなのでpngとgifは必要ないですけど、
このほうが何かと使いやすいでしょう。

cssにコードを追加してください。
上記のリンクに記載されています。

templates/internals/view/default.htmlの
{$comment.text|nl2p|autolink}の箇所を以下に変更してください。

<div class="comment_view">
<!--{if $comment.user_id}--><img src="{$freo.core.http_url}{$smarty.const.FREO_TEMPLATE_DIR}icon/webmaster.jpg" width="120" height="120" alt="管理者アバター"><!--{else}--><img src="{$freo.core.http_url}{$smarty.const.FREO_TEMPLATE_DIR}icon/guest{1|rand:4}.jpg" width="120" height="120" alt="ゲストアバター"><!--{/if}-->
{$comment.text|nl2p|autolink}
</div>

「 width="120" height="120" 」の部分は作成したアイコン画像のピクセルサイズに合わせてください。

iconフォルダ、アイコン画像、cssとdefault.htmlをアップロードしたら確認。
動作してれば完成。

ゲストアイコンは追加できます。
gest5.jpg,gest6.jpgと数字は連番で作成してください。
数を増やしたら、上記default.htmlの内容を書き換えます。

guest{1|rand:4}.jpg
rand:4となっていますがgest6.jpgまで作ったらrand:6にしてください。

コメント欄へアクセスがあるたびに、
guest1.jpgからguest6.jpgの中からランダムで表示されます。

管理者にはランダム表示はつけていないため、
webmaster.jpgが常に表示されます。

ページ移動

コメント

コメント欄への投稿方法や内容につきましては、
記事へのコメント投稿についてを参考にしてみてください

コメント欄の投稿は公開されます。
非公開を希望する内容につきましては、みさきる!管理者へ連絡をお使いください。

comments powered by Disqus

コメント

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

コメント登録

登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限

ユーティリティ

スポンサードリンク

検索

カテゴリー

新着記事

    新着コメント

    スポンサードリンク

    つぶやき

    スポンサードリンク