Jump to content
sambadave

Custom look for page reference field select, radio or checkbox etc

Recommended Posts

Hi everyone, here's the problem I'm trying to solve.

I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this:

ADMIN SETUP

  • Home
    • Config
      • Aesthetics
        • Colours
          • Red
            • Field: Custom Label - "Red"
            • Field: Class name - "theme--red'
          • Green
            • Field: Custom Label - "Green"
            • Field: Class name - "theme--green'
          • Blue
            • Field: Custom Label - "Blue"
            • Field: Class name - "theme--blue'
          • etc...
        • Sizes
          • Small
            • Field: Custom Label - "Small"
            • Field: Class name - "sm'
          • Medium
            • Field: Custom Label - "Medium"
            • Field: Class name - "md
          • Large
            • Field: Custom Label - "Medium"
            • Field: Class name - "lg"
          • etc...
        • Icons
          • Target
            • Field: Custom Label - "Hands shaking Icon"
            • Field: Icon SVG - "[svg code]'
          • Target
            • Field: Custom Label - "Target icon"
            • Field: Icon SVG - "[svg code]'
          • Success
            • Field: Custom Label - "Happy face icon"
            • Field: Icon SVG - "[svg code]'
          • etc...

HOW I USE THIS

I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page.

This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc.

THE PROBLEM

I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client.

Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so:

  • Navy Blue
  • Deep Blue
  • Bright Blue
  • Sea Blue

... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client.

Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like:

  • Hands shaking icon
  • Target icon
  • Happy face icon

Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection.

ANY SOLUTIONS?

I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above.

Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned?

Thank you in advance for anyone who's read this far and has any words of wisdom!

Dave

 

Share this post


Link to post
Share on other sites

I have the same need and I was planning to use RunTimeMarkup module in some way to accomplish this. The difference is that I have these settings on my ProFieldMatrix content blocks instead.

Didn't do it yet though, as I have to finish other things first on the project. But If you give it a try, let me know how was it.

 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks @Sergio

I kind of understand how that module works now after a quick skim through. I'm not quite sure how I would go about using that to create a selectable list though. Apologies, my PHP knowledge isn't brilliant. I was hoping that I'd be able to somehow open up the paramenters for the "Custom Page Label Format" on the "Input" tab of the speific page reference field to somehow allow me to add additional php and/or html markup within that, wrapped around the particular field values that I wish to use?

Do you think something like that is achievable?

Share this post


Link to post
Share on other sites

Hi @sambadave,

if the available solutions do not fit, you can modify the markup of any field as you want quite easily. One option is the Inputfield::render hook. First, start with a general hook to check if everything works:

// /site/ready.php
$wire->addHookAfter("Inputfield::render", function(HookEvent $event) {
  bd('fired');
});

You should get lots of dumps when opening your page (using TracyDebugger of course):

qz71lcO.png

Make it conditional to only fire for your field and change the class to InputfieldSelect to be more specific:

$wire->addHookAfter("InputfieldSelect(name=availability)::render", function(HookEvent $event) {
  bd('fired');
});

It will fire only once:

vihe6n5.png

The HTML is in the "return" property of the $event:

$wire->addHookAfter("InputfieldSelect(name=availability)::render", function(HookEvent $event) {
  bdb($event->return);
});

hGo89KT.png

You can then modify this html like this:

$wire->addHookAfter("InputfieldSelect(name=availability)::render", function(HookEvent $event) {
  $html = $event->return;
  $html = str_replace("value='1'", "value='1' style='background: red; color: white;'", $html);
  $html = str_replace("value='2'", "value='2' style='background: blue; color: white;'", $html);
  $html = str_replace("value='3'", "value='3' style='background: green; color: white;'", $html);
  $event->return = $html;
});

JSMLxLM.png

For more complex modifications it's better to hook the field before it get's rendered (search the forum via google for ProcessPageEdit::buildForm). You can also see https://github.com/BernhardBaumrock/TemplatePreviewImages for a simple example of modifying inputfields and applying an additional library.

  • Like 8

Share this post


Link to post
Share on other sites

Thanks for such a detailed explanation @bernhard that's new to me and will definitely come in handy.

I guess if I was to do this then I'd have to update the hook for any new select options though. If I had a set of 50 icons, 10 colours etc it could end up being quite a chore updating the hook file every time. Correct me if I'm wrong here though.

