Jump to content

Set Markup inside a InputfieldRadio Option Label


Orkun
 Share

Recommended Posts

Hi Guys

How can i set markup inside a Inputfieldradio Option Label? I am using unicode emoticons as labels at the moment, but this emoticons dont work well in some browsers(especially IE). Now i decided to use images, but it isn't possible to add html for label. I think I can alter the behavior of the InputfieldRadios::render function with hooks? To achieve what I want. But I don't know how to do this.

// Unicode Smiley Types$smile_1 = '
Link to comment
Share on other sites

The longer answer: yes, a hook should work, but you'll have to modify the html output of InputfieldRadios::render. Quick&Dirty:

/* site/ready.php */

wire()->addHookAfter('InputfieldRadios::render', null, 'addOptionImages');

function addOptionImages($event) {
  $obj = $event->object;
  if($obj->name == "NameOfYourRadiosField") {
    $opts = $obj->getOptions();
    $ret = $event->return;

    foreach($opts as $key => $value) {
      $id = $obj->id . "_" . wire('sanitizer')->name($key); 
      $ret = preg_replace(
        "~(<input.*?id='{$id}'.*?)<span.*?>.*?</span>~",
        '$1' . "<img style='display: inline;' src='$value'>",
        $ret
        );
    }

    $event->return = $ret;
  }
}

The "display: inline" style is needed to keep the image on the same line as the radio button.

  • Like 2
Link to comment
Share on other sites

You could use the custom attribute options argument for radios, checkboxes etc in the addOption().

$field->addOption($key, $value, array("class" => "customEmoClass"));

The rest is CSS and or JS.

So you could do it like this. The label can be empty, and the $value would be the attr array.

$evaluationVals = array(
    'sehr_befriedigend' => array("title" => "sehr befriedigend", "class" => "smily1"),
    'befriedigend' => array("title" => " befriedigend", "class" => "smily2"),
    'mittelmaessig_befriedigend' => array("title" => "mittelmässig befriedigend", "class" => "smily3"),
    'unbefriedigend' => array("title" => "unbefriedigend", "class" => "smily4"),
);

