CODEWITHSUNDEEP
phpxmljoomlamodulejoomla3.0
ApsaraAruna
ApsaraAruna

Reputation: 136

How could add custom markup to form field in joomla module xml

I want to add custom markup to an form field in joomla xml. I want to add <i class="fa fa-facebook"></i> in this radio button.

This code doesn't work, so the fa icon does not show.

<field name="face_book_icon" type="radio" default="" label="Face Book Icon" description="Face Book Icon" >
        <option value="facebook-official"><i class="fa fa-facebook"></i> icon 1</option>
        <option value="facebook">icon 2</option>
        <option value="facebook-square">icon 3</option>
</field>

sample idea of what i want. sample idea

when i try the with your ( @jonasfh ) answer the FA icon will come. but it's on one raw,one radio button 

<field name="face_book_icon" type="radio" default="" label="Face Book Icon" description="Face Book Icon" >
        <option value="facebook-official" class="fa fa-facebook-official " > icon 1</option>
        <option value="facebook" class="fa fa-facebook"> icon 2</option>
        <option value="facebook-square" class="fa fa-facebook-square" >icon 3</option>
    </field>

Here the screenshot - enter image description here

Upvotes: 1

Views: 610

Answers (1)

jonasfh
jonasfh

Reputation: 4579

To modify the markup for the field, you need to override the current output of the radio button field. This is possible by copying the file

layouts/joomla/form/field/radio.php

to your template, in the folder:

/templates/yourtemplate/html/layouts/joomla/form/field/radio.php

where yourtemplate is the folder where your current template lives. Now you can modify the radio.php - file, adding <i> - tags. You can try adding the tags inside the label-tags (on line 83), but how it is displayed will depend on how the template renders radio buttons. Alternatively try adding the tags on line 81. You also need to handle different icons for the different options. This might be handled by adding different classes to the options directly in the xml-file?

<label for="<?php echo $oid; ?>"> <i <?php echo $optionClass; ?>></i><?php echo $option->text; ?> </label>

More on output overrides can be found here.

One more thing: It might be possible to achieve what you want by simply adding the correct classes to the options in the xml:

<field name="face_book_icon" type="radio" default="" label="Face Book Icon" description="Face Book Icon" > <option value="facebook-official" class="fa fa-facebook">icon 1</option> <option value="facebook">icon 2</option> <option value="facebook-square">icon 3</option> </field>

Depending on how the css is setup, it might work straight out of the box, or with small modifications to the css.

Upvotes: 1

Related Questions