成果物の作成9 ユーザ画像登録機能、表示機能の実装

ユーザーページに画像が表示されておらず少し寂しいので、

ユーザー登録画面で画像をアップロードし、プロフィールページや、記事の投稿で表示できるようにします。

carrierwaveを利用し、

画像アップロードは

ユーザー画像登録部分の追加

ユーザー新規登録ページ（/signup）のフォームで画像をpostできるように追加します

view/users/new.html.erb

  <%= form_for(@user, url: signup_path) do |f| %>
.
.
.
      <span class="picture">
        <%= f.label :picture %>
        <%= f.file_field :picture %>
      </span>
.
.
<% end %>
<%= render 'shared/picture_size' %>

と追加します。

最後の行でJQueryによる画像サイズチェックコードは記事投稿ページでも同じものを使っているので、パーシャル化してrenderしています。

views/shared/picture_size

<script type="text/javascript">
  $('#post_picture').bind('change', function() {
    var size_in_megabytes = this.files[0].size/1024/1024;
    if (size_in_megabytes > 5) {
      alert('Maximum file size is 5MB. Please choose a smaller file.');
    }
  });
</script>

画像表示部

記事一覧表示画面views/posts/show.html.erb、

記事詳細表示画面viewsposts/_post.html.erbの投稿者の横に表示するようにします。

views/posts/show.html.erbとviews/posts/_post.html.erbに 以下を追加

<div class="card-footer">
    <%= image_tag @post.user.picture.url,:size =>'30x30' if @post.user.picture? %>
 投稿者<%= link_to @post.user.name, user_path(@post.user.id) %>  - 投稿日時<%= simple_time(@post.created_at) %>
</div>

画像は大きくても見苦しい為、30*30で表示するように調整しておきました。

そしてテストを書いて、gitとherokuにpushして完成です