Question

I would like to create a photo gallery with a grid view (facebook style) and I would like to know if this is acheivable with rails only or if I should use jquery to do it.

I am using paperclip and I am stuck trying to display pics as grid.

I would be very pleased if someone has a tutorial link or a starting point for this. (I have already my index view showing all photos)

index.html.erb

<% title "All Photos" %>

<table>
  <% for photo in @photos %>
    <tr>
    <td><%= link_to image_tag(photo.image.url), photo %></td>
      <td><%= link_to photo.name, photo %></td>
    </tr>
  <% end %>
</table>

Thanks!

Answer 1

This isn’t dependent on Rails, as what you’re dealing with is simply a matter of your HTML markup.

A table is probably the wrong solution to this problem – at least the way you’ve laid it out. Table rows (<tr>) cannot be styled to appear next to each other as columns. The common solution here is to use floated divs to display your content in any number of columns you desire. The following code is the same as above, except using divs:

<div id="gallery">
  <% for photo in @photos %>
    <div class="photo">
      <%= link_to image_tag(photo.image.url), photo %>
      <%= link_to photo.name, photo %>
    </div>
  <% end %>
</div>

Then, using just CSS, you can lay out your images as a grid. An example is here:
http://www.alistapart.com/articles/practicalcss/

From there, you can enhance the basic implementation with JQuery or further CSS to taste.