如何在 ruby​​ on rails 的不同位置显示上传的图像？

Question

首先，我是 RoR 的新手，还在学习。

我想知道如何在不同位置显示单个用户上传的不同图像。

例如：如果用户上传了房子的不同图像（外部、内部、顶视图等），我想在网格中显示它们。

目前这就是我所拥有的；

<div class="gallerygrid">
  <div class="gd1 zoom"> 
    <%= image_tag @house.cover_photo(500, 550) %>
  </div>
  <div class="gd2 zoom"> 
    <%= image_tag @house.cover_photo(500, 550) %>
  </div>
  <div class="gd3 zoom"> 
    <%= image_tag @house.cover_photo(500, 550) %>
  </div>
  <div class="gd4 zoom"> 
    <%= image_tag @house.cover_photo(500, 550) %>
  </div>
</div>

我的 CSS

.gallerygrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-gap: 1px;
  grid-auto-flow: dense;
    }

    .gallerygrid img {
    width: 100%;
    height: 100%;
    }

    .gd1 { grid-area: 1 / 1 / 3 / 3; }
    .gd2 { grid-area: 1 / 3 / 2 / 5; }
    .gd3 { grid-area: 2 / 3 / 3 / 4; }
    .gd4 { grid-area: 2 / 4 / 3 / 5; }

/*.img {
    max-width: 100%;
}*/

根据上面的代码，这就是它的显示方式。如您所见，它只是在所有 4 个网格中显示的相同图像，而不是在每个网格中显示不同的图像。

这是我的方法

def cover_photo(size_x, size_y)
  if self.photos.length > 0
    self.photos[0].variant(resize_to_limit: [size_x, size_y]).processed
  else
    "blank.jpg"
  end
end

更新： 所以按照@Daniel 的回答，我将方法移到了这样的助手中

module HouseHelper
  def cover_photo(photo, size_x, size_y)
    photo.variant(resize_to_limit: [size_x, size_y]).processed
  end
end

然后用这个代替

<div class="gallerygrid">
  <% @house.photos.each_with_index do |photo, index| %>
    <div class="gd1{index} zoom"> 
      <%= image_tag cover_photo(photo, 500, 550) %>
    </div>
    <div class="gd2{index} zoom"> 
      <%= image_tag cover_photo(photo, 500, 550) %>
    </div>
    <div class="gd3{index} zoom"> 
      <%= image_tag cover_photo(photo, 500, 550) %>
    </div>
    <div class="gd4{index} zoom"> 
      <%= image_tag cover_photo(photo, 500, 550) %>
    </div>
  <% end %>
</div>

现在所有的图像看起来都是一团糟，而不是我的 4 网格布局，

我该如何解决这个问题？

Answer 1

您应该迭代您的照片，否则您每次都会渲染同一张照片。所以这样的事情就可以解决问题。

<div class="gallerygrid">
  <% @house.photos.each_with_index do |photo, index| %>
    <div class="gd#{index+1} zoom"> 
      <%= image_tag cover_photo(photo, 500, 550) %>
    </div>
  <% end %>
</div>

然后将您的 cover_photo 方法移动到帮助程序中。

def cover_photo(photo, size_x, size_y)
  photo.variant(resize_to_limit: [size_x, size_y]).processed
end

关于blank.jpg图片，我不确定你想做什么，但我认为用空白图片填充网格没有多大意义。