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 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!
    • By Flashmaster82
      Hi, can you guys help a beginner with a problem..
      On my template (profile_page) i have a dropdown (page reference) where i can choose a sports team (team_page) that is related to that profile which is also its parent. Then on my Competition1 page (competition_page) I have page reference field (profiles) a dropdown that i want to display only profiles that has choose a specific sports team (template=team_page) the page parent to be specific.
      Structure/Template
      Sports_team1 (team_page)
           Profile1 (profile_page)
           Profile2 (profile_page)
           Profile3 (profile_page)
           Competition1 (competition_page)
       
      ready.php
      <?php $wire->addHookAfter('InputfieldPage::getSelectablePages', function($event) { if($event->object->hasField == 'profiles') { $relative = $page->parent->name; $event->return = $event->pages->find("template=profile_page, sports_team=$relative"); } }); ?> This returns with no results in the dropdown. If i remove sports_team=$relative then it displays all profiles that have profile_page as template, so it works almost. But i will have more sports teams so this is just an example. I only want to display the profiles that has choosen the parent team on there profile page in admin not front end.
      I hope i was able to explain it so you guys can understand a little bit. Need some help please! /Thanks
       
       
×
×
  • Create New...