How to put a picture instead of text in radio element in ZF2?

Question

Subject: How to put a picture instead of text in radio element in ZF2? code: Options field:

array(
'spec' => array(
    'type' => 'radio',
    'name' => 'fcaptcha',
    'options' => array(
        'label' => 'Капча',
        'label_attributes' => array(
            'class' => 'control-label',
        ),
    ),
    'attributes' => array(
        'required' => 'required',
    ),
),  
)

Controller:

$temp[0] = 'Here you need to put a picture instead of text';
$temp[1] = 'Here you need to put a picture instead of text';
$form->get('fcaptcha')->setValueOptions($temp);

[Related](http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list) - Note the browser compatibility issues. You can add either a `style` or `class` property to the `attributes` array. — AlexP, Aug 20 '14 at 17:05

score 0 · Answer 1 · answered Aug 21 '14 at 08:51

You can do that just with some CSS. Here's a simple example that you can adapt for your purpose :

Let say you have this Zend\Form\Element\Radio element :

array(
            'type' => 'Zend\Form\Element\Radio',
            'name' => 'fcaptcha',
            'options' => array(
                    'value_options' => array(
                            '0' => 'something1',
                            '1' => 'something2',
                    ),
            ),
            'attributes' => array(
                    'id'=>"fcaptcha-id"
            )
    )

CSS :

radio-option1 {background-image:url(option1.png);}

radio-option2 {background-image:url(option2.png);}

Some JS :

$(document).ready(function(){

$(':radio[value="0"]').addClass('radio-option1');
$(':radio[value="1"]').addClass('radio-option2');
});

How to put a picture instead of text in radio element in ZF2?

1 Answers1