I'm having trouble display specific range of data in do-loop in Ruby.
I Have this example code:
Post
<!-- Display loop only 9 sections -->
<div class="row">
<% #post.each do |post| %>
<div clas="blog">
<h3 class="heading"><%= post.title %></h3>
</div>
</div>
<!-- END => Display loop only 9 sections -->
<div class="row">
<div clas="banner">
<img src="images/banner.jpg" alt="banner">
</div>
</div>
<!-- Continue display loop for 10 and until latest sections -->
<div class="row">
<% #post.each do |post| %>
<div clas="blog">
<h3 class="heading"><%= post.title %></h3>
</div>
</div>
<!-- END => -->
In this situation I want to add a banner section after it displays 9 posts:
<div class="row">
<% #post.each do |post| %>
<div clas="blog">
<h3 class="heading"><%= post.title %></h3>
</div>
</div>
<!-- END => Display loop only 9 sections -->
<!-- I will add this banner section after posts displays 9 posts -->
<div class="row">
<div clas="banner">
<img src="images/banner.jpg" alt="banner">
</div>
</div>
and then I want to continue the post display from post 10 up to latest posts after I added the banner section:
<!-- Continue display loop for 10 and until latest sections -->
<div class="row">
<% #post.each do |post| %>
<div clas="blog">
<h3 class="heading"><%= post.title %></h3>
</div>
</div>
<!-- END => -->
In my situation, the two post sections will display all the data in post. How do you limit 9 posts in the 1st div element, and continue the latest posts in the 3rd div element below the banner section using the do loop? I want to continue the latest posts in my 3rd section.
Is there any easy way to do this?
I'm currently new to rails app and I'm still exploring the syntax of the program.
You can use .each_with_index method to determine if this exact element of the collection is 9th, here is the documentation link: https://ruby-doc.org/core-2.7.1/Enumerable.html#method-i-each_with_index
<!-- Display loop only 9 sections -->
<div class="row">
<% #post.each_with_index do |post, index| %>
<div clas="blog">
<h3 class="heading"><%= post.title %></h3>
</div>
</div>
<% if index == 8 %>
<div class="row">
<div clas="banner">
<img src="images/banner.jpg" alt="banner">
</div>
</div>
<% end %>
<% end %>
Something like this should work
For the first 9 posts:
<% #post.limit(9).each do |post| %>
And the other posts below the banner:
<% #post.drop(9).each do |post| %>
Maybe:
<% #post[0..8].each do |post| %>
...
<% #post[9..-1].each do |post| %>
or:
BANNER_POSITION = 9
<% #post[0...BANNER_POSITION].each do |post| %>
...
<% #post[BANNER_POSITION..-1].each do |post| %>
Related
I want to display categories across a single row in my home page but they stack on top of each other instead.
<div class= "container">
<div class="panel panel-primary">
<div class="panel-body">
<div class="col-md-3">
<% Category.take(6).each do |category| %>
<%=link_to category.name, categories_show_path(category: category.name)%>
<% end %>
</div>
</div>
</div>
</div>
why don't you create a row and col according to your requirement, also provide more information so someone can help you solve your problem, you're trying to display 6 categories name in col-md-3, I have updated your code you can check out
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<div class='row'>
<% Category.all.take(6).each do |category| %>
<div class="col-md-2">
<%= link_to category.name, categories_show_path(category: category.name) %>
</div>
<% end %>
</div>
</div>
</div>
</div>
In my app each user has 4X graphs to display.
I'm displaying 3X col-md-4 graphs for each user through the each loop below.
This code is in my view.
<div class="row">
<div class="container">
<% #user_overviews.each do |overview| %>
<div class="col-md-4 text-center">
<h4><%= overview.title %></h4>
<%= raw overview.graph%>
</div>
<% end %>
</div>
</div>
the problem is that I need to be able to show a fourth graph below the other three graphs in a col-md-12.
I'm using active admin to upload the graphs, so the four graphs for user 1 have ID 1,2,3,4 and the next four graphs for user 2 have ID 5, 6, 7, 8 and so on.
So in graph 4 and 8 are the once that should be displayed in the col-md-12
I find it hard to get around how I can display graph 4 and 8 in a col-md-12
can someone advise me on how I would do that?
First of all (unless I'm missing something), the row div should be the child of the container div.
Given that the overviews will always be of fixed sized 4, try using the each_with_index method as shown below:
<div class="container">
<div class="row">
<% #user_overviews.each_with_index do |overview, index| %>
<div class="col-md-<%= index == 3 ? '12' : '4' %> text-center">
<h4><%= overview.title %></h4>
<%= raw overview.graph%>
</div>
<% end %>
</div>
</div>
If each user has exactly 4 overviews, probably a simple solution is to iterate over all except the last one and then put another row for the last overview. You will need another row anyway if you want to have col-md-12.
Also, I think the container div has to wrap everything else.
Something like this maybe:
<div class="container">
<div class="row">
<% #user_overviews[0...-1].each do |overview| %>
<div class="col-md-4 text-center">
<h4><%= overview.title %></h4>
<%= raw overview.graph %>
</div>
<% end %>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h4><%= #user_overviews.last.title %></h4>
<%= raw overview.graph %>
</div>
</div>
</div>
Edit: Lazarus' solution is more DRY, so I think it's better.
I am trying to get my cards to show-up as three in a row and then jump to the next line and put the next three. Right now, it's just putting each card right below the one above it. Can anyone help me out?
<div class="container">
<div class="row">
<div class="col-md-6">
<% #block_busters.each do |movie| %>
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="<%= movie.image_url %>" alt="Card image cap">
<div class="card-body">
<h4 class="card-title"><%=movie.title%></h4>
<p class="card-text"><%=movie.description%></p>
</div>
</div>
<%end%>
</div>
</div>
</div>
You're most likely looking for the 'slice' method, try something like this:
<% #block_busters.each_slice(3) do |slice| %>
<div class="row">
<% slice.each do |movie| %>
<div class="col-md-4"> <!-- 12 cols / 3 cards = 4 -->
<!-- render your cards here, each will show up in rows of 3 -->
</div>
<% end %>
</div>
<% end %>
I'm trying to create a two column layout. The first side should span 9 columns and the next one 3. Inside the col-md-9 I want to nest two more columns, one that spans 4 and another one that spans 8.
<div class="row">
<% #huddles.each do |huddle| %>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", huddle_path(huddle) %>
</div>
</div>
<% end %>
</div>
<div class="col-md-3">Second Column</div>
</div>
This however, comes out looking like this:
Am I nesting my rows and columns wrong? Or maybe it is my ruby code itself that screws up the layout once new "Huddles" are created?
EDIT: With the fixed code, the second column "col-md-3" comes out next to the last created huddle. Inspecting it, all the huddles make one single row.
<div class="row">
<% #huddles.each do |huddle| %>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", huddle_path(huddle) %>
</div>
</div>
</div>
<% end %>
<div class="col-md-3">Second Column</div>
</div>
And looks like this, where the second column moves all the way down next to the last huddle created:
I think this is what you are going for. I am pretty confident the issue is with the html structure and has nothing to do with ruby.
I also want to clarify. The initial issue you were having was that you were starting a div inside the loop but only closing it outside the loop. So starting n amount of divs but only one closing tag, and that would cause it to look like the image you first posted.
<div class="row">
<div class="col-md-9">
<% #huddles.each do |huddle| %>
<div class="show-region" >
<div class="col-md-4" style="height:150px;">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8" style="height:150px;">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", subjects_path(huddle) %>
</div>
</div>
<% end %>
</div>
<div class="col-md-3">Second Column</div>
</div>
so I'm trying to show some blog-type data on one of my pages. It works fine, but is posting the posts all at the end of the div as well.
Like this:
Image
<div class="style-2 mb-20 shadow bordered light-gray-bg news-margin col-md-5">
<!-- page-title start -->
<!-- ================ -->
<h1 class="page-title">Latest News</h1>
<div class="separator-2"></div>
<!-- page-title end -->
<p class="lead">The latest news will be posted here:</p>
<div class="row grid-space-12">
<%=# news.each do |news| %>
<div class="col-sm-12">
<div class="image-box style-2 mb-20 shadow bordered text-center">
<div class="overlay-container">
<i class="fa fa-newspaper-o fa-5x p-20"></i>
<div class="overlay-to-top">
<p class="small margin-clear"><em> <%= news.topic %> <br> <%= news.created_at.strftime("%A, %b %d") %></em>
</p>
</div>
</div>
<div class="body">
<h3><%= news.header %></h3>
<div class="separator"></div>
<p>
<%=n ews.content %>
</p>
Read More<i class="fa fa-arrow-right pl-10"></i>
</div>
</div>
</div>
<% end %>
</div>
</div>
Figured it out, I had the = in with <%= news.each do |news| %>, which was printing that info out...