Jump to content

Adding Image in Page Reference Field


Pip
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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/

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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? 

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

×
×
  • Create New...