Jump to content
kongondo

Visual Page Selector (commercial page picker module for ProcessWire)

Recommended Posts

Visual Page Selector version 003  (released (07/07/2017)

Happy to announce that the latest release of Visual Page Selector is now available for Download/Purchase.

Documentation is also complete!

This is a major update. Visual Page Selector can now be used as a normal but enhanced page field! There are 2 views each for inputfield (page edit) and the page selector modal. These can be combined to suit your workflow as explained in the docs here.

As a normal page field, you can opt to view the selected pages as a simple list and add pages to your page field using a ProcessWire Lister modal. This opens so many possibilities, including nuanced differentiation of pages to add to your page field, for example, making use of Lister columns and other page properties.

For those that want to use Visual Page Selector as a 'one-page-per-image' solution, you can carry on as normal, with the added benefit of different view combinations

In page edit, selectable pages are not loaded directly in the Inputfield allowing you to have hundreds of thousands, nay, unlimited numbers of selectable pages without experiencing any slowdowns (@note: What you see in the screenshot below is not AsmSelect or PageAutocomplete; just a custom list that blends in with the rest of ProcessWire).

Please note that there were a few inevitable changes  to the field settings. The Lister settings are now separated into individual settings. In addition, there was a typo in the 'vps-delete-page' permission. That should be 'vps-delete-pages'. Due to these, if upgrading from version < 3, please test thoroughly and fix any brokenness before using in production. If you need any help please let us know.

Changelog

  1. Lister view for an enhanced page field experience.
  2. Combine different views as you wish.
  3. Faster Inputfield load times in page edit.
  4. UX changes.

Lister and list view demo

vps_version_3_new.thumb.gif.bf8b51fc43579e5e56e26a1d81b5681f.gif

Edited by kongondo
  • Like 7

Share this post


Link to post
Share on other sites

The lister Inputfield integration appeared only in my dreams, great, great addition!  Does it work with a ListerPro?

  • Like 1

Share this post


Link to post
Share on other sites
On 2017-7-7 at 2:59 PM, elabx said:

Does it work with a ListerPro?

It should, though I don't know how to make it switch to ListerPro....not sure it would be automatic.

Share this post


Link to post
Share on other sites

Hello @kongondo

I have a VPS 003 question: I use VPS to realize a (one-to-one) one-to-many relationship (in Thumbs View), in which case it is overkill to use the current "Click Select > Add Page Dropdown > Apply Action > Close Button". It would be great to have this one instead: "Click Select"

If it was possible to choose a "Quick Add/Remove" option then I could save a lot of time. Just by clicking on the image the page should be added and the modal window should be closed automatically.

What do you think? Could you possibly add this feature?

Edited by szabesz
one-to-one changed to one-to-many

Share this post


Link to post
Share on other sites
11 hours ago, szabesz said:

If it was possible to choose a "Quick Add/Remove" option then I could save a lot of time. Just by clicking on the image the page should be added and the modal window should be closed automatically.

What do you think? Could you possibly add this feature?

Yes, it should be possible to add a Quick Add feature within the modal. However, how would remove (from within the modal) work (i.e., how would you indicate you want to remove an image/page)?

  • Like 1

Share this post


Link to post
Share on other sites

"Select All / click select" + Trash Selected icon seems to be removing the page being referenced. Besides, when in this "one-to-many mode", selecting a different image (i.e. Page) could overwrite the currently selected page. I don't know if I want to remove the page from the modal itself. If it can be removed with the "Select All / click select" + Trash Selected icon, then there is no need to open the modal in the first place. Or am I misunderstanding something?

Why is it called "Trash Selected"? Is it actually using the ProcessWire's Trash in some way or just removing the page reference?

vps-field.png.852cb69d5421c8f157d01dc33d6121f4.png

BTW, I read your docs but things are still a bit fuzzy in my head, I need more time to test all the features the module has to offer.

Edited by szabesz
one-to-one changed to one-to-many

Share this post


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

Besides, when in this "one-to-one mode", selecting a different image (i.e. Page) could overwrite the currently selected page.

Isn't that how single page fields work :)?

 

1 hour ago, szabesz said:

I don't know if I want to remove the page from the modal itself. If it can be removed with the "Select All / click select" + Trash Selected icon, then there is no need to open the modal in the first place

Not in all cases.  Imagine a case where you are already in the modal and you realise you have some images saved in the page field that shouldn't be there. Rather than close the modal and remove them, you can easily remove them from within the modal and add the images you want. It is just there for convenience.

1 hour ago, szabesz said:

Why is it called "Trash Selected"? Is it actually using the ProcessWire's Trash in some way or just removing the page reference?

No, it is not using ProcessWire's Trash. It is removing the page reference. Does it sound misleading? Remove Selected maybe?

Share this post


Link to post
Share on other sites
On 7/31/2017 at 1:27 PM, kongondo said:
On 7/31/2017 at 12:07 PM, szabesz said:

Besides, when in this "one-to-many mode", selecting a different image (i.e. Page) could overwrite the currently selected page.

Isn't that how single page fields work :)?

Yes but VPS does not support Single page, does it? If I set it to

  • Single page (Page) or boolean false when none selected, I get : Error retrieving results: [object Object]
  • Single page (Page) or empty page (NullPage) when none selected, I get: Nothing added yet.

Only Multiple Pages works, which I do not need in this case. However, I need VPS to pick Lego parts both visually and by their Part ID.

On 7/31/2017 at 1:27 PM, kongondo said:

Imagine a case where you are already in the modal and you realise you have some images saved in the page field that shouldn't be there.

When using one-to-many relationship, there should be no other images, should there?

To better explain what I'm trying to do, here is a screengrab:

[...image was outdated and big, so I removed it...]

I have "Parts" but I store "Set Parts" in a Page Table. Part pages store the common properties like image, year of release and title. Set Part pages store the given LEGO Set specific properties like quantity, color and the reference to the Part in question.

Share this post


Link to post
Share on other sites
22 hours ago, szabesz said:

Yes but VPS does not support Single page, does it? If I set it to

  • Single page (Page) or boolean false when none selected, I get : Error retrieving results: [object Object]
  • Single page (Page) or empty page (NullPage) when none selected, I get: Nothing added yet.

That's a bug. Working on fix now. Thanks for reporting.

22 hours ago, szabesz said:

When using one-to-one relationship, there should be no other images, should there?

Good point. I'll rewrite the markup to be more contextual. So, when using a single page field:

  • select/unselect all will not show
  • make add image/page configurable so that it will either do nothing (and let you know page field not empty) or replace the image/page in the field already
  • Make apply action contextual + configurable to show/not show/add page/image and close modal, etc.

I'll need to think these through so it may be a while before I am ready

  • Like 1

Share this post


Link to post
Share on other sites
5 minutes ago, kongondo said:

I'll need to think these through so it may be a while before I am ready

Thank you in advance!

23 hours ago, kongondo said:

No, it is not using ProcessWire's Trash. It is removing the page reference. Does it sound misleading? Remove Selected maybe?

"Remove Selected" sounds good to me.

Share this post


Link to post
Share on other sites

I think it will be important for VPS to support image fields that are multiple;
i don't quite get why there is a requirement that the image field must be a single image.

Here is one scenario where that restriction fails:

- You have YouTube & Vimeo Thumbnail grabber, getting poster image for a video. This module requires that the image is NOT single (must support multiple images).
- You want to setup a VPS field to choose videos, however it won't work because the VPS requires the thumbnail field to be single image.

I have a lot of other situations where I was hoping/assuming the module would use the first image when image field is multi, so this could be a major problem for how i was planning on using it.

If you can modify the module to just go ahead and use the first image for these cases, that would solve this.

Another important feature will be to allow editing of the item by clicking on it – i didn't see an option for that, let me know if that is possible to enable.

Next, when in lister mode, there is still an edit button on the lister which could really confuse clients and also create a crazy modal view (since the button include the whole admin theme and not just the edit screen...

Next - how do you preconfigure the columns for the lister, or can you specify to use a lister pro that is already configured? Somewhat confused about that. I need to have specific columns for the lister view, that will apply to all users.

Thanks!
 

Share this post


Link to post
Share on other sites
On 05/08/2017 at 2:55 AM, Macrura said:

i don't quite get why there is a requirement that the image field must be a single image.

Currently I am in a situation when a PageArray does not fit the bill:

By the way:

On 30/07/2017 at 11:56 PM, szabesz said:

one-to-one relationship

I kept talking about "one-to-one" when actually what I need is "one-to-many", meaning I need a Single Image (one) selected by VPS from many. I do not need many-to-many as I deliberately want to simplify things.

Share this post


Link to post
Share on other sites

@Macrura

Thanks for the purchase. Sorry for the late reply. Been working on the next release which addresses all the issues raised.

On 05/08/2017 at 1:55 AM, Macrura said:

I think it will be important for VPS to support image fields that are multiple;

Done in next release.

On 05/08/2017 at 1:55 AM, Macrura said:

i don't quite get why there is a requirement that the image field must be a single image.

Me neither! I couldn't remember why I set it up that way! I think I confused that to mean 'allow more than one image from one page to be visible as selectable'

On 05/08/2017 at 1:55 AM, Macrura said:

I have a lot of other situations where I was hoping/assuming the module would use the first image when image field is multi,

Yep, that's how it is set up now. If image field in the selectable page is a multi-image field, grab the first image. If it is a single image field, grab that one image. In essence, VPS will always grab the first image.

On 06/08/2017 at 6:11 PM, szabesz said:

Currently I am in a situation when a PageArray does not fit the bill:

The issue is about the image field in the selectable pages. VPS should (and now does) work with both single and multi-image fields. Like @Macrura explained, there will be cases where you want to reuse an image field for other needs. Or imagine a case where you wanted to show related images in the frontend. For instance, for a real estate website, you may want to have different photos of one property:

  1. In ProcessWire, create a photo page with a multi images field for your property for sale.
  2. Upload various photos to the multi images field on that page, making sure that the first image is of the front of the house, for instance.
  3. Make your property page selectable in the page field you are using with VPS.
  4. Edit a page with this page field that is using VPS
  5. In the selectable pages modal in VPS, for this particular property photo page, you will see only ONE image; the first image. That should be enough for editors to know what image/selectable page to select. Underneath the hood, we/they know they are just adding a reference to the photo page (in the page field).
  6. In the frontend end, when displaying the page with the page field in #4, since the page field has a reference to our property's photo page, we can now show all the photos of our property that we uploaded in #2 :)

Sorry for verbosity but hope this explanation makes things clearer (not in the least for me!). As you can see, this should not affect the current workflow of one page for one image. Your selectable page with a single image field will still work as is. You will see its one image in the modal for selection and will be able to add it to your page field. 

Speaking of which...

On 31/07/2017 at 0:58 PM, szabesz said:

but VPS does not support Single page, does it

This is now fixed. VPS will work with both single and multi-page fields. In summary, you can have:

  1. Selectable page with a Single image field to add to a Single page (VPS) field
  2. Selectable page with a Single image field to add to a Multi page (VPS) field
  3. Selectable page with a Multi image field to add to a Single page VPS field
  4. Selectable page with a Multi image field to add to a Multi page VPS field

The most important thing to remember is that in the selectable pages modal, VPS will always show one image per selectable page. It doesn't care what lies underneath. This means that you can even have a selectable page with with several image fields and if those image fields are specified in VPS image field settings, VPS will always return the first found image in the first named image field. It means that if one image is deleted or images are reordered or one image field removed or the named order of images in VPS field changes, VPS will always get the next available of the remaining images.

On 05/08/2017 at 1:55 AM, Macrura said:

Another important feature will be to allow editing of the item by clicking on it – i didn't see an option for that, let me know if that is possible to enable.

Done! I believe this has been requested before by @Robin S but it slipped under the radar. You can now configure VPS to separately allow editing of both selectable and selected pages (i.e. both in the modal and those already in the page field) for all views (Modal: Thumbs and Lister; Page Edit: Thumbs and List). Default is not to allow editing. Page-editable access is also respected.

On 05/08/2017 at 1:55 AM, Macrura said:

Next, when in lister mode, there is still an edit button on the lister which could really confuse clients and also create a crazy modal view (since the button include the whole admin theme and not just the edit screen...

Sorted. You now see a clean modal view with just the edit screen as well as a 'Back' button to take you back to the listings/thumbs of all items. As said above, the edit button will only be visible if you've allowed editing in modal window. If using thumbs view in the modal, and you've allowed editing of selectable pages in the modal, the selectable pages' titles will be clickable, taking you to the edit screen of the page. If a page is not editable, they will see a normal/unclickable title.

On 05/08/2017 at 1:55 AM, Macrura said:

how do you preconfigure the columns for the lister,

In the field settings, under VPS: Modal settings, in the Page Selector View option, if you have Lister view selected, you will see more options under VPS: Lister Settings. In particular, see Limit Selectable Fields/Columns and Disallow Columns. Please see this section of the docs.

On 05/08/2017 at 1:55 AM, Macrura said:

can you specify to use a lister pro that is already configured

No you can't, at least not from VPS side. 

I'm hoping to release version 4 of VPS either today or tomorrow. 

Edited by kongondo
  • Like 2

Share this post


Link to post
Share on other sites

Visual Page Selector version 004  (released (15/08/2017)

Happy to announce that the latest release of Visual Page Selector is now available for Download/Purchase.

Changelog

  1. Add and close option: Please note this behaves differently if VPS used in a single page field vs. a multi page field as well as if other options are enabled such as 'Delete Images' and 'Delete Pages' or if in a Lister view in the modal. In a single page field if these 'deletes' are disabled, just clicking a page thumb in thumbs view will add the page and close the modal if this option is enabled. In other cases, the modal will be closed when the Add Page option is selected and the Apply Action button is clicked. Please also note the value of the submit button can change to 'Add' depending on the context.
  2. Ajax refreshing of Inputfield! No more page reloads once you apply an action in the modal. If you add or remove a page or delete it or its image, the Inputfield refreshes automatically. It also listens to changes made to pages in the page field if editing (in a modal @see below) a page in modal. Please note that direct Lister view actions such as unpublish, trash, etc are currently not captured in this feature. Only Adding/Removing Lister view pages via VPS Apply Actions are covered.
  3. Edit selectable and selected pages: You can configure options to edit selectable options when in the modal or selected pages already in the Inputfield (which will open a modal). Any changes you make to the selected page will be reflected in the Inputfield on save. You will see them when you close the edit modal.
  4. Support for both single and multi image fields. Please note that if you Delete and Image in a selectable or selected page, VPS will check for the next available image in the named image field(s) (named in VPS settings). If an image is found, it will be returned. Otherwise, the page will be removed from the page field. This only applies to all cases expect the combination of a List view page edit and Lister modal view where no image is required.
  5. Support for both single and multi page fields
  6. Bug fixes

Apologies for the delay. Hit a couple of snags that needed to be resolved. Please test thoroughly in a non-production server first. I see a couple of JS errors in the console but they seem to be related to ProcessPageLister or JqueryCore.js. Have not been able to confirm what's causing them. The module works fine though.

Please note: Docs not yet updated to reflect above changes.

Edited by kongondo
  • Like 3

Share this post


Link to post
Share on other sites

Renewals and Resend Links

Hi,

Renewal and resend links pages for Visual Page Selector have been added. Use renewals if you wish to renew a Visual Page Selector order whose subscription has expired (1 year). Resend are for orders that are yet to expire. Use this if you can't find or didn't get the confirmation email sent after your purchase.

  • Like 2

Share this post


Link to post
Share on other sites

Hi @kongondo,

I purchased VPS this afternoon and have been having an explore of it. As always with your modules, it's impressive stuff!

A question: is it possible to customise the columns that are shown in the inputfield list view? So if we're not using Tags but want to show some other custom field from the page can we show that? It would be really useful if we could.

I want to give some feedback on some aspects of the appearance and workflow, and I mean this to be constructive so I hope it comes across that way. It's awesome what this module can do and it's obvious how much work you've put into it. It's just lacking a bit of the polish and attention to detail that I would expect from a pro/commercial module at this price point.

1. It would be nice if the Process module installed the Inputfield module ("installs" option in getModuleInfo) so it was just a one-step installation process.

2. Rather than users needing to type the name of the image fields used for thumbnails, could you change to an AsmSelect that selects from existing image fields? Also, the note here needs updating to reflect that image fields allowing more than one image can now be used with VPS.

2017-10-22_150023.png.47c58a2845711f623010b882dc101003.png

3. If the option to allow users to edit pages from the modal is enabled, the page edit view replaces the add/remove lister and there is no way to return to it. I'm wondering if this option is needed actually - I couldn't think of many cases where you would want to allow page editing within the modal that has been opened to add/remove pages from the inputfield.

4. In the inputfield list view, the Description and Tag columns do not reflect changes to those fields made in the page modal edit (the inputfield reloads, but the columns don't update).

5. The spinner is cut off in the modal.

2017-10-22_135454.png.0dcae1419751029ad7eb1c19f1e3e9ea.png

6. The tab layout in the modal is a bit messed up.

2017-10-22_135627.png.5690a392bf98c628fc72f3b691701291.png

7. The position of the actions select/button looks off too - it's crashing into the grey bar above. Also, it's not possible to interact with the select because it is behind the WireTabs <ul>.

2017-10-22_135641.png.af55552e5618d27e982fa18fe4006fca.png

8. In modal edit view, some text is obscured behind the WireTabs.

2017-10-22_140417.png.e54612ed6240263e155eae5f69b2049a.png

9. The thumbnail appearance and layout could be improved IMHO. 

2017-10-22_135527.png.34decd806432016737eeb24195a5f8f6.png

 

a) Show the thumbnail uncropped, so the aspect ratio of the image can be seen.

b) Remove the rounded corner styling - it can be misleading (what if you had an image that actually had rounded corners), and it isn't used consistently (list view thumbnails are not rounded).

c) Use the core default thumbnail dimension of 260px height and unconstrained width. In most cases this will also make the inputfield/modal load faster because the thumbnail variation will already exist from the time the image was uploaded. The existing thumbnails are too small.

d) It's a tiny bit disconcerting seeing the thumbnail scale down when the pink "selected" border is applied. Perhaps consider a different CSS styling technique such as applying the border to a transparent element in front of the image.

e) The thumbnail layout breaks at some widths. Also the thumbnail label line height is too low.

