Jump to content
Pip

Adding Image in Page Reference Field

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!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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?

 

Share this post


Link to post
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!

Share this post


Link to post
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...

Share this post


Link to post
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? 

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      Page Reference Default Value
      Most ProcessWire core inputfield types that can be used with a Page Reference field support a "Default value" setting. This module extends support for default values to the following core inputfield types:
      Page List Select Page List Select Multiple Page Autocomplete (single and multiple) Seeing as these inputfield types only support the selection of pages a Page List Select / Page List Select Multiple is used for defining the default value instead of the Text / Textarea field used by the core for other inputfield types. This makes defining a default value a bit more user-friendly.
      Note that as per the core "Default value" setting, the Page Reference field must be set to "required" in order for the default value to be used.
      Screenshot

       
      https://github.com/Toutouwai/PageReferenceDefaultValue
      https://modules.processwire.com/modules/page-reference-default-value/
    • By jds43
      Hello, I'm trying to list the categories, on the front through select options, that have been selected by page reference field (multiple pages PageArray) on the child pages.
      Things to Do (would only display three, six, seven, nine in select)
      -thing one (-category three, -category nine)
      -thing two (-category six, -category seven)

      Lodging (would only display one, two, three, four in select)
      -lodging one (-category one, -category two)
      -lodging two (-category three, -category four)

      Dining (would only display five, six, seven, eight in select)
      -dining one (-category five, -category six)
      -dining two (-category seven, -category eight)
      Categories(hidden page)
      -category one
      -category two
      -category there
      -category four
      -category five
      -category six
      -category seven
      -category eight
      -category nine
      -category ten
      $categories = $pages->find(1129)->children('include=hidden'); foreach($categories->references('category') as $ref) { echo $ref->title; } This selector isn't working, but it seems 'references' would be helpful. I've never used it before, so I'm not sure how to employ for this.
      https://processwire.com/blog/posts/processwire-3.0.107-core-updates/#page-gt-references
    • By EyeDentify
      Hello dear PW gurus.

      I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
      There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
      I am running ProcessWire 3.0.153 dev.
      Update:
      After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
      But they don´t show up in the images field in the page editor.
       
      The error reported:
       
      SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

      The TracyDebugger Error reporting:

      I hope you fine folks could point me in a direction.
      But it seems our old pal set_time_limit() is back.

      Regards, EyeDentify
    • By jonatan
      Hi! 😄
      SITE SETUP / DESCRIPTION:
      What? Online art magazine with an "All featured works" and also an "All featured artists" index page, and also individual "Work" and "Artists" pages, and data relations between the different artists and their artworks.
      So, I have two different page reference fields, connected by @Robin S's awesome Connect Page Fields module (though that has nothing to do with the issue in fact, Robin's plugin works great! and the issue is the same with or without it).
      The two Page Reference type fields are called "works" and "artists". They are meant to simply connect different artists to different artworks.
      Fx:
      Work 1  (page)  –> artists (Page Reference field) : Artist A (page)           --->>> (automatically connected)         Artist A (page)  –> works (Page Reference field) : Work 1 (page)
      Work 2  (page) –> artists (Page Reference field) : Artist B  (page)           --->>> (automatically connected)         Artist B (page)  –> works (Page Reference field) : Work 2 (page)
      ISSUE:
      On both Page Reference fields, both on "artists" and on "works" this option "Allow unpublished pages" is activated:

      As it says in the option description, supposedly, unpublished pages should be selectable in the page reference field, but they should not be visible, they shouldn't appear, on the front-end...
      Frontend:
      To show all works related to the artist on the artist individual page I'm doing this:
      <?php foreach($page->works as $item) { echo "<img src='{$item->image->first->width(200)->url}' class='pr-2'><a class='pr-4' href='$item->url'>$item->title</a>"; } The problem is now, unexpectedly, if some work is set to "Unpublished", it shows up anyways!
      WORKAROUND:
      So to get around this I figured out that I can do this:
      <?php foreach($page->works as $item) { if($item->is(Page::statusUnpublished)) { return; }; echo "<img src='{$item->image->first->width(200)->url}' class='pr-2'><a class='pr-4' href='$item->url'>$item->title</a>"; } But ofc this is a rather inelegant "solution" which shouldn't really be necessary, right? 
      I might be missing something basic here, but really can't figure out what it is... I hope one of you awesome guys can help me out 😊
      Thanks a lot in advance!
      All the best,
      Jonatan
    • By DV-JF
      Hey all, hope you're feeling well these days!
      Short question: Under "Setup > Templates" it's possible to sort the templates by last modified. Is this possible for fields view to?
      Long explanation:
      Currently I am in the process of programming a reusable template and often have to copy several fields & templates from different PW installations into my "master version".
      Therefore it would be good to see already in the field list when the last modification has taken place.
      Stay healthy & don't forget to wash you hands - many greets!
×
×
  • Create New...