kongondo

Visual Page Selector (commercial page picker module for ProcessWire)

Recommended Posts

kongondo    5,014

Visual Page Selector

Released 31 March 2016

https://processwireshop.pw/plugins/visual-page-selector/

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

FAQs

When will this be available? 

Soon.

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


Screens

post-894-0-74508200-1443695262_thumb.png

post-894-0-08547400-1443695199_thumb.png

post-894-0-57554100-1443696381_thumb.png

post-894-0-91846400-1443695208_thumb.png

post-894-0-93252500-1443695213_thumb.png

post-894-0-23311500-1443695244_thumb.png

Previous Discussions

https://processwire.com/talk/topic/10927-wishlist-select-pages-by-thumbnail/

Edited by kongondo
official release
  • Like 21

Share this post


Link to post
Share on other sites
kongondo    5,014

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
Robin S    2,502
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
kongondo    5,014

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
kongondo    5,014

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.

Thanks

Share this post


Link to post
Share on other sites
kongondo    5,014

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
Robin S    2,502

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?

Thanks,
Robin.

  • Like 1

Share this post


Link to post
Share on other sites
kongondo    5,014

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. 

Cheers.

 

 

  • Like 2

Share this post


Link to post
Share on other sites
Robin S    2,502

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 4

Share this post