2017-10-22_142016.png.9ff11c58c5511e12ca9420714292f907.png

f) Let the thumbnail container be the natural width of the thumbnail. So all the thumbnails just float left against each other (with some white space around them), similar to the appearance of the core Images field.

I tweaked the VPS code a bit to get this:

2017-10-22_153453.png.34a00aab6a33f54b7ca1fa9d8c6203e8.png

The thumbnail label could potentially be removed too, and shown in a tooltip on hover (I think in most cases users select an image from scanning the thumbnails rather than the labels). Or add an option for this.

10. If pages are removed from the inputfield (but the page is not yet saved), this is not reflected when the modal is opened. The removed pages are still shown with the border/opacity styling of pages that are added to the inputfield. I guess it might be difficult to avoid this.

11. In the modal, if the "remove" action is performed on a page that is not added or the "add" action is performed on a page that is already added, the error notice could be less cryptic:

2017-10-22_142113.png.3a00d825169b898ae843faeab462905f.png

There is also an overflow issue possible here, and the appearance of the notices are somewhat ugly in general: unnecessary white border and border radius, unnecessary background colour change on hover, the text needs some padding.

12. Could the actions in the modal window (add, remove, etc) be smarter to streamline the workflow? For the lesser-used actions (delete page, delete image from page) the select dropdown is fine, but it is a bit awkward for the frequent actions of adding and removing pages. How about this:

