Visual Page Selector (commercial page picker module for ProcessWire)

Recommended Posts

Visual Page Selector

Released 31 March 2016


As of 04 January 2018 ProcessWire versions earlier than 3.x are not supported
*******************************************************   ORIGINAL POST   *******************************************************

Introducing VPS, a commercial visual page field selector. 

This is a pre-sale closed-beta version. This post is WIP and will be updated now and then.


Many ProcessWire users use the 'one image per page' principle to manage and reuse images across their sites. This works fine. However, for site editors who mainly work with images, especially for larger sites, it is sometimes difficult to remember the pages where particular images reside. This module helps to solve this challenge.

Harnessing the awesomeness  that is ProcessWire, VPS provides a rich editing experience, enabling editors to search for, view, select, add, remove and delete page-images easily, in an easy to use and friendly interface. ProcessWire Lister is the workhorse behind the lightning-fast searches. Editors will be able to search for images by their descriptions, names, partial names, page names, templates, etc. 

Current Features

  1. Single-image mode
  2. Full search
  3. Batch add/Remove/Delete Image/Delete Page in page fields
  4. Image Browser
  5. Selectable pages as per page field settings + Lister filters
  6. Grid and List View
  7. Draggable sorting
  8. Responsive (almost fully :-)..iframes!)

Planned Features

  1. Multi-image mode (there are times you want to group similar images in multi-image field in one page; e.g. the back, front and side of a car photo)
  2. Configurable CSS on the fly resizing vs real image resizing (image resizing can quickly hog memory)
  3. Other as per feedback from beta testing


When will this be available? 


How much will it cost?

Reasonably priced. Announcement soon.

Where will I be able to buy this from?

At all fine stores that stock quality ProcessWire products :-)

Do we really need another page field/inputfield select?

See links below.

What type of licenses will be available?

Soon to be announced.

Can I beta test this?

Thanks for the interest but all available slots have been taken.

Video (excuse the video quality please - too many takes....)









Previous Discussions


Edited by kongondo
ProcessWire 3.x support only
  • Like 21

Share this post

Link to post
Share on other sites

Yesssss, I am so excited about this. :D This was the only real stumbling block to using PW for a bunch of projects.

  • Like 1

Share this post

Link to post
Share on other sites

support only pages with single image only?

How about multiple images of a page ?

Planned Features

  • Multi-image mode (there are times you want to group similar images in multi-image field in one page; e.g. the back, front and side of a car photo)

:)  ;)

  • Like 1

Share this post

Link to post
Share on other sites
Visual Page Selector (VPS) module demo and documentation (coming soon)

For now, please refer to the README.txt file in your VPS folder

Would you mind making the README available to prospective purchasers? Likewise the README for Media Manager?

Share this post

Link to post
Share on other sites

Can do, and was gonna do it but thought it is easier for guys to watch the demo videos (as I finish the documentation...)...to understand what's going on :-)

Share this post

Link to post
Share on other sites

Hi all,

I'm going to be away for the next couple of weeks (4-5 weeks possibly) with little if any access to the internet. I will deal with any queries on my return.


Share this post

Link to post
Share on other sites

I am back. Might be a while before I go through all pending issues.

On 24/08/2016 at 0:46 PM, gerritvanaaken said:

I get an error message because there is no fancybox present in PW 3.0 ...

@gerritvanaaken. The module is not yet PW 3+ ready...but it will be once we have a stable release of that version of PW, thanks.

Share this post

Link to post
Share on other sites

Hi @kongondo

I have a few pre-purchase questions:

1. Is a PW3-compatible version of Visual Page Selector very far off? How about Media Manager - is that PW3-compatible?

2. Could you say a bit about how the use cases would differ for Visual Page Selector versus Media Manager? They seem similar in many ways (or similar in terms of image management - I know that MM supports more than just images).

3. Media Manager includes an upload feature to go from image files on my computer to page-per-image pages in PW. Does Visual Page Selector have a similar upload feature? If not, how do you recommend images are loaded to pages?

