CODEWITHSUNDEEP
ruby-on-railsviewgrid
benoitr
benoitr

Reputation: 6105

image/photo gallery (grid view) with rails?

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!

Upvotes: 3

Views: 3999

Answers (2)

Tache
Tache

Reputation: 505

This is how I did it ...

I use Paperclip to size an image thumbnail, in this case tiny size is 128x128, along with the the great post from CSSBakery. I also have the images set to have a link to the original image.

http://www.cssbakery.com/2010/07/image-grid-using-css-floats_6950.html https://github.com/thoughtbot/paperclip

In my view:

<div id="gallery">
  <ul id="grid">
    <% @images.each do |image| %>
     <li><%= link_to image_tag(image.photo.url(:tiny)), image %></li>
    <% end %>
  </ul>
</div>

Im my app/assets/stylesheets CSS file (read the www.cssbakery.com post on the css grid)

/* ------------------------------------------
      Grid
--------------------------------------------- */

ul#grid {
  padding: 0;
  list-style: none;
  margin: 20px auto 0;
  width: 700px;  
  }

#grid li {
  float: left;
  padding: 0;
  margin: 0 5px 10px 5px;
  } 

#grid li a {
  display: block;
  }

#grid li img {
  background-color: #64666a;
  padding: 7px; margin: 0;
  border: 1px dotted #58595b;
  width: 128px;
  height: 128px;
  }

#grid li a:hover img {
opacity:0.3; filter:alpha(opacity=30);
  }

.grid_display {
  padding: 20px;
  margin-left: auto; margin-right: auto;  margin-top:50px; margin-bottom:0;
  /*background-color: #ffd7ce;*/
  width: 513px; 

  /*these two properties will be inherited by .grid_display h2 and .grid_display p */
  font-family: 'GraublauWeb', arial, serif; 
  text-align: center;
  }  

div.grid_display h2 {
  padding: 0; margin: 0;
  clear: both;
  font-size: 35px;
  font-weight: normal;
  color: #58595b;
  background: none;
  font-family: 'GraublauWeb', arial, serif;  

  /* reset for cascade effects that are trickling down from other h2's */
  text-transform: none;
  letter-spacing: normal;
  }

.grid_display p {
  margin:0; padding: 0;
  font-size: 15px;
  color: #58595b;
  }

Upvotes: 0

Dominic
Dominic

Reputation: 3304

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.

Upvotes: 5

Related Questions