Question

我在Rails应用程序中使用gem'activeadmin'，'〜> 1.3'。我在两个模型之间有这些关系：

class Offer < ApplicationRecord
  has_many :products
end
class Product < ApplicationRecord
  belongs_to :offer, required: false
  has_attachments :photos, maximum: 4, dependent: :destroy
end

我可以通过以下方式访问产品的第一张照片：@product.photos[0]或@product.photos[0].path

在admin / offer.rb中，用于选择要约产品的复选框是使用：

f.input :products, as: :check_boxes

这将显示一个复选框列表，其中包含产品名称作为标签。现在，我想在标签旁边加上一个产品的照片缩略图。

构建复选框后，我无法遍历“：products”。我想添加一个span img(src: "product_image_path")这样的html标签，就像在activeadmin中显示产品页面时一样。

我检查了形式文档，仅发现此自定义选项：:collection => Product.pluck(:name, :id)。这使我只能更改标签中的文本，而不能提供添加图像的方法。

如何以activeadmin形式在产品名称旁边显示产品照片之一的缩略图？

Answer 1

如formtastic documentation中所述，您可以自定义现有输入。因此，我在app / inputs / checkbox_image_input.rb中创建了一个checkbox_image输入：

class CheckboxImageInput < Formtastic::Inputs::CheckBoxesInput
  include CloudinaryHelper

  def choice_html(choice)
    template.content_tag(
    :label,
    img_tag(choice) + checkbox_input(choice) + choice_label(choice),
    label_html_options.merge(:for => choice_input_dom_id(choice), :class => 
    "input_with_thumbnail"))
 end

  def img_tag(choice)
    cl_image_tag(Product.find(choice[1]).photos[0].path, :width=>30, 
    :crop=>"scale")
  end
end

我将cloudinary用作图像存储服务，您可以根据自己的意愿更新img_tag（choice）。然后，您可以使用admin / model.rb中的新输入，格式为：

f.input :products, as: :checkbox_image, :collection => product_selection

肯定地，我使用input_with_thumbnail类在active_admin_custom_css.css文件中设置了新标签的样式。

以activeadmin形式在复选框标签旁边添加图像

1 个答案: