DeviseのProfile画像の調整

前回までで Carrierwave を用いてアバターのアップロードができるようになりました。が、サイズの大きい画像をアップロードすると、画面いっぱいに画像が表示されてデザインが狂ってしまいます。CSS を用いて、これを抑止するとともに、アップロード前に画像を確認できるようにしてみます。

表示画像サイズを CSS で調整する

アップロードされたファイルに対し、ImageMagick を用いてサムネイル用のサイズ等各種サイズの画像を作る方法はありますが、ここでは簡単に CSS で調整してみたいと思います。

現状、大きいサイズのが蔵をアップロードすると、以下のようにアカウント情報表示領域からはみ出してしまいます。これをはみ出さないようにしていきます。

 

まずは、この画像を表示している div に class を指定しておいて、その class 内の img に対して style を設定していきます。app/views/accounts/show.html.erb を編集します。

次に、css を定義していきます。app/assets/stylesheets/application.scss で account 画面用に分けたscss を読み込むようにします。

上記で読み込む app/aseets/stylesheets/account.scss を作成します。

これで、アバター画像が 192px 四方で画像の中央で切り取られて表示されるようになりました。

アップロード時に画像を確認できるようにする

ファイルアップロード時に、画像を選択したら、アップロード前にどう見えるか確認できるようにします。まずはアップロード用の View を変更します。

現在の画像を表示している部分を、先程と同様に class 指定し、さらに実際に画像を表示している img に id を付与します。あと、file_field に変更があった場合に javascript を叩けるように form.file_field にも id を付与しています。

次に、id: avatar-img を持つ file_field に変更があったというイベントを受けて、id: avatar-prev の画像を更新する javascript を末尾に追記します。

これで、ファイルのアップロード前に画像の確認ができました。

こんな感じです。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です