Use an image for radio button label in Rails 4

collection-select, forms, radio-button, ruby, ruby-on-rails-4

Solution

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

Problem

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) %> ``` The html generated looks like so: ``` <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> ``` How do I set this up correctly? Can I wrap the label in a image_tag ? Edit 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 retrieves the url ``` https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/ymca_portfolio.png ``` 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 ``` 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> ``` thanks

Original source