foreach ($evaluationVals as $key => $value) { 
      $field->addOption($key, "", $value); 
} 
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Pip
      Hi Everyone!
      I'd like to set a different label on my Title (PageTitle) field in one particular template.  Is there a way to do so? 
      Thanks. 
    • By MarkE
      I have created a custom admin page which uses InputfieldPageListSelect. It works very nicely (see image), especially with a bit of css to modify the appearance within a MarkupAdminDataTable and some js with AJAX to interactively update each row. However, I would also like to be able to "view" the selected tariffs. When using a normal InputfieldPageListSelect in the admin, you can set "Enable view/edit links on selected pages" (and "Enable link to create new pages"). I can't see how to pass a parameter for that in the API. Any ideas?
       

    • By jonatan
      collapsedNoLocked field not showing
      Hi all, ☺️
      I'm a 21 years old 👨‍🦱, danish 🇩🇰, hobby-designer-and-web-stuff-maker and very excited and eager processwire beginner, or "noob" 🐣 if you wish.
      So far I've been fascinated by the very satisfyingly simple and yet powerfull magic ✨ of PW (once you get the hang of it) and the awesome feeling of the strong PW community 🦄🌈☀️❤️! The huge work done by @ryan and all of the other amazing PW people is just so inspiring! I actually really have a hard time understanding why Processwire isn't the most used CMS in the world... or at least just a way more commonly known one!
       
      But now I've encountered a small bump on the road and I'd lovingly appreciate if one of you lovely PW forum members could maybe help me out!
      ❓Problem:
      So I have a problem with the collapsed-constant: https://processwire.com/api/ref/inputfield/#pwapi-methods-collapsed-constants 
      - It's not showing my field when I apply it.
      (I've funnily enough found this old git pull from 2014 which documents the "Locked" state being added as a field -> input -> visibility option: https://github.com/ryancramerdesign/ProcessWire/pull/457 – it also shows the relevant code implementations to the core) 
       
      📝 What I wish to do:
       is to 👀 display some data from a 📦 module (InstagramBasicDisplayApi) in the ⌨️ page editor when editing a page ("About me") using the template (About.php) - So the only possible way to do that as far as for what I've been able to come up with with my restricted PW (end eh.. php) –knowledge was to add a custom field type to the (About.php) template...
      I've set up a custom field using https://modules.processwire.com/modules/mystique/ :
      site/modules/configs/Mystique.php:
      <?php namespace ProcessWire; $modules = wire("modules"); $instagram = $modules->get("InstagramBasicDisplayApi"); $data = array('username'=>''); $account = $instagram->getUserAccount($data["username"]); $username = isset($account["username"]) ? $account["username"] : ""; $at_instausername = "@" . $username; /** * Resource : Instagram account */ return [ 'title' => __('Instagram account'), 'fields' => [ 'window_title' => [ 'label' => __(' '), 'type' => Mystique::TEXT, // or InputfieldText 'useLanguages' => true, 'collapsed' => '0', 'placeholder' => __($at_instausername), ] ] ]; - Basically:
      I'm getting the instagram-username, pulling it from the module "InstagramBasicDisplayApi",  And then I'm using it as the 'placeholder' value for the field, resulting in this:  - Which is actually what I want... almost...
      – The thing is, I would like it to be locked, so that it's not possible to overwrite the 'placeholder' value, but so that the inputfield actually does not take any input but just informatively displays the data...
      so what I do is that I just change 'collapsed' to '7' = 'collapsedNoLocked':
      'collapsed' => '7', , right, and that would be it?
      But unfortunately no...
      When I do I get this:
       
       - I can't figure out why? I'd supposed that the 'placeholder' value would just show, but non-editable?
      A "workaround" is to just set it to back to 0, then manually type in "@sasha_lindegaard" and then press save, and then set it to 7, and I have what I want:

      - But that's not really what I wish, as it displays the data (the instagram username) statically (from what I've typed into the field and have saved) and not dynamically (from the instagram module database) as wished for...
      – also, it's still collapsable? Why so?... 🤔
       
      Any ideas for how I might get my "INSTAGRAM" field to display the username from the instagram module's database dynamically, not as editable placeholder text in a editable/open input field but just as non-editable/locked text?
      I hope that I've made my problem clear enough but if I've failed to provide enough info please don't hesitate to request for more! 🙂 
      Thanks a thousand times in advance!
      All the best,
      Jonatan R.
    • By dragan
      In page-edit view: If I wanted to display the total count of selections, is there an in-built PW method for this?
      e.g. let's say the default view is collapsed for a page reference field. I see the label "Services" but would like to see "Services (3)". I would know that three items are selected without opening the inputfield. And ideally after every change, the number gets updated (without page-reload).
      Did someone once built something similar?
    • By Harmen
      Hi all,
      I am trying to build a form in a module. So when the render() method is called, I build the form and I want to apply a custom markup, which is defined in an array.
      Unfortunately I can't remove some text in my label. Instead of a label I want an icon, but there is always some text next to my icon as you can see below:

      I don't know how, but my icon is placed in the label, and that's not what I want.
      My markup looks like this:
      static protected $markup = array( 'list' => "{out}\n", 'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>", 'item_label' => "<label class=input-group-addon>{out}</label>", 'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>", 'item_content' => "{out}", 'item_error' => "\n<p class='field--error--message'>{out}</p>", 'item_description' => "\n<p class='field__description'>{out}</p>", //.... etc ); and results in this:
      <div class="form-group input-group"> <label class="input-group-addon"> <span> <i class="fa fa-fw fa-envelope" aria-hidden="true"></i> </span> E-Mail </label> <input id="Inputfield_contact_email" name="contact_email" class="form-control InputfieldMaxWidth" type="email" maxlength="512"> </div>  
      and what I want is:
      <div class="form-group input-group "> <span id="contact_form" class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span> <input required="" class="form-control" name="name" id="contact_form" type="text" value="" placeholder="Name"> </div> The only problem is that the code above is hard-coded and I don't know how to remove that piece of text next to my icon....
      Thanks in advance,
      ~Harmen
×
×
  • Create New...