前回までで Carrierwave を用いてアバターのアップロードができるようになりました。が、サイズの大きい画像をアップロードすると、画面いっぱいに画像が表示されてデザインが狂ってしまいます。CSS を用いて、これを抑止するとともに、アップロード前に画像を確認できるようにしてみます。
表示画像サイズを CSS で調整する
アップロードされたファイルに対し、ImageMagick を用いてサムネイル用のサイズ等各種サイズの画像を作る方法はありますが、ここでは簡単に CSS で調整してみたいと思います。
現状、大きいサイズのが蔵をアップロードすると、以下のようにアカウント情報表示領域からはみ出してしまいます。これをはみ出さないようにしていきます。
まずは、この画像を表示している div に class を指定しておいて、その class 内の img に対して style を設定していきます。app/views/accounts/show.html.erb を編集します。
|
1 2 3 4 5 6 7 8 |
<div class="col-sm-4"> <!-- アバターファイルの表示 --> <div class="account-profile-iamge d-flex flex-column"> <%= image_tag current_user.profile.avatar.to_s, :class => "float-center border mb-2 mx-auto" %> <%= link_to "アバターを変更", edit_account_avatar_path %> </div> </div> |
次に、css を定義していきます。app/assets/stylesheets/application.scss で account 画面用に分けたscss を読み込むようにします。
|
1 2 |
/* 以下を追記 */ @import "account"; |
上記で読み込む app/aseets/stylesheets/account.scss を作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* センタリング */ .account-profile-image { text-align: center; } /* 画像サイズを 192px 四方に設定して、object-fit: cover で真ん中で切り抜き */ .account-profile-image img { height: 192px; width: 192px; object-fit: cover; border-radius: 0.7rem; } |
これで、アバター画像が 192px 四方で画像の中央で切り取られて表示されるようになりました。
アップロード時に画像を確認できるようにする
ファイルアップロード時に、画像を選択したら、アップロード前にどう見えるか確認できるようにします。まずはアップロード用の View を変更します。
現在の画像を表示している部分を、先程と同様に class 指定し、さらに実際に画像を表示している img に id を付与します。あと、file_field に変更があった場合に javascript を叩けるように form.file_field にも id を付与しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-group row"> <div class="col-sm-4"> <div class="account-profile-image mb-3"> <%= image_tag @profile.avatar.to_s, :id => "avatar-prev" %> <% if @profile.avatar? %> <label><%= form.check_box :remove_avatar %> 画像を削除する</label> <% else %> <%= form.hidden_field :avatar_cache %> <% end %> </div> </div> <div class="col-sm-8"> <%= form.file_field :avatar, :id => "avatar-img", :class => "form-control-file" %> </div> </div> |
次に、id: avatar-img を持つ file_field に変更があったというイベントを受けて、id: avatar-prev の画像を更新する javascript を末尾に追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- 以下をファイルの末尾に追記 --> <script type="text/javascript"> $(function() { function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#avatar-prev').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#avatar-img").change(function(){ readURL(this); }); }); </script> |
これで、ファイルのアップロード前に画像の確認ができました。
こんな感じです。
