I’m working on a new field type where the user can select icons from an icon font. This works well if I only want to support one icon font for this field type.
Now I got the idea to embed more icon fonts into that an have already included this option the the field settings like this
acf_render_field_setting( $field, array(
'label' => __('Select Font','acf-fonticonpicker'),
'instructions' => __('The font you wish to use','acf-fonticonpicker'),
'type' => 'select',
'name' => 'font_type',
'choices' => array (
'fonta' => 'Font A',
'fontb' => 'Font B'
)
));
For the selected icon font I have to load different CSS and font files. My problem is that I don’t know how and where to get the value of this setting to embed the necessary files in the render_field( $field ) function and how to embed the correct files for the front end depending on the selected value.
In the render_field( $field ) function I get the value for the font_type by $field['font_type'] but it’s to late to embed files within this function.
In the input_admin_enqueue_scripts I can’t get the value with $field['font_type'].
Maybe I twisted my brain and can’t see the solution – but I hope someone could help me.
Thanks
Thomas
Hopefully this will help, but I think I understand what you’re doing. I’m not exactly sure on the details of how to accomplish it, but I can give you a general outline.
Enqueue a JavaScript.
When your field is loaded or changes the script is run.
The script will look at the field and get the font that needs to be include then creates a new <style> element in the head of your document with the link to the correct CSS file.
You may also want to delete any previous <style> elements that were created when the user switches fonts.
@Hube2 thanks for this idea. I got this to work in the backend – but I still don’t know how to solve this for the frontend.
I don’t want to load all CSS files for each font; I want to load the CSS file depending on the selected font.
I’m assuming that the custom field is associated with a post of some type.
Is would be the same principle that you did in the back-end. You enqueue a script, localized with the css file to load. Then when the script runs it can add the the stylesheet to the header. This would probably be the way you’d want it to work if you want to somehow add the stylesheed to the page during the “get_field()” or “the_field()” function calls.
I walked away from the computer thinking about this, because you’re creating a new type of custom field….
You might want to think about having a choice of things to return, the stylesheet url… maybe the script to call in some way. This is going to be a hard one because as a developer using you’re field type I’d want to be able to determine where I put it and how the value is used, on the other hand, if done by using a script then you’d have to have some way to ensure the script that loads up the styles heet into the header is only loaded once.
Creating a field type is about outputting a value that another developer can use for something. Not sure how you’re going to work that out.