VPS knows whether each page is currently added or not (hence the different styling). So for pages that are not added clicking the thumbnail marks the page for adding (a plus icon or similar is shown in the corner of the thumbnail). And for pages that are already added clicking the thumbnail marks the page for removal (a cross icon is shown).

13. Some very minor appearance things:

Inconsistent text size and divider appearance for the same controls in the modal vs the inputfield.

2017-10-22_144747.png.2f5ea35fe74f8ffb6e0d120de486009d.png2017-10-22_144759.png.b56c5d1598a964b21002c778edcc529d.png

The default focus style looks awkward on the Add Pages button after the modal closes.

2017-10-22_141310.png.50b434afb207c89e0b017f5cb19a84d6.png

Using a large black h3 for the "Nothing added yet" text is a bit strong.

2017-10-22_135435.png.566a6a774d0bf87e414a0ebc399ed6bf.png

 

I understand if you think some of these issues are trivial, but the truth is I wouldn't be entirely happy having my clients use this module in it's current form. But with a bit of polish it will be amazing, and I want to thank you for developing it.

 

  • Like 2

Share this post


Link to post
Share on other sites
3 hours ago, Robin S said:

The thumbnail label could potentially be removed too, and shown in a tooltip on hover (I think in most cases users select an image from scanning the thumbnails rather than the labels). Or add an option for this.

