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
Related
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%>
I have a loop that iterates through a list of stories but it's generating one row per story and not 3 columns. What am I missing?
<div class="row">
<div class="col-md-4">
<% #stories.each do |story| %>
<h2><%= story.name.titleize %></h2>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
<% end %>
</div>
</div>
Thanks.
I think you're placing the each loop in the wrong place. Try something like:
<div class="row">
<% #stories.each do |story| %>
<div class="col-md-4">
<%= content_tag :h2, story.name.titleize %>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
</div>
<% end %>
</div>
Take a look to each_slice
#stories = [story1, story2, story3, story4, story5, story6, story7, story8]
#stories.each_slice(3).to_a
#=> [[story1, story2, story3], [story4, story5, story6], [story7, story8]]
I think you can try this:
<% #stories.each_slice(3).to_a.each do |row_stories| %>
<div class="row">
<% row_stories.each do |story| %>
<div class="col-md-4">
<%= content_tag :h2, story.name.titleize %>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
</div>
<% end %>
</div>
<% end %>
I want to generate all my products and their information on a page using bootstrap's grid system. I tried to generate three products in a row at first and it worked using the following code:
<div class="container">
<h1 align="center">Listing products</h1>
<% #products.each do |product| %>
<% if #a%3 == 0 %>
<div class="row">
<% end %>
<div class="col-lg-4">
<%= image_tag(product.image_url, class: 'list_image', size: '260x320') %>
<%= product.title %> <br/>
<%= product.price %> <br/>
<%= link_to 'Show', product %><br/>
</div>
<% #a = #a+1 %>
<% if #a%3 == 0 %>
</div><hr/>
<% end %>
<% end %>
</div>
(#a is what I declared in the controller which is initially set to 0)
The code will not work anymore if I want to only display two or less products in a row using the grid system when the screen gets smaller.
Are there any better ideas to achieve this?
Seems like you are generating incorrect HTML markup. Try to use each_slice:
<div class="container">
<h1 align="center">Listing products</h1>
<% #products.each_slice(3) do |products| %>
<div class="row">
<% products.each do |product| %>
<div class="col-lg-4">
<%= image_tag(product.image_url, class: 'list_image', size: '260x320') %>
<%= product.title %> <br/>
<%= product.price %> <br/>
<%= link_to 'Show', product %><br/>
</div>
<% end %>
</div>
<hr/>
<% end %>
</div>
I have to break out of the if condition if the index is greater than 5 after appending the icon in my row. Right now it keeps on adding the icon.
<div class="row sub-navigation">
<% #projects.each_with_index do |project, index| %>
<div class="col-sm-2 col-xs-1">
<% if index > 5 %>
<%= link_to "", path, remote: true, id: "project_div",
class: "glyphicon glyphicon-chevron-down" %>
<% else %>
<%= link_to project.name, project_url(project.project_id), class: ('active' if current_page?(project_path(project.project_id)) ) %>
<% end %>
</div>
<% end %>
</div>
You can use break
<% #projects.each_with_index do |project, index| %>
<% break if index < 5 %>
<% end %>
--
Or you could also use .take as per this answer:
<% #projects.take(5).each do |project| %>
...
<% end %>
This will allow you limit the value of the loop to 5 objects only, preventing the need for further logic
break is a common programming function, designed to get out of a loop
What Dax and I were suggesting was to add it along-side your if statement:
<% if index < 5 %>
<% break %>
<% else %>
... do something
<% end %>
If you just want to add an icon for the first 5 links, you'll want to do this:
<% your_class = index > 5 ? nil : "icon_class" %>
<%= link_to "path", path_helper, class: your_class %>
--
Update
In response to your pastie, here's what you need to do:
<div class="row sub-navigation">
<% #projects.each_with_index do |project, index| %>
<div class="col-sm-2 col-xs-1">
<% your_class = index > 5? "icon_class" : nil %>
<% link_to "", path, remote: true, id: "project_div", class: your_class %>
</div>
</div>
You can try <% break if index > 5 %>
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 %>