How to add CSS class to simple_form_for collection fields
<%= f.input :answer, as: :radio_buttons, :required => true, :label => false, collection: ([[image_tag(q.optiona),'a'] , [image_tag(q.optionb),'b'], [image_tag(q.optionc),'c'], [image_tag(q.optiond), 'd']]), wrapper: :vertical_radio_and_checkboxes, :input_html => {:class => "img img-thumbnail", :width => 304, :height => 236} %>
The above code is displaying images in its actual size, I want show the images in thumbnails.
It's better to preprocess images on the web, not simply scaling images down with css or image attributes. If you've just 4 images I'd open an editor like gimp (a free and opensource Photoshop alternative). If you're working with user uploaded images use a gem like paperclip which allows you to create special uploaders that, using a command line tool called imagemagick, can automatically resize images down to reasonable sizes. However, a reason why you might want to use double sized, or even triple sized images is because of retina displays these days.
Back to your code. First simplify the code:
<%= f.input :answer, as: :radio_buttons, :required => true, collection: ([[image_tag(q.optiona),'a'] , [image_tag(q.optionb),'b'], [image_tag(q.optionc),'c'], [image_tag(q.optiond), 'd']]) %>
The following CSS code would then help you, even without a special wrapper:
.input.radio_buttons .radio img {
width: 200px;
height: 200px;
}
Final remark: you don't provide any alt-text to your images, and while the image_tag-helper will add a generated alt tag for you based on the filename, it is recommended to add a nicely written one just in case someone cannot see the label-images (well). :)