带导轨的图像/照片库（网格视图）？答案

【问题标题】：image/photo gallery (grid view) with rails?带导轨的图像/照片库（网格视图）？
【发布时间】：2011-01-23 16:26:46
【问题描述】：

我想创建一个带有网格视图（facebook 风格）的照片库，我想知道这是否仅通过 rails 可以实现，或者我是否应该使用 jquery 来实现。

我正在使用回形针，但我试图将图片显示为网格。

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

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>

谢谢！

【问题讨论】：

究竟什么不行或者你想详细了解如何实现？
感谢 plarblau，我想要在表格中显示图片，例如：5 张图片宽 x 10 高。

标签： ruby-on-rails view grid

【解决方案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 来增强基本实现。

【讨论】：

【解决方案2】：

我就是这样做的……

我使用回形针来调整图像缩略图的大小，在这种情况下，小尺寸是 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 文件（阅读 www.cssbakery.com 在 css 网格上的帖子）

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

【讨论】：