Display FA icons in radio fields - theme settings

[The Old Man]

Hi,

I've been trying all week to get this to work, but it always shows as unparsed text.

I have a custom theme setting with a list of radio options to choose from, each one is a font awesome icon. It works great but I'm trying to display the actual icon by each checkbox.

I have tried using lang settings, tried adding a prefix, description, php in double brackets, targetting with CSS etc. The AdminCP won't parse anything I enter into the value fields for each key except as text. The individual fields don't have seperate ID's, they all have the same one.

Can anyone please nudge me in the right direction, so I can display the actual icon next to each?

Many thanks!

 

Edited October 16, 2021 by The Old Man

[TAMAN]

1 hour ago, The Old Man said:

tried adding a prefix, description, php in double brackets, targetting with CSS etc

Maybe try to provide the code how you have added the field! 🙂

[Adriano Faria]

I had to display the unicode of the icon instead of the fa name in this resource:

 

I mean, in my form. I have no idea how it is in theme settings as you don’t have a “form” itself. It is more like extra fields.

 

[The Old Man]

Thanks both, yes I've tried all sorts of things, trying to using CSS similar to  'content: "\f0aa";' on a ::before and ::after etc. In the source of the page there seems to be a way of using the 'for' attribute in the label for the field item as a unique ID, I've even tried that but no joy. I could get it to work in the browser developer tools but not in an actual custom theme setting via Designers Mode.

The Add Fields options in Pages suggest you can use some variables like $value, $formValue etc and I've seen mention of radio button parsing in the Helper, but nothing seems to parse:

 

Edited October 16, 2021 by The Old Man

[Daniel F]

Set the type to "Other/Manual" and then use following code:

<?php

$options = ['fa-angle-up' => '<i class="fa fa-angle-up"></i>', 'fa-chevron-up' => '<i class="fa fa-chevron-up"></i>', 'fa-window-close' => '<i class="fa fa-window-close"></i>'];



return new \IPS\Helpers\Form\Radio("core_theme_setting_title_{$row['sc_id']}", $value, FALSE, array(
    'options' => $options,
    'parse' => "raw"
    ), NULL, NULL, NULL, 'theme_setting_' . $row['sc_key']);

Result:

 

You could also use the IPS\Helpers\Form\Custom form field type which allows you to literally customize the whole output...

 

 

[ReyDev]

12 hours ago, Daniel F said:

Set the type to "Other/Manual" and then use following code:

<?php

$options = ['fa-angle-up' => '<i class="fa fa-angle-up"></i>', 'fa-chevron-up' => '<i class="fa fa-chevron-up"></i>', 'fa-window-close' => '<i class="fa fa-window-close"></i>'];



return new \IPS\Helpers\Form\Radio("core_theme_setting_title_{$row['sc_id']}", $value, FALSE, array(
    'options' => $options,
    'parse' => "raw"
    ), NULL, NULL, NULL, 'theme_setting_' . $row['sc_key']);

Result:

 

 

You could also use the IPS\Helpers\Form\Custom form field type which allows you to literally customize the whole output...

 

 

how to show images? 
I added two images in a folder called `images` (system->global),  using the manage resources option. I used this code but it doesn't show anything

$options = [
	"d"=>\IPS\Theme::i()->resource('images/a.png', 'core', 'global'),
	"l"=>\IPS\Theme::i()->resource('images/b.png', 'core', 'global')
];

 

[ReyDev]

On 10/16/2021 at 12:29 PM, The Old Man said:

Hi,

I've been trying all week to get this to work, but it always shows as unparsed text.

I have a custom theme setting with a list of radio options to choose from, each one is a font awesome icon. It works great but I'm trying to display the actual icon by each checkbox.

I have tried using lang settings, tried adding a prefix, description, php in double brackets, targetting with CSS etc. The AdminCP won't parse anything I enter into the value fields for each key except as text. The individual fields don't have seperate ID's, they all have the same one.

Can anyone please nudge me in the right direction, so I can display the actual icon next to each?

Many thanks!

 

 

try this :
 

<?php

$options = [
        'fa-address-book' => '&#xf2b9; ',
        'fa-address-book-o' => '&#xf2ba;',
        'fa-address-card' => '&#xf2bb; ',
        'fa-address-card-o' => '&#xf2bc;',
        'fa-adjust' => '&#xf042;'
  		// etc. 
		// I have full list of this array let me know if you are interested in. 
];

return new \IPS\Helpers\Form\Radio("core_theme_setting_title_{$row['sc_id']}", $value, FALSE, array(
    'options' => $options,
  	'class' => 'radio-class-faicons',
    'parse' => "raw"
    ), NULL, NULL, NULL, 'theme_setting_' . $row['sc_key']);

add this class to your custom css file :

.radio-class-faicons {
	font-family:'FontAwesome' !important;
	font-weight:900;
}

 

[The Old Man]

Thank you both, I'll give them both a try! 😀

 

7 hours ago, ReyDev said:

how to show images? 
I added two images in a folder called `images` (system->global),  using the manage resources option. I used this code but it doesn't show anything

$options = [
	"d"=>\IPS\Theme::i()->resource('images/a.png', 'core', 'global'),
	"l"=>\IPS\Theme::i()->resource('images/b.png', 'core', 'global')
];

 

 

I've not tried it but I think looking at the Helper you would use:

'parse' => "image"

instead of:

'parse' => "raw"
    

which gives acess to some extra layout functionality.

if ( $this->options['parse'] === 'image' )
		{
			return \IPS\Theme::i()->getTemplate( 'forms', 'core', 'global' )->radioImages( $this->name, $value, $this->required, $this->options['options'], $this->options['disabled'], $this->options['toggles'], $descriptions, $warnings, $this->options['userSuppliedInput'], $this->options['unlimited'], $this->options['unlimitedLang'], $this->htmlId, $this->options['gridspan'] );
		}
		else
		{
			return \IPS\Theme::i()->getTemplate( 'forms', 'core', 'global' )->radio( $this->name, $value, $this->required, $this->parseOptions(), $this->options['disabled'], $this->options['toggles'], $descriptions, $warnings, $this->options['userSuppliedInput'], $this->options['unlimited'], $this->options['unlimitedLang'], $this->htmlId );
		}

 

[ReyDev]

1 hour ago, The Old Man said:

I've not tried it but I think looking at the Helper you would use:

'parse' => "image"

instead of:

'parse' => "raw"
    

thanks , but i think the problem is the resource of image , i mean a way that we can get the image from resource.
The following code returns the unknown value

\IPS\Theme::i()->resource('images/a.png', 'core', 'global')

[The Old Man]

@Daniel F Thanks again, I was able to get it working with your solution. I've been trying to get it to show the radio options inline instead of vertical to take up less space in the theme custom settings but can't seem to get that to work unless I choose parse as image. Any tips gratefully accepted! For now I've utilised FA CSS classes.

 

@ReyDev I see what you mean, I spent a couple of hours messing around with it and exactly the same results i.e. the img resource isn't parsed. The docs say you can only put the image in the theme's resource folder but also suggests you can create a subfolder. I tried both options and neither worked sorry. Last week I came across a post from Adriano where he was looking into the same thing (radio images), and Newbie Lac posted a solution using the Reactions as an example, and I think that point you in the right direction if you can find it.

 

Edited October 21, 2021 by The Old Man