Option please :)

Share this post


Link to post
Share on other sites
On 10/22/2017 at 4:24 AM, Robin S said:

I purchased VPS this afternoon and have been having an explore of it.

Thanks for the purchase @Robin S,

I'll have a look at the issues you've raised and respond here later.

  • Like 1

Share this post


Link to post
Share on other sites
On 22/10/2017 at 4:24 AM, Robin S said:

A question: is it possible to customise the columns that are shown in the inputfield list view? So if we're not using Tags but want to show some other custom field from the page can we show that? It would be really useful if we could.

Currently no. I will look into this, maybe start with text fields.

 

On 22/10/2017 at 4:24 AM, Robin S said:

1. It would be nice if the Process module installed the Inputfield module ("installs" option in getModuleInfo) so it was just a one-step installation process.

In the code, I see I had this previously. I cannot remember why I commented it out; will look into it.

 

On 22/10/2017 at 4:24 AM, Robin S said:

Rather than users needing to type the name of the image fields used for thumbnails, could you change to an AsmSelect that selects from existing image fields?

Good idea; Will add to next version

On 22/10/2017 at 4:24 AM, Robin S said:

Also, the note here needs updating to reflect that image fields allowing more than one image can now be used with VPS.

Thanks for catching this. Will amend.

 

On 22/10/2017 at 4:24 AM, Robin S said:

