4 Categories for blog post

I created a rails blog and added categories to label the blog type. In the header I have <% Category.all.each do |category| %> <li><%= link_to category.name, posts_path(category: category.name) %></li> <% end %> If someone clicks one of the 4 categories( eat, drink, travel,news) then it populates that category on the index page. However, prior to clicking is there a way to organize the blog posts by category. I'm trying to replicate the blog after http://blog.airbnb.com/ with each category having it's own box. What would be the code for that? Right now on the index page I just run a loop and it just displays all types vertically. Is this a css/html issue or controller issue? <div class="container"> <div class="row" > <div class="col-md-12"> <% @posts.each do |post| %> <div class="posts"> <div class="box panel panel-default"> <%= link_to image_tag(post.image.url), post %> <h5><%= post.category.name %></h5> <h6><%= post.title %></h6> </div> </div> <% end %> </div> </div> </div>

Posted almost 5 years ago by Dean
Posted almost 5 years ago by Alex Yang

It's only a controller issue if you aren't able to select the posts that you want. For example, if your controller code is only retrieving the 'eat' posts, but you want to retrieve posts from all four categories, then it's your controller code that you need to revise. If instead, you have all the posts you want already stored in variables, then you're dealing with a page layout and CSS problem.

I won't be able to help you write the actual code to use, but I can help you think through the approach and point you in the right direction. If you're looking to create a style similar to Airbnb's blog, I recommend first seeing if you can display each of the boxes vertically. Once you've gotten that down, try to display those same boxes in a two-column format (or however many columns you want). If you're using Bootstrap, you'll find their 12-grid page layout very helpful, so I'd read up on their documentation.

Hope that helps!