How to use each_slice in ERB to set rows?

Question

I have an array of the following:

[{title, description, body, image}, 
 {title2, description2, body2, image2}, 
 {title3, description3, body3, image3}, 
 {title4, description4, body4, image4}]

In my ERB I'm trying to get the first two on the same row. The next two on the next row. Basically having image 1 and 2 side by side on one row, image 3 and 4 side by side on the row beneath.

So I have something like the following:

<% @post.each_slice(2) do |post, b| %>
  <% if b.sort_order != 5 %>
    <%= image_tag b.post_image %>
    <%= b.title %>
    <%= b.description %>
    <%= b.body %>
  <% end %>
<% end %>

Cool this gets me the 2 and 4 position in the array but really I'd like to see:

[1, 2]
[3, 4]

So I changed it to do:

<% @post.each_slice(2) do |post, b| %>
  <% if b.sort_order != 5 %>
    <%= image_tag post.post_image %>
    <%= image_tag b.post_image %>
  <% end %>
<% end %>

Cool so now I'm getting [1,2] [3,4]. How do I get it to display:

Title 1         Title 2
Description 1   Description 2

Sounds to me more of a CSS question? In the simplest sense, you could just use `each` then wrap each image in a `div` with a 50% width. In reality, there will be a little more to it than that - does that sounds a possibility, or am I misunderstanding the question? — SRack, Jan 03 '18 at 17:53
Not present in the code is that I'm trying to do bootstrap around it. So the 1 data is on the left and 2 is on the right. The problem is the code in how I apply it so that the left side is only 1 and the right side is 2 and it's all grouped. — Jake, Jan 03 '18 at 18:08
Did you try my answer? It sounds to me like that should work.... — SRack, Jan 03 '18 at 18:18

score 1 · Accepted Answer · answered Jan 03 '18 at 17:56

Try the following:

<% @post.each do |post| %>
  <% if post.sort_order != 5 %>
    <div class="half-width">
      <%= image_tag post.post_image %>
      <%= post.title %>
      <%= post.description %>
      <%= post.body %>
    </div>
  <% end %>
<% end %>

And add the following CSS:

.half-width {
  display: inline-block;
  width: 50%;
}

Be aware the 50% width takes into account any whitespace, so it might still split lines. Have a play and see what you think - a little more info here.

Technically not the correct answer but close and it led me to the right answer. — Jake, Jan 03 '18 at 18:21

score 1 · Answer 2 · answered Jan 03 '18 at 18:19

1

So the resolution is actually a CSS issue. I "solved it" by adding breaking it out further to something like:

<% @post.each_slice(2) do |post, b| %>
<% if b.sort_order != 5 %>

  <div class="col-md-6">
  <%= image_tag post.post_image %>
  </div>

  <div class="col-md-6">
  <%= image_tag b.post_image %>
  </div>

 <% end %>

Basically I was an idiot in only seeing it as lumped together in the erb.

answered Jan 03 '18 at 18:19

Jake

1,328
1
21
51

Looks good :) You could also try wrapping the pair of 'col-md-6's in a 'div' with the class of 'row' if you're doing things the bootstrap way. Glad you got it sorted! – SRack Jan 03 '18 at 18:25

How to use each_slice in ERB to set rows?

2 Answers2