If the option to allow users to edit pages from the modal is enabled, the page edit view replaces the add/remove lister and there is no way to return to it. I'm wondering if this option is needed actually - I couldn't think of many cases where you would want to allow page editing within the modal that has been opened to add/remove pages from the inputfield

Sorry, I don't understand this one. Please clarify, an illustration maybe? Thanks.

On 22/10/2017 at 4:24 AM, Robin S said:

In the inputfield list view, the Description and Tag columns do not reflect changes to those fields made in the page modal edit (the inputfield reloads, but the columns don't update).

They do, in my case. See GIF below. I've tested in PW 2.7. Will need to do further tests in PW 3.x

vps_version_004_multi_page_field_updating_description_and_tags_on_edit.thumb.gif.e15b74f12707bcd5dab97bdf2bfed407.gif

 

On 22/10/2017 at 4:24 AM, Robin S said:

The spinner is cut off in the modal.

Looks fine here. Must be some CSS issue. Will investigate.

 

On 22/10/2017 at 4:24 AM, Robin S said:

The tab layout in the modal is a bit messed up.

Looks fine to me (in different resolutions); see below. Must be your browser. What browser are you using?

modal_tabs.thumb.png.cd709d9a811087f9a80c97b748240517.png

 

On 22/10/2017 at 4:24 AM, Robin S said:

The position of the actions select/button looks off too - it's crashing into the grey bar above. Also, it's not possible to interact with the select because it is behind the WireTabs <ul>.

Ditto. Strange. I'm not seeing that here (see my demo) nor have any other users reported this; you are the first one. Must be your browser, so let's start from there.

On 22/10/2017 at 4:24 AM, Robin S said:

In modal edit view, some text is obscured behind the WireTabs.

Ditto. See the screenshot below from ProcessWire 3 Test. 

wire_tabs.thumb.png.c3185250666d47d2f7ad531c4d04e1ec.png

On 22/10/2017 at 4:24 AM, Robin S said:

Show the thumbnail uncropped, so the aspect ratio of the image can be seen.

I'll have to have a think about this one. My guess is that the editor already know the aspect ratio of that image? 

On 22/10/2017 at 4:24 AM, Robin S said:

Remove the rounded corner styling - it can be misleading (what if you had an image that actually had rounded corners), and it isn't used consistently (list view thumbnails are not rounded).

I think this is a matter of (stylistic) taste. Absence of rounded corners in Thumbs view Table (Thumbs view has two layouts; grid and table; List view is the other view without images) was just an oversight. I'll have a think about this one.

 

On 22/10/2017 at 4:24 AM, Robin S said:

Use the core default thumbnail dimension of 260px height and unconstrained width. In most cases this will also make the inputfield/modal load faster because the thumbnail variation will already exist from the time the image was uploaded. The existing thumbnails are too small.

I agree with the idea about making the modal load faster, although I would add, 'initially load faster' since once thumbs are created, they do not have to be recreated. As for 260px high thumbs, unless I am mistaken, that's a ProcessWire 3 feature. I have to take into account prior versions of ProcessWire. Meaning, they would still need their thumbnails to be created at 260px, so nothing gained for them. I have no empirical evidence, but it seems to me, PW 2.x users are still the majority. In addition, given that we have VPS in use out there already using 100px high thumbs, switching to 260px high thumbnails will lead to some disruption. As for too small, that is also a matter of taste? I don't like large thumbs :P. Incidentally, ProcessWire 2.x has been using 100x100 thumbs:). Maybe if we made this configurable? 

 