Ideally, I'd like to set up the config area so that other admins that aren't necessarily coders, could add new options through the CMS. The beauty of the page reference select list is being able to select a parent page and show the children as options in a select box/radio/checkbox etc... so if you add a new option through PW admin the list just updates automatically.

I'm sure there's a solution to this as is always the case with PW.

Thanks again.

Share this post


Link to post
Share on other sites

Inputfield Selectize is the way to go.. it can do basically anything... here's a screenshot example; colors, icons all no problem..selectize_ex.jpg.85ec67792bdc5e89b31092990e144b79.jpg

  • Like 4

Share this post


Link to post
Share on other sites

wow, thx, totally missed/forgot that one! 😮 

Share this post


Link to post
Share on other sites

yeah for selecting icons there is a version of FieldtypeFontIconPicker floating around somewhere (possibly not the one in the directory) that works really well, will gave to dig that one up..

Edit - this is the one i use for icons, thanks to @OLSA

 

  • Like 3

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 Pip
      Hi everyone, 
      Is there a way for us to replicate the "http://mydomain.com/processwire/page/edit/?id=xxx" and change the template to match my site template? 
      I'm terribly happy with the admin / backend page edit. It covers literaly everything I want to empower my non super admin user in updating pages such as validation, repeater management, file upload. 
      I wish not to allow the users to see the backend for both security and aesthetic reasons. 
      Thanks and hope to hear from you soon. 
       
    • By Flashmaster82
      Is it possible to just show a list (page reference) but without any radio buttons? Or a drop down but the references is not selectable? The items needs to be references but the main thing is that its just a list. Please help!

    • 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 Robin S
      A new module that hasn't had a lot of testing yet. Please do your own testing before deploying on any production website.
      Custom Paths
      Allows any page to have a custom path/URL.
      Screenshot

      Usage
      The module creates a field named custom_path on install. Add the custom_path field to the template of any page you want to set a custom path for. Whatever path is entered into this field determines the path and URL of the page ($page->path and $page->url). Page numbers and URL segments are supported if these are enabled for the template, and previous custom paths are managed by PagePathHistory if that module is installed.
      The custom_path field appears on the Settings tab in Page Edit by default but there is an option in the module configuration to disable this if you want to position the field among the other template fields.
      If the custom_path field is populated for a page it should be a path that is relative to the site root and that starts with a forward slash. The module prevents the same custom path being set for more than one page.
      The custom_path value takes precedence over any ProcessWire path. You can even override the Home page by setting a custom path of "/" for a page.
      It is highly recommended to set access controls on the custom_path field so that only privileged roles can edit it: superuser-only is recommended.
      It is up to the user to set and maintain suitable custom paths for any pages where the module is in use. Make sure your custom paths are compatible with ProcessWire's $config and .htaccess settings, and if you are basing the custom path on the names of parent pages you will probably want to have a strategy for updating custom paths if parent pages are renamed or moved.
      Example hooks to Pages::saveReady
      You might want to use a Pages::saveReady hook to automatically set the custom path for some pages. Below are a couple of examples.
      1. In this example the start of the custom path is fixed but the end of the path will update dynamically according to the name of the page:
      $pages->addHookAfter('saveReady', function(HookEvent $event) { $page = $event->arguments(0); if($page->template == 'my_template') { $page->custom_path = "/some-custom/path-segments/$page->name/"; } }); 2. The Custom Paths module adds a new Page::realPath method/property that can be used to get the "real" ProcessWire path to a page that might have a custom path set. In this example the custom path for news items is derived from the real ProcessWire path but a parent named "news-items" is removed:
      $pages->addHookAfter('saveReady', function(HookEvent $event) { $page = $event->arguments(0); if($page->template == 'news_item') { $page->custom_path = str_replace('/news-items/', '/', $page->realPath); } }); Caveats
      The custom paths will be used automatically for links created in CKEditor fields, but if you have the "link abstraction" option enabled for CKEditor fields (Details > Markup/HTML (Content Type) > HTML Options) then you will see notices from MarkupQA warning you that it is unable to resolve the links.
      Installation
      Install the Custom Paths module.
      Uninstallation
      The custom_path field is not automatically deleted when the module is uninstalled. You can delete it manually if the field is no longer needed.
       
      https://github.com/Toutouwai/CustomPaths
      https://modules.processwire.com/modules/custom-paths/
×
×
  • Create New...