使用Rails如何创建一个图像/照片库（网格视图）？

Question

我想创建一个网格视图的照片库（类似Facebook），想知道是否只用Rails就可以实现，还是需要使用jQuery。

我正在使用Paperclip，并且在尝试以网格形式展示图片时遇到了困难。

如果有人能提供教程链接或起点，我将非常高兴。（我已经有了显示所有照片的索引视图）

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>

谢谢！

- benoitr

---

您具体想知道哪些方面的实现方法，或者是哪些地方出了问题？ - polarblau

谢谢 plarblau，我想要的是在表格中显示图片，例如：宽 5 张 x 高 10 张。 - benoitr

Answer 1

这与Rails无关，因为你所处理的只是HTML标记问题。

表格可能不是解决此问题的正确方法，至少你所布局的方式是错误的。表格行（<tr>）不能被样式化为相邻的列。通常的解决方案是使用浮动的div来显示你想要的任意数量的列。以下代码与上面的代码相同，只是使用了div：

<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>

然后，只需使用CSS，您就可以将图像排列成网格。以下是一个示例： http://www.alistapart.com/articles/practicalcss/

从那里，您可以使用JQuery或进一步的CSS来增强基本实现。

- Dominic

Answer 2

这是我做的方法...

我使用Paperclip来调整图像缩略图大小，这里的微小尺寸为128x128，以及CSSBakery的优秀文章。我还将图像设置为链接到原始图像。

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

依我看：

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

在我的app/assets/stylesheets CSS文件中（阅读css网格的www.cssbakery.com文章）。

/* ------------------------------------------
      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;
  }

- Tache