On 22/10/2017 at 4:24 AM, Robin S said:

It's a tiny bit disconcerting seeing the thumbnail scale down when the pink "selected" border is applied. Perhaps consider a different CSS styling technique such as applying the border to a transparent element in front of the image.

Disconcerting? I'm not sure how to respond to this one to be honest :).

On 22/10/2017 at 4:24 AM, Robin S said:

The thumbnail layout breaks at some widths. Also the thumbnail label line height is too low.

RE layout, I will do further tests.  Will also look into the  label line height.

On 22/10/2017 at 4:24 AM, Robin S said:

Let the thumbnail container be the natural width of the thumbnail. So all the thumbnails just float left against each other (with some white space around them), similar to the appearance of the core Images field.

Will look into this, thanks.

On 22/10/2017 at 4:24 AM, Robin S said:

The thumbnail label could potentially be removed too, and shown in a tooltip on hover (I think in most cases users select an image from scanning the thumbnails rather than the labels). Or add an option for this.

Good idea. Will make it configurable, thanks.

 

On 22/10/2017 at 4:24 AM, Robin S said:

If pages are removed from the inputfield (but the page is not yet saved), this is not reflected when the modal is opened. The removed pages are still shown with the border/opacity styling of pages that are added to the inputfield. I guess it might be difficult to avoid this.

Yes, there is no easy way around this. Users will just need to be taught that hitting save will implement the changes they've made.

 

On 22/10/2017 at 4:24 AM, Robin S said:

In the modal, if the "remove" action is performed on a page that is not added or the "add" action is performed on a page that is already added, the error notice could be less cryptic:

I'll have a think.

On 22/10/2017 at 4:24 AM, Robin S said:

There is also an overflow issue possible here, and the appearance of the notices are somewhat ugly in general: unnecessary white border and border radius, unnecessary background colour change on hover, the text needs some padding.

Again, I haven't seen the overflow here, nor text cramped against the margins. I understand border radius are not everyone's cup of tea. I tried to replicate ProcessWire's System Notification notices. Apart from the white border, they are virtually identical, in my opinion. 

 

On 22/10/2017 at 4:24 AM, Robin S said:

Could the actions in the modal window (add, remove, etc) be smarter to streamline the workflow? For the lesser-used actions (delete page, delete image from page) the select dropdown is fine, but it is a bit awkward for the frequent actions of adding and removing pages. How about this:

VPS knows whether each page is currently added or not (hence the different styling). So for pages that are not added clicking the thumbnail marks the page for adding (a plus icon or similar is shown in the corner of the thumbnail). And for pages that are already added clicking the thumbnail marks the page for removal (a cross icon is shown).

I'll look into this.

 

On 22/10/2017 at 4:24 AM, Robin S said:

Inconsistent text size and divider appearance for the same controls in the modal vs the inputfield.

Good catch. Will address this in next version.

On 22/10/2017 at 4:24 AM, Robin S said:

The default focus style looks awkward on the Add Pages button after the modal closes.

You are probably going to guess what I am about to say. I can't see that here. So, browser issue?

On 22/10/2017 at 4:24 AM, Robin S said:

Using a large black h3 for the "Nothing added yet" text is a bit strong

Erm...what would you suggest?

On 22/10/2017 at 4:24 AM, Robin S said:

I understand if you think some of these issues are trivial, but the truth is I wouldn't be entirely happy having my clients use this module in it's current form.

I see where you are coming from. I try to do my best to make sure what I put before clients works well but also looks nice. It seems some issues are browser specific. Others are a matter of taste, but certainly not trivial. Thanks for the detailed feedback.

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, kongondo said:
On 10/22/2017 at 5:24 AM, Robin S said:

Could the actions in the modal window (add, remove, etc) be smarter to streamline the workflow? For the lesser-used actions (delete page, delete image from page) the select dropdown is fine, but it is a bit awkward for the frequent actions of adding and removing pages. How about this:

VPS knows whether each page is currently added or not (hence the different styling). So for pages that are not added clicking the thumbnail marks the page for adding (a plus icon or similar is shown in the corner of the thumbnail). And for pages that are already added clicking the thumbnail marks the page for removal (a cross icon is shown).

I'll look into this.

