Question

I currently have an Array that contains some URL’s to images.

@images = [ "http://site/images/01.jpg", "http://site/images/02.jpg" ]

Total 18 images

I would like to take this array and create a thumbnail gallery where the gallery is 3 columns across in my view. The HTML out put would be


<table>
<tr>
<td><img src="http://site/images/01.jpg"></td>
<td><img src="http://site/images/02.jpg"></td>
<td><img src="http://site/images/03.jpg"></td>
</tr>
<tr>
<td><img src="http://site/images/04.jpg"></td>
<td><img src="http://site/images/05.jpg"></td>
<td><img src="http://site/images/06.jpg"></td>
</tr>
</table>

My current implementation gets me a one column table

<table>
<tr>
<% @images.each do | image | %>
<td><%= image_tag(image)%></td><br>
<% end %>
</tr>
</table>

In the future I might want it to be 6 columns instead of 3 columns.
I’m looking for a way to do this in a clean and flexible way.

I was looking at the Ruby documentation and I saw this
Class Range (rng.step method)
http://www.ruby-doc.org/core/classes/Range.html

Not sure if this Range class step method can solve the problem but the example it provides is interesting.

Any thoughts, I’m still learning and maybe I’m over thinking this?

Answer 1

use each_slice()

<table>
  <% @images.each_slice(3) do |images| %>
    <tr>
      <% images.each do |image| %>
        <td><%= image_tag(image) %></td>
      <% end %>
    </tr>
  <% end %>
</table>