从 Rails 模型中提取的图像和 <div>答案

【问题标题】：Images and <div> pulled from Rails model从 Rails 模型中提取的图像和 <div>
【发布时间】：2016-05-16 04:18:42
【问题描述】：

当我查看 www.dribble.com 等网站的源代码时，我看到每个图像都有自己的 <div>，但是当我使用以下代码从我的 rails 模型中提取图像时：

<div class="article">
 <% @articles.in_groups_of(5, false).each do |group| %>
  <div class="row">
   <% group.each do |article| %>
    <div class="col-md-2">
       <%= link_to image_tag(article.artwork.thumb), ?? %>
       <%= sanitize(article.title) %>
    </div>
   <% end %>
  </div>
 <% end %>
</div>

<%= will_paginate @articles %>

图像以单个<div> 的形式出现。 Instagram 源代码还显示，用户在其主页中的 9 张照片是单一的<div> 和 Instagram，并且他们的照片布局看起来非常类似于从 Rails 模型中提取的图像。

这是否意味着不可能从 Rails 模型中提取图像并让它们像您在 www.dribble.com 上看到的那样花哨/响应？

此外，是否允许您使您的照片响应/花哨的其他语言也为您提供从模型中提取图像的能力，或者像 www.dribble.com 这样的网站必须手动编码每个<div>/image ?我问是因为在我看到的每个初学者的 java/html 教程中，他们都在将 imgs 手写到代码中，我还没有看到任何示例像在 Rails 教程中那样从模型/数据库中提取图像。

作为奖励，在上面的代码中，我试图弄清楚两件事：

rb.6如何创建指向文章id的链接，“example.com/article/1”
rb.6 如何创建指向附加在 :title 列中的 url 的链接。标题作为<a href="http://cnn.com">Foo Bar</a> 在标题栏下输入我的表单，然后在rb.7 中清理为“Foo Bar”。

谢谢。

【问题讨论】：

标签： ruby-on-rails

【解决方案1】：

您对Rails / CSS 的角色感到困惑。

我们的图片使用Paperclip；不管你是用它还是Carrierwave，模式都是一样的。

图像保存在硬盘驱动器上（本地在网络服务器上，或在外部S3 等上），Paperclip / Carrierwave 然后将对图像的引用存储在您的数据库中。当您通过 Rails 调用图像时，您只是通过数据库和最终的硬盘提取 image.jpg 数据。

图像的风格化完全取决于您：

<%= content_tag :div, class: "article" do %>
  <% @articles.in_groups_of(5, false).each do |group| %>
    <%= content_tag :div, class:"row do %">
      <% group.each do |article| %>
        <div class="col-md-2">
          <%= link_to image_tag(article.artwork.thumb), article %>
          <%= sanitize(article.title) %>
        </div>
      <% end %>
    <% end %>
  <% end %>
<% end %>

由于上面看起来比较杂乱，不妨采纳haml：

.class
  - @articles.in_groups_of(5, false).each do |group|
    .row
      - group.each do |article|
        .col-md-2
          = link_to image_tag(article.artwork.thumb), article 
          = sanitize article.title

如何创建文章id的链接

您应该阅读有关 link_to 的信息 - 您只需传递“输出”，然后传递 URL。由于 Rails 使用 resourceful routing 结构，您将能够直接传递 article 对象：

link_to "Text", article                #-> <a href="example.com/articles/[[id]]">Text</a>
link_to "Text", articles_path(article) #-> <a href="example.com/articles/[[id]]">Text</a>

这认为您在路线中设置了以下内容：

#config/routes.rb
resources :articles

如何创建指向附加在 :title 列中的 url 的链接

不知道你在问什么；如果您想将block 传递给您的link_to，您可以使用：

= link_to article do
  = image_tag article.artwork.thumb
  = sanitize article.title

... 这将产生：

<a href="http://example.com/articles/[[id]]">
  <img src="..." />
  Title
</a>

让他们花哨/反应灵敏

完全是CSS 问题。

【讨论】：