I'm working on this do loop in my app, it works fine but I want to take it further (see below) and I'm not sure how to do that.
<div class="row">
<% #products.each do |category, products| %>
<% products.each_with_index do |product, index| %>
<% if index == 0 %>
<div class="col-lg-4 col-sm-6 col-xs-12 center-block " >
<%= image_tag product.image.url(:medium), class: "img-responsive" %>
<div class="caption">
<p><%= product.category.name %></p>
</div>
<% end %>
</div>
<% end %>
<% end %>
</div>
At the moment the loop is looping through 12 categories and displaying one image from each category. I don't want to have all the images appearing in the same row.
I tried to add each_slice(3) to the loop but it gives me this error:
undefined method 'image' for 5:Fixnum
This is how the code looks after the each_slice(3) insertion
<% #products.each_slice(3) do |category, products| %>
<div class="row">
<% products.each_with_index do |product, index| %>
<% if index == 0 %>
<div class="col-lg-4 col-sm-6 col-xs-12 center-block " >
<%= image_tag product.image.url(:medium), class: "img-responsive" %>
<div class="caption">
<p><%= product.category.name %></p>
</div>
<% end %>
</div>
<% end %>
<% end %>
</div>
I'm not sure what to do here or if each_slice (3) is the right way to do this.
array = [..]
array.each_slice(x) will give you array.size / x arrays different.
Example :
> [1,2,3,4,5,6].each_slice(2) do |g| p g end
[1, 2]
[3, 4]
[5, 6]
So you have to add a loop to your code :
<% #products.each_slice(3) do |products_group| %>
<% products_group.each do |category, products| %>
...
<% end %>
<%end%>
Related
I am trying to use in_groups_of to sort my rails html output into two columns. Right now it just displays as one column. Here is the code:
<% #providers.in_groups_of(2).each do |group| %>
<div class="row">
<% group.each do |provider| %>
<div class="col-xs-6">
<h3><%= link_to provider.name, provider_path(provider) %></h3>
<h4><%= provider.address %></h4>
</div>
<% end %>
Your div.col-md-12s are each taking up the width of an entire row. Try changing them to col-xs-6. (I'm using xs so it will show up on any size of window; ignore this if not appropriate to your situation.)
<% #provider.in_groups_of(2).each do |group| %>
<div class="row">
<% group.each do |provider| %>
<div class="col-xs-6">
<h3><%= link_to provider.name, provider_path(provider) %></h3>
<h4><%= provider.address %></h4>
</div>
<% end %>
</div>
<% end %>
I have an array of #schools (School.all), and I am displaying these #schools within a Bootstrap row (3 per row). I was wondering how I could make it so that for every third item in #schools, Ruby/Rails would create a new row and then repeat that process. Thanks.
<% for 3 in #schools %>
<div class="row">
<% #schools.each do |s| %>
<div class="col-md-4">
</div>
<% end %>
</div>
<% end %>
each_slice is your friend.
<% #schools.each_slice(3) do |schools| %>
<div class="row">
<% schools.each do |s| %>
<div class="col-md-4">
</div>
<% end %>
</div>
<% end %>
<% #schools.in_groups_of(3) do |schools| %>
<div class="row">
<% schools.each do |s| %>
<div class="col-md-4">
</div>
<% end %>
</div>
<% end %>
For documentation: http://apidock.com/rails/Array/in_groups_of
I have a row which displays projects, now i need to add an icon to the end if the number of items exceed 6. How can write a condition here to check if the project count is greater than 6 then instead of adding the projects i append a icon.
<div class="row">
<% #projects.each do |project| %>
<div class="col-sm-2 col-xs-1">
<%= link_to project.name, project_url(project.project_id),
class: ('active' if current_page?(project_path(project.project_id)) ) %>
</div>
<% end %>
</div>
You could try using each_with_index and then have a conditional in the loop to detect when you're on the 6th loop (first loop begins with zero for the index value).
Something like this:
<div class="row">
<% #projects.each_with_index do |project, index| %>
<% if index > 5 >
<!-- show icon -->
<% else %>
<div class="col-sm-2 col-xs-1">
<%= link_to project.name, project_url(project.project_id),
class: ('active' if current_page?(project_path(project.project_id)) ) %>
</div>
<% end %>
<% end %>
</div>
I think this is what you want. If not then feel free to ask for change.
<% if #projects.size > 6 %>
###put your icon here
<% else %>
<div class="row">
<% #projects.each do |project| %>
<div class="col-sm-2 col-xs-1">
<%= link_to project.name, project_url(project.project_id),
class: ('active' if current_page?(project_path(project.project_id)) ) %>
</div>
<% end %>
</div>
<% end %>
You can use 'each_with_index' instead of each , like this
<%#images.each_with_index do |page, index| %>
<% if index > 5 %>
//here put your code to add icon
<%else%>
<%= link_to project.name, project_url(project.project_id),
class: ('active' if current_page?(project_path(project.project_id))
<%end%>
<%end%>
I think it will help you
I'm trying to generate results for a webstore using this erb block and I want 4 images per row, but right now it is only generating one image per row. Any advice would be highly appreciated
<% n = 4 %>
<% #products.each do |product| %>
<div class="row-fluid">
<% if (n%4 == 0) %>
<% end %>
<div class="span3">
<%= link_to image_tag(product.images.order(:placement).first.image.url(:medium)), product if product.images.present? %>
<p class="text-center"><%= link_to product.name, product %></p>
</div>
<% if (n%4 == 3) %>
<% end %>
<% n += 1 %>
</div>
<% end %>
Ruby will break it into groups of four for you using Enumerable#each_slice:
<% #products.each_slice(4) do |row| %>
<div class="row-fluid">
<% row.each do |product| %>
<div class="span3">
<%= link_to image_tag(product.images.order(:placement).first.image.url(:medium)), product if product.images.present? %>
<p class="text-center"><%= link_to product.name, product %></p>
</div>
<% end %>
</div>
<% end %>
I have a loop for my Activity model
<% #activities.each do |activity| %>
<div>
<div class="cell">
<%= image_tag(activity.image) %>
</div>
<div class="cell">
<h4><%= activity.title %></h4>
<p><%= activity.description %></p>
<span><%= activity.distance %></span>
</div>
</div>
<% end %>
I want to create a zig-zag effect, so I need to re-arrange the HTML for every even activity, so the markup will look like this:
<div>
<div class="cell">
<h4><%= activity.title %></h4>
<p><%= activity.description %></p>
<span><%= activity.distance %></span>
</div>
<div class="cell">
<%= image_tag(activity.image) %>
</div>
</div>
Is there a way to do this with an if statement? Something like this:
<% if activity.odd? %>
<% #activities.each do |activity| %>
<div>
<div class="cell">
<%= image_tag(activity.image) %>
</div>
<div class="cell">
<h4><%= activity.title %></h4>
<p><%= activity.description %></p>
<span><%= activity.distance %></span>
</div>
</div>
<% end %>
<% else %>
<% #activities.each do |activity| %>
<div>
<div class="cell">
<h4><%= activity.title %></h4>
<p><%= activity.description %></p>
<span><%= activity.distance %></span>
</div>
<div class="cell">
<%= image_tag(activity.image) %>
</div>
</div>
<% end %>
There are a few ways to do this.
The first and best way is to do this with CSS's nth-child selector, assuming it's possible to achieve your desired effect purely through CSS. Use nth-child(odd) or nth-child(even), as described in Alternate table row color using CSS?
If you're iterating over a collection using .each, you can add a .with_index and check whether the index is odd or even:
<% #activities.each.with_index do |activity, index| %>
<% if index.odd? %>
...
<% else %>
...
<% end %>
<% end %>
Note that by default the index is zero-based, so your first element will be considered "even". You can pass a starting index of 1 to with_index if you want the alternating to start odd instead:
<% #activities.each.with_index(1) do |activity, index| %>
An alternative to using with_index is to use Rails' cycle helper, which "magically" returns the next argument in rotation each time its invoked:
<% #activities.each do |activity| %>
<% if cycle('odd', 'even') == 'odd' %>
...
<% end %>
<% end %>
Also note that this is a fantastic opportunity for refactoring. You should distill the two reused cell divs into their own partials and render them in the order you want:
<% if index.odd? %>
<%= render h4_part %>
<%= render img_part %>
<% else %>
<% render img_part %>
<% render h4_part %>
<% end %>