4. One of the main things that appeals to me about the page-per-image approach used in VPS/MM is the ability to add custom fields to the page used to hold the image. But I saw that you commented in the MM thread:

On 8/08/2016 at 0:57 AM, kongondo said:

Custom fields: Yes if you add them directly to the templates but you will not be able to edit those custom fields using the MM interface. In addition, MM pages are hidden in the admin so editing your custom fields will not be ideal (or accessible to normal users). Alternatively, you can use images/files native description and tag fields. These are currently editable directly in your Media Library.

So would VPS be a better option if the editing of custom fields is needed?

5. The demo video for VPS doesn't show if the page holding the image may be opened for editing from the VPS field. In other words, can I click the thumbnail or image title and open the page? Does it open in a modal window?


  • Like 1

Share this post

Link to post
Share on other sites

Hi @Robin S,

Thanks for your interest in VPS and MM.

  1. My plan is for these to be ready within 3 weeks. However, some users of MM have reported successfully using it in PW 3 with no hiccups. 
  2. @see below please
  3. No, VPS does not have an upload feature since it functions as a 'normal' page field...i.e. it does not have a central repository of media but includes images you've uploaded yourself to any number of named image fields (named in the settings of VPS
  4. Custom fields: Yes, VPS would be better in that case, although the other benefits of MM probably outweigh this one advantage
  5. No, you can't, currently

#2 Differences between VPS and MM

Media Manager is a complete digital asset management for 4 types of media: audio, document, image and video. Media are stored and managed in one central repository. Uploading, editing and publication of media are tightly controlled by various permissions. Media can be uploaded to a waiting area before uploading to your Media Library. Media can be previewed (e.g. listen to a MP3 file), edited, tagged, filtered, etc with great ease. Media can be inserted in a page in two ways: in a field or in a CKEditor RTE. Media can be infinitely reused across your site. Media Manager has its own API for frontend use.

Visual Page Selector is mainly targeted to those who 'consciously' use  the one page per image approach. It is an Inputfield for Pagefields. Its purpose is to remove the guess work in site editors' minds when they have to include 'pages' in a 'page' in situations where those 'pages' are included on the 'page' for the sole purpose of accessing and reusing images found in those 'pages' (wow, a mouthful, sorry!). VPS does this by offering a visual selector where the editors can see the images contained in those 'pages'.  VPS does not have its own API...it is a Pagefield, hence is accessed like any other Pagefield in ProcessWire.

Hence, the two modules are quite different from each other actually. In MM, your editors don't know and don't care that they are actually dealing with pages. All they see are media, easily accessible via a single Media Library. VPS is a visual interface to a normal Pagefield. This means you will need to set it up like any other Pagefield, with one or two extra details you have to tell it, for instance, the name of the 'image field(s) in the 'pages'. If, on the other hand, you would like a streamlined workflow for your media management, from uploads to inclusion in pages, managing tens or hundreds or thousands of media, all in a single easy to use interface, then MM is for you. 


Hope this answers your question. Sorry, I have just seen that I never availed the READMEs for this modules as per your request. I can still send these to you if you wish. Please let me know if you require any more info. 




  • Like 2

Share this post

Link to post
Share on other sites

Thanks for the answers @kongondo.

Both Media Manager and Visual Page Selector look like useful and clever modules, although the cost/features ratio favours MM.

I think what would be really fantastic is something in between the feature set of MM and VPS, and this could perhaps be accomplished by borrowing some of the features developed for MM into VPS.

To explain, something I think PW is missing is custom fields for images (and I'm not alone: this GitHub request from today has 4 upvotes in 2 hours). There are loads of use cases for this, but one example: you are using images in your site that have a Creative Commons Attribution license. To fulfill the terms of the license each image needs the following fields attached: Author (text), Source link (URL), License (Page select), License link (URL, although in fact you'd probably store the URL for each license in the License page field). The ImageExtra module only supports textarea custom fields so it's not the right solution. What would work is a page-per-image approach with the custom fields for the image stored in the image's page. VPS is a big step towards making this a workable solution, but to use this as a replacement for a standard image field some extra features are needed beyond what is currently offered...

