在Rails 4中将图像用作单选按钮标签 [英] Use an image for radio button label in Rails 4

问题描述

我正在尝试使用帮助器collection_radio_buttons将图像显示为标签，并希望将image_id保存到模型中以便我可以检索url，到目前为止，我已经提出了该示例，其中显示了一个单选按钮， image_url作为标签.

I am trying to use the helper collection_radio_buttons to show an image as a label, and want to save the image_id to the model so that I can retrieve the url, so far I have come up with this which shows a radio button and the image_url as the label.

我已经注意到的事情是，我只能单击一次单选按钮，然后才保持其打开状态:

Something I have noticed already is that I can only click the radio button once and it then just stays in its on state:

<%= f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) %>

生成的html如下:

<input id="campaign_default_image_id_1" name="campaign[default_image_id]" type="radio" value="1" />
<label for="campaign_default_image_id_1">https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/1/vandals_portfolio.png</label>

如何正确设置?我可以将标签包裹在image_tag中吗?

How do I set this up correctly? Can I wrap the label in a image_tag ?

因此，经过更多研究并尝试将其组合在一起，我现在可以渲染图像和单选按钮，但是该图像是我通过载波上传的默认图像，而不是我想要的resize:small版本.我可以通过:small版本吗?

So after some more research and trying to piece this together I can now render an image and a radio button, but the image is the default image I uploaded with carrierwave and not the resized :small version that I would like. Can I pass the :small version through?

<%= f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) do |b| %>
<%= b.label { image_tag("#{b.text}") + b.radio_button } %>

b.text检索网址

b.text retrieves the url

https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/ymca_portfolio.png

但是我希望它为文件名加上fancy_box_array前缀，如下所示:

But I would like it to prefix the filename with fancy_box_array, like so:

https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/fancy_box_array_ymca_portfolio.png

使用此新代码生成的html是:

The html generated with this new code is:

<label for="campaign_default_image_id_1"><img alt="Vandals portfolio" src="https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/1/vandals_portfolio.png" />
<input id="campaign_default_image_id_1" name="campaign[default_image_id]" type="radio" value="1" /></label>

谢谢

推荐答案

有一个很好的参考您要尝试执行的操作.尝试类似的东西:

There is a good reference on what you are trying to do. Try something like:

f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) do |b|
  b.label { b.radio_button + image_tag(b.object.image) }
end

这篇关于在Rails 4中将图像用作单选按钮标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！