Link to post
Share on other sites
kongondo    5,014

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
Robin S    2,502

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
kongondo    5,014
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
Macrura    2,142

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
kongondo    5,014

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
kongondo    5,014

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 kongondo
      The Module Blog for ProcessWire replicates and extends the popular Blog Profile.
      Blog is now in version 2.
      Please read the README in the Github link below in its entirety before using this module 
      Blog Documentation is here (Work in Progress!)
      See this post for new features in version 2 or the readme in GitHub.
      To upgrade from version 1, see these instructions.
      ##################################################
      Most of the text below refers to Blog version 1 (left here for posterity). 
       
      Blog version 1 consists of two modules:
      ProcessBlog: Manage Blog in the backend/Admin.
      MarkupBlog: Display Blog in the frontend.
      Being a module, Blog can be installed in both fresh and existing sites. Note, however, that presently, ProcessBlog is not compatible with existing installs of the Blog Profile. This is because of various structural and naming differences in respect of Fields, Templates, Template Files and Pages. If there is demand for such compatibility, I will code a separate version for managing Blog Profile installs.
      In order to use the 'Recent Tweets Widget', you will need to separately install and setup the module 'MarkupTwitterFeed'.
      Please read the README in the Github link below in its entirety before using this module (especially the bit about the Pages, etc. created by the module). 
      I'll appreciate Beta testers, thanks! Stable release works fine.
      Download
      Modules Directory: http://modules.processwire.com/modules/process-blog/
      Github: https://github.com/kongondo/Blog
      You can also install from right within your ProcessWire install.
      Screenshots (Blog version 1)

      Video Demos
      ProcessBlog
      MarkupBlog
      Credits
      Ryan Cramer
      The Alpha Testers and 'Critics' 
      License
      GPL2
    • By bernhard
      hi everybody,
      this is a preview of a module that i'm working on for quite a long time. I needed it for an intranet office management application that i'm still working on. It makes it very easy to create very customized Datatables using the awesome jquery datatables plugin (www.datatables.net)
       
      EARLY ALPHA release!
      It's very likely that there will lots of changes to this module that may cause breaking your implementations.
       
      Module source
      sorry, removed as it changes too frequently; closed alpha - contact me if you think you can contribute
       
       
      Remarks:
      The module is intended to be used on the backend. Loading styles is at the moment only done via adding files to the $config->styles/scripts arrays. Also the communicaton to javascript is done via the $config->js() method that is built into the admin and would have to be implemented manually on frontend use. But it would not be difficult of course
      Installation:
      Nothing special here, just download + install
       
      edit: removed some parts, because i made a complete rewrite of the module! (see last posting in the thread)
       
      Customization example:
      in the screencast you see an example that i'm using in a process module. i put the table inside an InputfieldMarkup just to have the same look&feel all around the admin. you see that you could also use this module to create tables quickly and easily using @kongondo s runtime markup module.
      complete PHP code:
      $this->headline('Kundenliste'); $form = $modules->get('InputfieldForm'); // init datatables module $dt2 = $modules->get('RockDataTables2'); // setup columns // name $col = new dtCol(); $col->name = 'name'; $col->title = 'Name'; $col->data = function($page) { return $page->title; }; $dt2->cols->add($col); // type $col = new dtCol(); $col->name = 'type'; $col->data = function($page) { return $page->rockcontact_type->title; }; $dt2->cols->add($col); // modified $col = new dtCol(); $col->name = 'modified'; $col->data = function($page) { $obj = new stdClass(); $obj->timestamp = $page->modified; $obj->display = date('d.m.Y', $page->modified); return $obj; }; $dt2->cols->add($col); // setup table $dt2->id = 'dt_kundenliste'; $dt2->js('/site/modules/ProcessRockProjects/dt_kundenliste.js'); $f = $modules->get('InputfieldMarkup'); $f->value = $dt2->render(); $form->add($f); // ################################## // ajax request -> return data // non-ajax -> render form + table // ################################## if($config->ajax) { echo $dt2->getJSON($pages->find('template=rockcontact, sort=random, limit=10000')); die(); } else $out .= $form->render(); return $out; what is interesting here is this part:
      // modified $col = new dtCol(); $col->name = 'modified'; $col->data = function($page) { $obj = new stdClass(); $obj->timestamp = $page->modified; $obj->display = date('d.m.Y', $page->modified); return $obj; }; $dt2->cols->add($col); datatables support orthogonal data (https://datatables.net/extensions/buttons/examples/html5/outputFormat-orthogonal.html). a date column is a good example, because you need to DISPLAY a formatted date (like 10.02.2017) but you need to be able to SORT this column by a different value (timestamp). its very easy to accomplish this by providing both values in your json. Btw: You could also just transfer the timestamp and do the formatting on the client-side via javascript. Next Example will show ho this would work. Both cases can be necessary, it's just an example here.
      [...] removed
      Why i created this module:
      of course i know @Soma s module but i needed a lot more features and the newer datatables version. also i like to define all the columns as objects and have everything on one place. lister & markupadmindatatable: nice for basic tables but lacks of features to modify the appearance of the cell values (like rendering icons, background colors and so on) datatables provides a great frontend API for filtering, showing/hiding columns, getting data, modifying it... it also plays well together with frontend charts like google chart api in this case:
       
      todo / roadmap:
      all kinds of column filters (like seen in the example above that shows an older and bloated version of this module) support for ajax filters and pagination (currently all filtering and sorting is done on the client side. i tried it with up to 50.000 rows and got reasonable results. initial loading took around 10sec. but of course this heavily depends on the complexity of your table and your data.  
       
       
    • By Robin S
      PageListTrash
      Allows non-superusers to trash pages directly from Page List (if they have page-delete permission for that page).
      Not much to say really - the module adds a "Trash" option to the extra actions for pages in Page List. It looks and works just like the Trash action available to superusers.

      https://github.com/Toutouwai/PageListTrash/
       
      Up to you whether you think non-superusers should be trusted with simpler trashing. For most cases I like the default behaviour where editors have to jump through some more hoops - I want them to think carefully about what they are doing. But if an editor needs to trash several pages then this module might reduce frustration.
      @tpr, by now you can probably predict what I'm going to say...
      ...something to merge into AdminOnSteroids?
    • By horst
      Wire Mail SMTP

      An extension to the new WireMail base class that uses SMTP-transport

      This module integrates EmailMessage, SMTP and SASL php-libraries from Manuel Lemos into ProcessWire. I use this continously evolved libraries for about 10 years now and there was never a reason or occasion not to do so. I use it nearly every day in my office for automated composing and sending personalized messages with attachments, requests for Disposition Notifications, etc. Also I have used it for sending personalized Bulkmails many times.

      The WireMailSmtp module extends the new email-related WireMail base class introduced in ProcessWire 2.4.1 (while this writing, the dev-branch only).
       
      Here are Ryans announcement.



      Current Version 0.2.5
      get it from the Modules Directory Install and Configure

      Download the module into your site/modules/ directory and install it.

      In the config page you fill in settings for the SMTP server and optionaly the (default) sender, like email address, name and signature.
      You can test the smtp settings directly there. If it says "SUCCESS! SMTP settings appear to work correctly." you are ready to start using it in templates, modules or bootstrap scripts.


      Usage Examples
      The simplest way to use it:
      $numSent = wireMail($to, $from, $subject, $textBody); $numSent = wireMail($to, '', $subject, $textBody); // or with a default sender emailaddress on config page This will send a plain text message to each recipient.
       
      You may also use the object oriented style:
      $mail = wireMail(); // calling an empty wireMail() returns a wireMail object $mail->to($toEmail, $toName); $mail->from = $yourEmailaddress; // if you don't have set a default sender in config // or if you want to override that $mail->subject($subject); $mail->body($textBody); $numSent = $mail->send(); Or chained, like everywhere in ProcessWire:
      $mail = wireMail(); $numSent = $mail->to($toEmail)->subject($subject)->body($textBody)->send(); Additionaly to the basics there are more options available with WireMailSmtp. The main difference compared to the WireMail BaseClass is the sendSingle option. With it you can set only one To-Recipient but additional CC-Recipients.
      $mail = wireMail(); $mail->sendSingle(true)->to($toEmail, $toName)->cc(array('person1@example.com', 'person2@example.com', 'person3@example.com')); $numSent = $mail->subject($subject)->body($textBody)->send(); The same as function call with options array:
      $options = array( 'sendSingle' => true, 'cc' => array('person1@example.com', 'person2@example.com', 'person3@example.com') ); $numSent = wireMail($to, '', $subject, $textBody, $options); There are methods to your disposal to check if you have the right WireMail-Class and if the SMTP-settings are working:
      $mail = wireMail(); if($mail->className != 'WireMailSmtp') { // Uups, wrong WireMail-Class: do something to inform the user and quit echo "<p>Couldn't get the right WireMail-Module (WireMailSmtp). found: {$mail->className}</p>"; return; } if(!$mail->testConnection()) { // Connection not working: echo "<p>Couldn't connect to the SMTP server. Please check the {$mail->className} modules config settings!</p>"; return; } Following are a ...


      List of all options and features


      testConnection () - returns true on success, false on failures


      sendSingle ( true | false ) - default is false

      sendBulk ( true | false ) - default is false, Set this to true if you have lots of recipients (50+)


      to ($recipients) - one emailaddress or array with multiple emailaddresses

      cc ($recipients) - only available with mode sendSingle, one emailaddress or array with multiple emailaddresses

      bcc ($recipients) - one emailaddress or array with multiple emailaddresses

       
      from = 'person@example.com' - emailaddress, can be set in module config (called Sender Emailaddress) but it can be overwritten here

      fromName = 'Name Surname' - optional, can be set in module config (called Sender Name) but it can be overwritten here


      priority (3) - 1 = Highest | 2 = High | 3 = Normal | 4 = Low | 5 = Lowest

      dispositionNotification () or notification () - request a Disposition Notification


      subject ($subject) - subject of the message

      body ($textBody) - use this one alone to create and send plainText emailmessages

      bodyHTML ($htmlBody) - use this to create a Multipart Alternative Emailmessage (containing a HTML-Part and a Plaintext-Part as fallback)

      addSignature ( true | false ) - the default-behave is selectable in config screen, this can be overridden here
      (only available if a signature is defined in the config screen)

      attachment ($filename, $alternativeBasename = "") - add attachment file, optionally alternative basename


      send () - send the message(s) and return number of successful sent messages


      getResult () - returns a dump (array) with all recipients (to, cc, bcc) and settings you have selected with the message, the message subject and body, and lists of successfull addresses and failed addresses,


      logActivity ($logmessage) - you may log success if you want

      logError ($logmessage) - you may log warnings, too. - Errors are logged automaticaly
       
       
      useSentLog (true | false) - intended for usage with e.g. third party newsletter modules - tells the send() method to make usage of the sentLog-methods - the following three sentLog methods are hookable, e.g. if you don't want log into files you may provide your own storage, or add additional functionality here

      sentLogReset ()  - starts a new LogSession - Best usage would be interactively once when setting up a new Newsletter

      sentLogGet ()  - is called automaticly within the send() method - returns an array containing all previously used emailaddresses

      sentLogAdd ($emailaddress)  - is called automaticly within the send() method
       
      Changelog: https://github.com/horst-n/WireMailSmtp/blob/master/CHANGELOG.md
       
    • By celfred
      Hello,
      I'm desperately trying to update my website to PW 3.0.62 and I'm facing issues to to module compatibility. I was stuck with Pages2Pdf which I managed to solve bu updating the module from Github, but now it's the Pages Web Service module... and this time, I don't know wht to do
      The Module is found there. But it is quite old and I can't find it in the modules catalogue... and my site is making quite a use of it (I can't think of a way to do otherwise, sorry...)
      After adding the FileCompiler=0 to the module pages, the error I'm stuck with is :
      Fatal error: Class 'WireData' not found in /home/celfred/PlanetAlert/site/modules/ServicePages/ServicePages.module on line 22
      and I have no idea on what to do... I must admit I'm not a programmer but a middle-school teacher... (for your information, here's the site I'm talking about : http://planetalert.tuxfamily.org ) but I'm struggling hard to solve the different issues I have to face and I'm wlling to understand things. I have just spent many hours trying to make 2.8 work on my localhost (and it seems ok ) but I'd like to switch to 3.x to prepare the future
      If anyone had the will to spend a few minutes to try and help me, I would greatly appreciate.
      Thanks in advance !
      If you need more information to understand my problem, feel free to ask.