1. There needs to be an easy way to edit the image's custom fields from the Page inputfield. A modal link to Page Edit is all that's needed to begin with - this is something that's possible with existing inputfields such as AsmSelect. Somewhere down the line this could maybe be enhanced with AJAX loading of the custom fields into the list view of VPS, as per repeaters (just dreaming here).

2. There needs to be an easy way to add an image (page) from the inputfield. This is possible with most existing Page inputfields if the template and parent for allowed pages is defined. Basic support for this would be to open the Add Page form in a modal (the Page Field Edit Links module does something like this). But to be a closer match to existing image field functionality it would be nice to be able to upload multiple images at once. This feature is in MM - could it be added to VPS? (when template and parent are defined for the field).

3. There needs to be an easy way to embed an image into CKEditor. This feature is in MM - could it be added to VPS?

Really keen to hear your thoughts on this. Thanks!


  • Like 5

Share this post

Link to post
Share on other sites

Hi @Robin S,

Just acknowledging that I've seen this. Really pressed for time currently but would like to give a comprehensive answer, so hope you can wait a bit longer? In summary though, I think I might be able to add some of the features you've suggested (though some might take a while...a long while to implement). My biggest constraint is time (cliche, I know) though,...not lack of willingness :)


  • Like 1

Share this post

Link to post
Share on other sites

Thanks for the reply; no hurry at all.

Am currently getting by using PageTable for page-per-image images, and when I get time I will explore Inputfield Selectize also as that looks like it would be good for the task.

One last question for now: do you offer an upgrade path for your commercial modules? That is, if I purchase a Single license and find that I love it and want to use it on all my projects can I pay an upgrade fee to move to a Developer license?


Share this post

Link to post
Share on other sites
1 hour ago, Robin S said:

One last question for now: do you offer an upgrade path for your commercial modules? That is, if I purchase a Single license and find that I love it and want to use it on all my projects can I pay an upgrade fee to move to a Developer license?


Yes I do. You'd only have to pay the difference. You'd have to send me an email to arrange that. Thanks.

  • Like 1

Share this post

Link to post
Share on other sites

Hi Kongondo, i'm looking for a popup page selector, that would show the pages in a lister – but in my case sometimes no image is needed, only the list - is that something that VPS can do, or could it be something made configurable for the module;  Out of all of the various page pickers, one that i seem to be in need of is a lister style popup, which could be very useful where you have to select a page, but need to see some columns to know what you are picking, and the ability to sort, and filter the selectable pages...

  • Like 1

Share this post

Link to post
Share on other sites

Hi @Macrura,

Sorry for the very late response. Currently, VPS cannot do that. However, if you want a custom solution based on VPS, we could discuss that separately. 

Share this post

Link to post
Share on other sites

ok thanks, i will send a message....

Share this post

Link to post
Share on other sites

