6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Redmineにアバターを表示する(view customizeで無理矢理)

Last updated at Posted at 2018-02-23

GravatarとかRedmine Local Avatarsを使え、で済む話。
普通はそうなのだが、GravatarはWordPressのアカウントないと駄目だし、Redmine Local Avatarsは他の優先度が高いプラグインと競合でもしたのか入れたらログインすらできなくなってしまったりしたので、自分でなんとかしてみた。

環境

二つは同じサーバに既に入っているもの(view customizeも)とする。

やったこと

サーバ

アバター用画像ファイルを置いておくディレクトリを、Redmineのインストールディレクトリ配下に作る。ここでは/var/lib/redmine/public/avatarとしておく。

mkdir -p /var/lib/redmine/public/avatar

Jenkins

  • ICONFILE: アバターアイコンにしたい画像ファイル
  • REDMINEUSERNAME: アバターを指定したいアカウント名
  • DBUSERNAME: Redmine用DBに接続するアカウント名
  • DBPASSWORD: Redmine用DBに接続するパスワード(Mask Passwordsで設定する)
## Redmineのアカウント名に対応する番号を取得、できなかったらエラー終了
USERID=$(MYSQL_PWD="${DBPASSWORD}" mysql <DB名> -u ${DBUSERNAME} -N -B -e "select id,login from users where login=\"${REDMINEUSERNAME}\"" | awk '{ print $1 }')
test -z "${USERID}" && exit 1

## 配置するファイル名を定義
AVATARFILE="/var/lib/redmine/public/avatar/${USERID}.png"

## アップロードしたファイルをリサイズしてpngに変換、ファイルがなかったらエラー終了
sudo convert -resize 256x ICONFILE ${AVATARFILE}
test -f "${AVATARFILE}" || exit 2

## 正常終了
exit 0

Redmine(view customize)

アバター表示

アカウント名の左にアバターアイコンが出るようにしたかったので、そうなるような処理を追加。

  • Path pattern: /issues
  • Type: JavaScript
$(function(){
  // ユーザー名の前にアバターのimg要素を追加する
  $("#main a.user.active").each(function(i, elem) {
    var userid = $(elem).attr("href").split('/').pop();
    var avatar = '<img src="/redmine/avatar/' + userid + '.png" alt="avatar" class="user' + userid + ' avatar" />';
    $(elem).before(avatar);
  });

  // 画像ファイルが用意されていないアカウントはimg要素を追加しない
  $('img.avatar').error(function() {
    $(this).remove();
  });
});

アバターのサイズ指定と丸アイコン化

少し大きいサイズの画像を置いて、それを画像を縮小させた方があとから表示箇所によって微妙にサイズ変えたりするのが楽そうなので、CSSでサイズ指定。あと丸く加工するのはめんどくさそうなのでそれもCSSに任せた。
ついでに画像に対してテキストの縦位置がセンタリングされてる方が見栄えしそうなのでそれも。

  • Path pattern: /issues
  • Type: StyleSheet
img.avatar {
  height: 48px;
  width: 48px;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
}

* {
  vertical-align: middle;
}

終わりに

Jenkinsなくてもどうにかなりそうな気がするけど、他の仕事の合間にやったのでできそうな手段でやれりゃいいやと投げた結果。
jQueryは初めて調べてみたけど色々できそうで楽しそう。普段はシェルスクリプトとPowerShellしか書かないインフラ屋だから、触ることまったくなさそうだけど。

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?