如何在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 图像，我不知道你想做什么，但我认为用空白的图像来履行网格没有多大意义。