Quick note for those following this. As per @Macrura's request above, VPS has received a major upgrade; It can now be used as a normal page field pages' selector or in a 'one-page-per-image' strategy as before. Working on the final release now. Hope to release next week.

  • Like 6

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 usualCommission
      Hi everyone. I just completed first draft work on a module that I wrote. It creates a page for a user with a specified role when a user admin page is saved. I'm sure it could use some more work and would like any feedback on implementation, code quality, and any better utilization of the PW API.
      The problem I aimed to solve is that we are using the fantastic MarkupBlog module and wanted a way to easily specify an author for a post when the person who created the page is not the author we want shown on the post (example: one blog author ghostwriting for another blog author). This module allowed me to create a blog-author role and on user admin save create a page under the "Authors" page in the tree. After that each blog post gets a page select field that lists the Authors page children for selection.
      More detail:
      If a user is deleted from the CMS, their page remains in the page tree. This is to prevent problems if there are other pages that depend on that page. A hidden field is added to the User admin page that holds the id for the page created. When creating a page for a user, it checks if there is a page already created with that user's name- if it is, that page is used and the hidden field is updated with that page's ID. If a user's page is deleted from the tree, a new page is created on user admin save and the hidden ID field is updated with the new ID. Module installs and uninstalls properly including adding and removing the hidden ID field from the User system template. The module settings allow for choosing more than one role to create pages. Again since this is my first rodeo with ProcessWire module development I would love feedback and critique. The code is available here:

    • By dadish
      NOTE: This thread originally started in the Pub section of the forum. Since we moved it into the Plugin/Modules section I edited this post to meet the guidelines but also left the original content so that the replies can make sense.  
      ProcessGraphQL seamlessly integrates to your ProcessWire web app and allows you to serve the GraphQL api of your existing content. You don't need to apply changes to your content or it's structure. Just choose what you want to serve via GraphQL and your API is ready.
      Warning: The module supports PHP version >= 5.5 and ProcessWire version >= 3.
      Zip Download Github Repo ScreenCast PW modules Page Please refer to the Readme to learn more about how to use the module.
      Original post starts here...
      Hi Everyone! I became very interested in this GraphQL thing lately and decided to learn a bit about it. And what is the better way of learning a new thing than making a ProcessWire module out of it! 
      For those who are wondering what GraphQL is, in short, it is an alternative to REST. I couldn't find the thread but I remember that Ryan was not very happy with the REST and did not see much value in it. He offered his own AJAX API instead, but it doesn't seem to be supported much by him, and was never published to official modules directory. While ProcessWire's API is already amazing and allows you to quickly serve your content in any format with less than ten lines of code, I think it might be convenient to install a module and have JSON access to all of your content instantly. Especially this could be useful for developers that use ProcessWire as a framework instead of CMS.
      GraphQL is much more flexible than REST. In fact you can build queries in GraphQL with the same patterns you do with ProcessWire API.
      Ok, Ok. Enough talk. Here is what the module does after just installing it into skyscrapers profile.

      It supports filtering via ProcessWire selectors and complex fields like FieldtypeImage or FieldtypePage. See more demo here
      The module is ready to be used, but there are lots of things could be added to it. Like supporting any type of fields via third party modules, authentication, permissions on field level, optimization and so on. I would love to continue to develop it further if I would only know that there is an interest in it. It would be great to hear some feedback from you. I did not open a thread in modules section of the forum because I wanted to be sure there is interest  in it first.
      You can install and learn about it more from it's repository. It should work with PHP >=5.5 and ProcessWire 3.x.x. The support for 2.x.x version is not planned yet.
      Please open an issue if you find bugs or you want some features added in issue tracker. Or you can share your experience with the module here in this thread.
    • By kongondo
      Pages Export
      This module is for specifically exporting ProcessWire 2.x sites for later importing into ProcessWire 3.x.
      Github: Project Page
      Modules Directory: Pending
      Credits: Ryan Cramer
      As I make my modules ProcessWire 3.x-compatible only, I've had the need to re-create/mirror their ProcessWire 2.x test sites in respective ProcessWire 3.x sites. These ProcessWire 3.x sites (one for each module) were already in place and I didn't feel like re-doing them by exporting/importing site profiles. I also like working with JSON rather than other export formats. So, I decided to write a custom pages export/import script for moving the ProcessWire 2.x sites to their respective ProcessWire 3.x counterpart sites. I'd just finished the export side of things when I came across a post in the forums that reminded me that ProcessWire 3.x already boasts a pages export/import feature, although some of it is still in development. Great! I like its API (PagesExportImport.php) and GUI (ProcessPagesExportImport.module) so no need to re-invent the wheel. 
      I still had the small problem of making sure my JSON export would be compatible with the JSON input that the ProcessWire 3.x import expects. No need to re-invent the wheel, again! I ditched my custom script and instead ported the export functionalities of ProcessWire 3.x Pages Export/Import for use in ProcessWire 2.2 - 2.7, specifically to help migrate older sites to ProcessWire 3.x.
      The module and class have been tested and work in ProcessWire 2.2, 2.3, 2.4, 2,5, 2.6 and 2.7.  The module is currently tagged as 'in development' until Pages Import feature of ProcessWire 3.x is released as stable. Nonetheless, I have not encountered any issues so far in either the export or the ProcessWire 3.x import. I think Ryan is waiting until he can support more complex field types before tagging the ProcessWire 3.x Pages Export/Import as production-ready.
      This is not a ProcessWire 3.x module and will never be. It has no such need . Just in case you forget and try to install it in a ProcessWire 3.x site, the module will throw a WireException(). I will also not be porting the ProcessWire 3.x import functionality for use in ProcessWire 2.x. That will defeat the purpose here; to move sites to ProcessWire 3.x and not the other way round.
      Supported Fields
      All non-complex fields such as integer, text, textarea, etc Page fields Repeaters File and Image fields I think these cover most needs. Note: not yet tested with Multilingual fields.
      To ensure exports will be compatible with ProcessWire 3.x Pages Import, where necessary, the module borrows (and amends as needed) methods from ProcessWire 3.x for use in ProcessWire 2.x. For instance, ProcessWire 3.x Pages Export/Import uses the new(-ish) $file functions found in WireFileTools. Rather than copy and include such files, the module only borrowed and amended needed methods. These are listed below.
      From /wire/core/Functions.php: wireInstanceOf(), wireClassName() and wireClassParents() From /wire/core/Fieldtype.php: getImportValueOptions() and getDatabaseSchema() From /wire/core/WireFileTools.php: zip(), chmod() and mkdir() From /wire/core/WireHttp.php: sendFile From /wire/modules/Fieldtype/FieldtypeFile.module: exportValue() and exportDescription() From /wire/modules/Fieldtype/FieldtypeImage.module: exportValue() From /wire/modules/Fieldtype/FieldtypePage.module: exportValue() and exportValuePage() From /wire/modules/Fieldtype/FieldtypeRepeater.module: exportValue() From /wire/core/Fieldtype/WireTempDir.php: create(), createName() and getTempDir() All the export methods from the /wire/core/PagesExportImport.php class ProcessPagesExport.module
      All the export methods from /wire/modules/process/ProcessPagesExportImport/ProcessPagesExportImport.module Newer methods such as $this->wire() will gracefully degrade to the older wire() function, ensuring smooth and uniform operation in ProcessWire 2.2  - 2.7.
      This module and class is for supersusers only and has only 1 aim; to export ProcessWire 2.x sites ready for importing into ProcessWire 3.x sites. You can either install (like any other module) and use the process module (ProcessPagesExport.module) or skip the install and just include and use the class (PagesExport.php) to export your sites.
      Both the module (Export GUI) and API require that you are logged in as a supersuser before you can use them. The PagesExport class has a gateway method and option not found in the original class (PagesExportImport). The method export() allows access to the three export methods in the original class, i.e. pagesToArray(), exportJSON() and exportZip(). See example usage below.
      GUI/Process Module
      On install, the module will create a new admin page Export Pages. Please note that unlike the original code, this page is created directly under /admin/ and not /admin/pages/. Click on Export Pages to start.
      Nothing much has changed from the original ProcessPagesExportImport.
      In older ProcessWire versions where InputfieldSelector was not available, the module will instead present you with a text input to specify a valid (for that version of ProcessWire!) selector for finding pages. The other two methods for adding pages (add pages manually or add by parent) are still available.
      Custom JS ensures older installs without showIf functionality still get the inputfield dependency treatment.
      export($items, $options) 
      PageArray $items: The PageArray to export.
      Array $options: In addition to the options in the original class that you can pass to pagesToArray(), there are two more options here. mode to specify the export type (array or json or zip) and fieldNamesExclude, to specify fields to exclude from the export. Note that the original class option fieldNames still works. It's for specifying the fields to include in the export.
      // API USAGE // get and include PagesExport class /* @note: you'll need to include the path differently if you are using the class directly without installing the Process module */ $path = $config->paths->ProcessPagesExport . 'PagesExport.php'; require_once($path); // create new instance of the class $siteExport = new PagesExport(); // find items to export /* a. export whole site! (minus admin and children) careful! in some cases, better to export in batches */ //$items = $pages->get('/')->find('has_parent!=2'); // export a batch of pages $items = $pages->find('template=basic-page|computer'); /* you could also use these methods directly #$data = $siteExport->pagesToArray($items); #$data = $siteExport->exportJSON($items); #$data = $siteExport->exportZIP($items); */ $options = array( // @kongondo addition: export to screen as 'array' or 'json' OR export to zip // zip will be saved in /site/assets/backups/PagesExport/ 'mode' => 'array',// array or json or ZIP // export only these field names, when specified 'fieldNames' => array('images', 'files', 'multi_pages'), // @kongondo addition: exclude fields from export. Here we exclude 'body' field 'fieldNamesExclude' => array('body'), ); // get the export $data = $siteExport->export($items, $options); if(is_array($data)) { echo '<pre> EXPORTED SITE USING pagesToArray '; print_r($data); echo '</pre>'; } // JSON export else echo $data; Screenshots
      See also the links to Ryan's blog posts above.
      ProcessWire 2.2

      ProcessWire 2.4

      ProcessWire 2.5

      ProcessWire 2.7

      Video Demo
      (Sorry, long and boring) 
      Demo shows various exports from ProcessWire 2.x and their importing into ProcessWire 3.x. Remember the old Skyscrapers site profile? See how a whole Skyscrapers site gets exported from a ProcessWire 2.7.3 site and imported into a ProcessWire 3.x starting from here.
    • By flydev
      Originaly developped by Jeff Starr, Blackhole is a security plugin which trap bad bots, crawlers and spiders in a virtual black hole.
      Once the bots (or any virtual user!) visit the black hole page, they are blocked and denied access for your entire site.
      This helps to keep nonsense spammers, scrapers, scanners, and other malicious hacking tools away from your site, so you can save precious server resources and bandwith for your good visitors.
      How It Works
      You add a rule to your robots.txt that instructs bots to stay away. Good bots will obey the rule, but bad bots will ignore it and follow the link... right into the black hole trap. Once trapped, bad bots are blocked and denied access to your entire site.

      The main benefits of Blackhole include:
       Bots have one chance to obey your site’s robots.txt rules. Failure to comply results in immediate banishment.
      Disable Blackhole for logged in users Optionally redirect all logged-in users Send alert email message Customize email message Choose a custom warning message for bad bots Show a WHOIS Lookup informations Choose a custom blocked message for bad bots Choose a custom HTTP Status Code for blocked bots Choose which bots are whitelisted or not  
      Install the module Create a new page and assign to this page the template "blackhole" Create a new template file "blackhole.php" and call the module $modules->get('Blackhole')->blackhole(); Add the rule to your robot.txt Call the module from your home.php template $modules->get('Blackhole')->blackhole();  Bye bye bad bots!

      https://github.com/flydev-fr/Blackhole http://modules.processwire.com/modules/blackhole/  


    • By Robin S
      I got tired of having to open the link dialog in CKEditor in order to check where a link is pointing to, so made this simple plugin.
      Link Hover
      A plugin for CKEditor. Shows the href attribute of a link in a tooltip when the link is hovered. This saves you from having to open the link dialog in order to check where a link points to.

      This readme assumes installation in ProcessWire CMS.
      The plugin folder must be named "linkhover" – if necessary, rename the folder to remove the "-master" suffix added by GitHub. Copy the "linkhover" folder to /site/modules/InputfieldCKEditor/plugins/
      In the field settings for each CKEditor field that you want to activate the plugin for, check the "linkhover" checkbox at Input > Plugins > Extra Plugins