Adding Image in Page Reference Field

[Pip 9]

Hi, Everyone! 

I'm currently working on a page reference field and set it for multiple pages (AsmSelect) for the input. Is there a way for me to add an image field (aka Avatar) and the title of page in the radio button? 

I used the field name enclosed in the { }. Didn't work. It appeared a text instead. 

Thanks in advance and hope to hear from you soon!

[Robin S 7,505]

Welcome to the forums @Pip!

Technically you might be able to use hooks and custom CSS to modify a core Page Reference inputfield such as AsmSelect to include a thumbnail image but it would be quite advanced/challenging.

Instead I suggest you use a third-party inputfield that supports images - see @Macrura's InputfieldSelectize: https://modules.processwire.com/modules/inputfield-selectize/

[kixe 1,141]

9 hours ago, Robin S said:

Technically you might be able to use hooks and custom CSS to modify a core Page Reference inputfield such as AsmSelect to include a thumbnail image but it would be quite advanced/challenging.

... indeed ...

18 hours ago, Pip said:

and the title of page in the radio button? 

For some other page reference inputfields like radio buttons or checkboxes the following hook example could be a first approach. I use it for a field to select a system user. Each label is preceded by a user icon. It should work for checkboxes as well. You need to hook in InputfieldCheckboxes then.
 

$this->addHookBefore('InputfieldRadios::render', function($e) {
    $input = $e->object;
    // quick exit
    if ($input->name != 'clients') return;
    $options = $input->getOptions();
	// $key = page ID
    foreach ($options as $key => &$label)  $label = "<i class='fa fa-user'></i> $label";
    $input->setOptions($options);
});

$this->addHookAfter('InputfieldRadios::render', function($e) {
    // quick exit
    if ($e->object->name != 'clients') return;
    $e->return = wire('sanitizer')->unentities($e->return);
});

 

[Pip 9]

On 5/10/2020 at 8:18 PM, kixe said:

... indeed ...

For some other page reference inputfields like radio buttons or checkboxes the following hook example could be a first approach. I use it for a field to select a system user. Each label is preceded by a user icon. It should work for checkboxes as well. You need to hook in InputfieldCheckboxes then.
 

$this->addHookBefore('InputfieldRadios::render', function($e) {
    $input = $e->object;
    // quick exit
    if ($input->name != 'clients') return;
    $options = $input->getOptions();
	// $key = page ID
    foreach ($options as $key => &$label)  $label = "<i class='fa fa-user'></i> $label";
    $input->setOptions($options);
});

$this->addHookAfter('InputfieldRadios::render', function($e) {
    // quick exit
    if ($e->object->name != 'clients') return;
    $e->return = wire('sanitizer')->unentities($e->return);
});

 

Sorry for the long delay. 

Super new to Processwire. Totally dorking out on the functionalities. It's ah-mazing!

 

So does this mean I have to edit this inside the core itself?

 

[Pip 9]

I'll definitely check this out!  Thank you! Still learning stuff. 😄 Processwire is so fun!

On 5/10/2020 at 10:00 AM, Robin S said:

Welcome to the forums @Pip!

Technically you might be able to use hooks and custom CSS to modify a core Page Reference inputfield such as AsmSelect to include a thumbnail image but it would be quite advanced/challenging.

Instead I suggest you use a third-party inputfield that supports images - see @Macrura's InputfieldSelectize: https://modules.processwire.com/modules/inputfield-selectize/

I'll definitely check this out!  Thank you! Still learning stuff. 😄 Processwire is so fun!

[ottogal 227]

1 hour ago, Pip said:

So does this mean I have to edit this inside the core itself?

You don't want to edit anything in the core - you would loose the modifications with the upgrade to a newer PW version...

[Pip 9]

1 hour ago, ottogal said:

You don't want to edit anything in the core - you would loose the modifications with the upgrade to a newer PW version...

Ok. So  howdo I apply the codes suggested in the previous post then? 

[ottogal 227]

If you opt for using @Macrura's InputfieldSelectize https://modules.processwire.com/modules/inputfield-selectize/
then just follow the steps under "Usage":

Quote

• Install the Module
• Edit your pagefield and choose InputfieldSelectize as inputfield.