@kongondo Please do not forget my use case either:-[

Share this post


Link to post
Share on other sites

@kongondo, thanks for the responses.

16 hours ago, kongondo said:

Sorry, I don't understand this one. Please clarify, an illustration maybe?

Note how in the modal the Edit view replaces the Add Pages view, with no option to return to Add Pages.

vps1.gif.a898b7c1da6f5896159cf98c4639f8f5.gif

16 hours ago, kongondo said:

They do, in my case.

Here's what I see when doing the same thing.

vps2.gif.6c562218e2a29710698bcc265652d913.gif

16 hours ago, kongondo said:

Looks fine to me (in different resolutions); see below. Must be your browser. What browser are you using?

Chrome, Windows. This is on a clean PW 3.0.80 installation with VPS v0.0.4 and no other modules. I notice your screen capture shows admin theme Reno. You checked with the default admin theme?

16 hours ago, kongondo said:

I have no empirical evidence, but it seems to me, PW 2.x users are still the majority.

I would have thought that nearly all new site developments use PW3. I know I have never contemplated building a new site with the old <= v2.7. And most buyers would be using VPS for new projects rather than retrofitting it into old projects that they are not willing to upgrade, wouldn't they?

As for the visual details: some people are passionate about this stuff, some people can't see what the fuss is about ("It still works, doesn't it?"). To me, VPS sort of looks and feels like a product that is at a draft stage. I don't mean disrespect by this and I know a lot of work has gone into it, I just was expecting a bit more polish seeing as VPS is presented as a professional commercial product.

Share this post


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

As for the visual details: some people are passionate about this stuff, some people can't see what the fuss is about ("It still works, doesn't it?").

@Robin S, I don't know what you mean by this. Are you implying that I don't care about the visual details of my modules as long as they work? Given that this is a commercial product, it could be insinuated that I'm just after the buck?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      After forgetting the class name of the wonderful AdminPageFieldEditLinks module for what feels like the 100th time I decided I needed to give my failing memory a helping hand...
      Autocomplete Module Class Name
      Provides class name autocomplete suggestions for the "Add Module From Directory" field at Modules > New.
      Requires ProcessWire >= v3.0.16.
      Screencast

      Installation
      Install the Autocomplete Module Class Name module.
      Configuration
      Choose the type of autocomplete options list: "Module class names from directory" or "Custom list of module class names". The latter could be useful if you regularly install some modules and would prefer a shorter list of autocomplete suggestions. The list of class names in the modules directory is generated when the Autocomplete Module Class Name module is installed. It doesn't update automatically (because the retrieval of the class names is quite slow), but you can use the button underneath when you want to retrieve an updated list of class names from the directory. The "fuzzy search" option uses custom filter and item functions for Awesomplete so that the characters you type just have to exist in the module class name and occur after preceding matches but do not need to be contiguous. Uncheck this option if you prefer the standard Awesomplete matching. Custom settings for Awesomplete can be entered in the "Awesomplete options" field if needed. See the Awesomplete documentation for more information.  
      https://github.com/Toutouwai/AutocompleteModuleClassName
      https://modules.processwire.com/modules/autocomplete-module-class-name/
    • By teppo
      MarkupMenu is a markup module for generating menu trees. When provided a root page as a starting point, it generates a navigation tree (by default as a HTML "<ul>" element wrapped by a "<nav>" element) from that point onwards. If you've also provided it with current (active) page, the menu will be rendered accordingly, with current item highlighted and items rendered up to that item and its children (unless you disable the "collapsed" option, in which case the full page tree will be rendered instead).
      Modules directory: https://modules.processwire.com/modules/markup-menu/ GitHub repository: https://github.com/teppokoivula/MarkupMenu Usage
      As a markup module, MarkupMenu is intended for front-end use, but you can of course use it in a module as well. Typically you'll only need the render() method, which takes an array of options as its only argument:
      echo $modules->get('MarkupMenu')->render([ 'root_page' => $pages->get(1), 'current_page' => $page, ]); Note: if you omit root_page, site root page is used by default. If you omit current_page, the menu will be rendered, but current (active) page won't be highlighted etc.
      A slightly more complex example, based on what I'm using on one of my own sites to render a (single-level) top menu:
      echo $modules->get('MarkupMenu')->render([ 'current_page' => $page, 'templates' => [ 'nav' => '<nav class="{classes} menu--{menu_class_modifier}" aria-label="{aria_label}">%s</nav>', 'item_current' => '<a class="menu__item menu__item--current" href="{item.url}" tabindex="0" aria-label="Current page: {item.title}">{item.title}</a>', ], 'placeholders' => [ 'menu_class_modifier' => 'top', 'aria_label' => 'Main navigation', ], 'include' => [ 'root_page' => true, ], 'exclude' => [ 'level_greater_than' => 1, ], ]); Note: some things you see above may not be entirely sensible, such as the use of {menu_class_modifier} and {aria_label} placeholders. On the actual site the "nav" template is defined in site config, so I can define just these parts on a case-by-case basis while actual nav markup is maintained in one place.
      Please check out the README file for available render options. I'd very much prefer not to keep this list up to date in multiple places. Basically there are settings for defining "templates" for different parts of the menu (list, item, etc.), include array for defining rules for including in the menu and exclude array for the opposite effect, classes and placeholders arrays for overriding default classes and injecting custom placeholders, etc. 🙂
      MarkupMenu vs. MarkupSimpleNavigation
      TL;DR: this is another take on the same concept. There are many similarities, but also some differences – especially when it comes to the supported options and syntax. If you're currently using MarkupSimpleNavigation then there's probably no reason to switch over.
      I'd be surprised if anyone didn't draw lines between this module and Soma's awesome MarkupSimpleNavigation. Simply put, I've been using MSN (...) for a number of years, and it's been great – but there have been some smallish issues with it, particularly with the markup generation part, and it's also doing some things in a way that just doesn't work for me – the xtemplates thing being one of these. In many ways it's less about features, and more about style.
      In MarkupMenu I've tried to correct these little hiccups, modernise the default markup, and allow for more flexibility with placeholder variables and additional / different options. MarkupMenu was built for ProcessWire 3.0.112+ and PHP 7.1+, it's installable with Composer, and I have a few additional ideas (such as conditional placeholders) on my todo list.
      One smallish and rather specific difference is that MarkupMenu supports overriding default options via $config->MarkupMenu. I find myself redefining the default markup for every site, which until now meant that each site has a wrapper function for MarkupSimpleNavigation (to avoid code / config repetition), and this way I've been able to omit that 🙂
      Requirements
      ProcessWire >= 3.0.112 PHP >= 7.1.0 If you're working on an earlier version of ProcessWire or PHP, use MarkupSimpleNavigation instead.
    • By Robin S
      Repeater Images
      Adds options to modify Repeater fields to make them convenient for "page-per-image" usage. Using a page-per-image approach allows for additional fields to be associated with each image, to record things such as photographer, date, license, links, etc.
      When Repeater Images is enabled for a Repeater field the module changes the appearance of the Repeater inputfield to be similar (but not identical) to an Images field. The collapsed view shows a thumbnail for each Repeater item, and items can be expanded for field editing.
      Screencast

      Installation
      Install the Repeater Images module.
      Setup
      Create an image field to use in the Repeater field. Recommended settings for the image field are "Maximum files allowed" set to 1 and "Formatted value" set to "Single item (null if empty)". Create a Repeater field. Add the image field to the Repeater. If you want additional fields in the Repeater create and add these also. Repeater Images configuration
      Tick the "Activate Repeater Images for this Repeater field" checkbox. In the "Image field within Repeater" dropdown select the single image field. You must save the Repeater field settings to see any newly added Image fields in the dropdown. Adjust the image thumbnail height if you want (unlike the core Images field there is no slider to change thumbnail height within Page Edit). Note: the depth option for Repeater fields is not compatible with the Repeater Images module.
      Image uploads feature
      There is a checkbox to activate image uploads. This feature allows users to quickly and easily add images to the Repeater Images field by uploading them to an adjacent "upload" field.
      To use this feature you must add the image field selected in the Repeater Images config to the template of the page containing the Repeater Images field - immediately above or below the Repeater Images field would be a good position.
      It's recommended to set the label for this field in template context to "Upload images" or similar, and set the visibility of the field to "Closed" so that it takes up less room when it's not being used. Note that when you drag images to a closed Images field it will automatically open. You don't need to worry about the "Maximum files allowed" setting because the Repeater Images module overrides this for the upload field.
      New Repeater items will be created from the images uploaded to the upload field when the page is saved. The user can add descriptions and tags to the images while they are still in the upload field and these will be retained in the Repeater items. Images are automatically deleted from the upload field when the page is saved.
      Tips
      The "Use accordion mode?" option in the Repeater field settings is useful for keeping the inputfield compact, with only one image item open for editing at a time. The "Repeater item labels" setting determines what is shown in the thumbnail overlay on hover. Example for an image field named "image": {image.basename} ({image.width}x{image.height})  
      https://github.com/Toutouwai/RepeaterImages
      https://modules.processwire.com/modules/repeater-images/
    • By EyeDentify
      Hello There Guys.

      I am in the process of getting into making my first modules for PW and i had a question for you PHP and PW gurus in here.

      I was wondering how i could use an external library, lets say TwitterOAuth in my PW module.
      Link to library
      https://twitteroauth.com/

      Would the code below be correct or how would i go about this:
      <?PHP namespace ProcessWire; /* load the TwitterOAuth library from my Module folder */ require "twitteroauth/autoload.php"; use Abraham\TwitterOAuth\TwitterOAuth; class EyeTwitter extends WireData,TwitterOAuth implements Module { /* vars */ protected $twConnection; /* extend parent TwitterOAuth contructor $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token, $access_token_secret); */ public function myTwitterConnection ($consumer_key, $consumer_secret, $access_token, $access_token_secret) { /* save the connection for use later */ $this->twConnection = TwitterOAuth::__construct($consumer_key, $consumer_secret, $access_token, $access_token_secret); } } ?> Am i on the right trail here or i am barking up the wrong tree?
      I don´t need a complete solution, i just wonder if i am including the external library the right way.
      If not, then give me a few hint´s and i will figure it out.

      Thanks a bunch.

      /EyeDentify
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version (has been tested up to v3.3), add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "http://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


×
×
  • Create New...