Jump to content

Display FA icons in radio fields - theme settings


Go to solution Solved by Daniel F,

Recommended Posts

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!

image.png.a4a6eb4da8a23f7961948ad79aee4d77.png

 

image.png.3112af6ecb29a970770963275b6a3b0d.png

Edited by The Old Man
Link to comment
Share on other sites

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:

 

F7A1965E-9F77-49DA-B2B9-CBB6C8AD9375.jpeg

Edited by The Old Man
Link to comment
Share on other sites

  • Solution

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:

Bildschirmfoto 2021-10-18 um 19.44.28.png

 

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

 

 

Link to comment
Share on other sites

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:

 

Bildschirmfoto 2021-10-18 um 19.44.28.png

 

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')
];


 

Link to comment
Share on other sites

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!

image.png.a4a6eb4da8a23f7961948ad79aee4d77.png

 

image.png.3112af6ecb29a970770963275b6a3b0d.png

 

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;
}



 

Link to comment
Share on other sites

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 );
		}

 

Link to comment
Share on other sites

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')
Link to comment
Share on other sites

@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 by The Old Man
Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...