[英]Add an image next to a checkbox label in activeadmin form
我在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”。 我想添加一個像這樣的html標簽: span img(src: "product_image_path")
,就像我在activeadmin中顯示產品頁面時一樣。
我檢查了表格文檔,僅發現此自定義選項:collection => Product.pluck(:name, :id)
。 這使我只能更改標簽中的文本,而不能提供添加圖像的方法。
如何以activeadmin形式在產品名稱旁邊顯示產品照片之一的縮略圖?
如: 格式文檔中所述 ,您可以自定義現有輸入。 因此,我在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文件中設置了新標簽標簽的樣式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.