Build Instagram by Ruby on Rails (Part 2)

And show image of post by:<%= image_tag post.image, class: 'main-image' %>HTML code of section:<section class="post"> <div class="user"> <div class="avatar"> <img src="user_avatar.jpg"> </div> <div class="username"> <%= post.user.username %> </div> </div> <%= image_tag post.image, class: 'main-image' %> <div class="description"> <%= post.description %> </div></section>CSS style:.posts{ margin: 50px 180px 10px; .post{ border: 1px solid #efefef; margin: 60px 0; border-radius: 3px; .user{ border-bottom: 1px solid #efefef; display: flex; .avatar{ width: 30px; margin: 8px; img{ width: 100%; border: 1px solid #efefef; border-radius: 50%; } } .username{ padding-top: 13px; color: #262626; font-size: 14px; font-weight: 600; } } .main-image{ width: 100%; border-bottom: 1px solid #f4f4f4; } .description{ padding: 20px; } }}Post looks like:A Post in HomepageShow Posts on the User profile pageIn this step, we’ll show posts of user in their profile page..I’ll replace temporary images by images which users posted.Because User and Post have has_many association, that mean a user has many posts, so we can easily retrieves posts of user by current_user.postsIn show action of UsersController, add a posts instance variable same in homepage, it is posts of current user which order by created_at field.def show @posts = current_user.posts.order(created_at: :desc)endUpdate HTML code in user-images section:<div class="user-images"> <% @posts.each do |post|%> <div class="wrapper"> <%=image_tag post.image %> </div> <% end %></div>Update number of posts of current user:<div class="col-md-8 basic-info"> ….<ul class="posts"> <li><span><%= @posts.count %></span> posts</li> </ul></div>Yeah, look awesome!!!Add pagination for PostsWe can easily implement pagination in Rails with the kaminari gem.Kaminari is a Scope & Engine based, clean, powerful, customizable and sophisticated paginator for modern web app frameworks and ORMs.Kaminari gem easy to use: we just bundle the gem, then your models are ready to be paginated..No configuration required..Don’t have to define anything in your models or helpers.InstallationTo install kaminari to our application, put this line in your Gemfile:gem 'kaminari'Then run bundle:bundle installHow to use Pagination for PostsIn Home controller:Code will look like this:@posts = Post.order(created_at: :desc).page(params[:page]).per(5)The page scope: To fetch the (n)th page of Post.Example: that means it’ll fetch the 3rd page of Post.Note: Pagination starts at page 1, not at page 0 , page(0) will return the same results as page(1).The per scope: To show the number of posts per each page, default per_page is 25.Example: that means is 5In Views:Call the paginate helper:<%= paginate @users %>This will render several ?page=N pagination links surrounded by an HTML5 <nav> tag..This would output several pagination links such as:« First ‹ Prev ….2 3 4 5 6 7 8 9 10 ….Next › Last »Add paginate helper to view: home/index.html.erb<div class="posts"> <% @posts.each do |post| %> <section class="post"> ….</section> <% end %> <%= paginate @posts %></div>Go to the homepage and reload the page, see what happen (don’t forget to add more than 5 posts, because we config per_page is 5).Scroll to the bottom of the page, we’ll see the pagination links:Pagination linksYou can see the pagination links: 1 2 3 4 Next ›Last », the UI is not pretty..We’ll add some below CSS to make it better:.homepage{ […].pagination{ span{ padding-right: 10px; } }}Add an Avatar to UserUsing Active Storage to add an avatar for UsersIn ModelBecause each user to have an avatar, so define the User model like this:class User < ApplicationRecord ….has_one_attached :avatarendIn View (Form edit User)<div class="form-group row"> <%= f.label :avatar, class: 'col-sm-3 col-form-label' %> <div class="col-sm-9"> <%= f.file_field :avatar, class: 'form-control' %> </div></div>In Controller:Add avatar to strong paramsdef user_params params.require(:user).permit(:username, :name, :website, :bio, :email, :phone, :gender, :avatar)endNow we can go to the Edit User page to upload an avatar for User.Show Avatar of User:Replace all where using a temporary image by the avatar of User:In the User profile page (users/show.html.erb)<div class="wrapper"> <% if current_user.avatar.attached?.%> <%= image_tag current_user.avatar %> <%end %></div>In the Form edit profile page (users/edit.html.erb)<%= form_with model: current_user, local: true, html: {class: "form-horizontal form-edit-user"} do |f| %> <div class="form-group row"> <div class="col-sm-3 col-form-label"> <% if current_user.avatar.attached?. More details

Leave a Reply