# Table with dynamic content

**URL:** <https://www.ruby-forum.com/t/table-with-dynamic-content/188858>\
**Category:** Rails\
**Created:** [May 19, 2010, 2:20pm UTC](https://www.ruby-forum.com/t/table-with-dynamic-content/188858 "2010-05-19T14:20:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![thebarge](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/b38774/32.png) [@thebarge](https://www.ruby-forum.com/u/thebarge)\
**Post date:** [May 19, 2010, 2:20pm UTC](https://www.ruby-forum.com/t/table-with-dynamic-content/188858/1 "2010-05-19T14:20:17Z")

</div>

I want to create a table displaying image thumbnails, 3 per row.  
Can I use an if loop to create the

 tags?

or is this better acheived with css?

---

<div class="post-metadata">

**Author:** ![thebarge](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/b38774/32.png) [@thebarge](https://www.ruby-forum.com/u/thebarge)\
**Post date:** [May 19, 2010, 2:32pm UTC](https://www.ruby-forum.com/t/table-with-dynamic-content/188858/2 "2010-05-19T14:32:15Z")

</div>

On 19 May 2010 13:20, the batman [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> I want to create a table displaying image thumbnails, 3 per row.  
> Can I use an if loop to create the tags?

“if” doesn’t produce a loop - it’s just a conditional check.

Assuming your images are stored in an array, you can use any of a  
number of methods to loop them.

- you could do .each\_with\_index and then start a new row on mod-3 of the  
index
- you could use .each\_slice(3) and iterate the returned array of three
- you could (if you like it clunky) just use .each maintain your own  
counter and do your next row operations when it gets to a multiple of  
3

[http://www.ruby-doc.org/core/classes/Enumerable.html](http://www.ruby-doc.org/core/classes/Enumerable.html)

> or is this better acheived with css?

Probably (for all sorts of “tables are for tabular data” reasons). But  
the problem of working out how to tell the element it’s a new row will  
be very similar to using a table (unless you rely on overflow wrapping  
in a fixed-size container).

---

<div class="post-metadata">

**Author:** ![thebarge](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/b38774/32.png) [@thebarge](https://www.ruby-forum.com/u/thebarge)\
**Post date:** [May 19, 2010, 2:59pm UTC](https://www.ruby-forum.com/t/table-with-dynamic-content/188858/3 "2010-05-19T14:59:56Z")

</div>

> - you could (if you like it clunky) just use .each maintain your own  
> counter and do your next row operations when it gets to a multiple of  
> 3

I think that’s what I was trying to do, though I didn’t know how to get  
a new table row  
was I on the right track?

\<% @photos.each do |photo| %\> \<% count = 0 %\> \<% while count \<= 3 %\> \<% count += 1 %\>

\<% end %\>  
…

| \<%= link\_to image\_tag(photo.image.url(:thumb)), photo %\> |
|
| |

---

<div class="post-metadata">

**Author:** ![thebarge](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/b38774/32.png) [@thebarge](https://www.ruby-forum.com/u/thebarge)\
**Post date:** [May 19, 2010, 3:20pm UTC](https://www.ruby-forum.com/t/table-with-dynamic-content/188858/4 "2010-05-19T15:20:51Z")

</div>

Not sure that you would want to do this but you can

a = (1…20).to\_a

until a.empty?  
x = a.slice!(0,3)  
puts x.inspect  
end

Gives

[1, 2, 3]  
[4, 5, 6]  
[7, 8, 9]  
[10, 11, 12]  
[13, 14, 15]  
[16, 17, 18]  
[19, 20]

so you could have

\<% until @photos.empty? -%\> \<% x = @photos.slice!(0,3) -%\> \<% x.each do |y| -%\> \<% end -%\> \<% end -%\>

| \<%= y %\> |

---

<div class="post-metadata">

**Author:** ![thebarge](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/b38774/32.png) [@thebarge](https://www.ruby-forum.com/u/thebarge)\
**Post date:** [May 19, 2010, 3:16pm UTC](https://www.ruby-forum.com/t/table-with-dynamic-content/188858/5 "2010-05-19T15:16:10Z")

</div>

On 19 May 2010 13:59, the batman [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> > - you could (if you like it clunky) just use .each maintain your own  
> > counter and do your next row operations when it gets to a multiple of  
> > 3
> 
> I think that’s what I was trying to do, though I didn’t know how to get  
> a new table row  
> was I on the right track?

I did try to hint that that was a poor option with all the Ruby  
goodness available to you! 🙂

Try:

 \<% @photos.each\_slice(3) do |photos\_row| %\> \<% photos\_row.each do |photo| %\> \<% end %\> \<% # could do with some check here to pad out row with blank cells if any cell has less than three - to produce valid HTML (wouldn't need to worry about this with CSS placement :-) %\> \<% end %\>

| \<%= link\_to image\_tag(photo.image.url(:thumb)), photo %\> |
|
| |

You could also pass the “” drawing bit off to its own partial and  
pass it the photos-row collection; but that might be one step too far  
for you right now.

---

<div class="post-metadata">

**Author:** ![thebarge](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/b38774/32.png) [@thebarge](https://www.ruby-forum.com/u/thebarge)\
**Post date:** [May 19, 2010, 3:27pm UTC](https://www.ruby-forum.com/t/table-with-dynamic-content/188858/6 "2010-05-19T15:27:46Z")

</div>

\<% @photos.in\_groups\_of(3, false) do |group| %\>

 \<% group.each do |photo| %\> \<%= photo.filename\_or\_whatever %\> \<% end %\> \<% end %\>

or something relatively close to that