Enhanced Page Selector for ProcessWire Page Fields

Modal: Adding Pages Using Thumbs View

We are now ready to add pages to our page field. This lesson is relevant only if you selected Thumbs view in the field setting Page Selector View.

Click on the link to add pages.

A modal window will open to display thumbs of selectable pages in a grid-like view. It may take a while for the page to load fully as image thumbs are generated. Subsequent loads should be very fast.

To select a page, click on its thumbnail. A reddish border will appear around it. To unselect it, click on the thumbnail again. The reddish border will disappear. To select all pages, click on the link Select All. To deselect all pages, click on the link Unselect All.These two links are at the bottom right of the grid.

To add selected pages to the page field, using the action select/dropdown on the top right, select the option Add Page then click on the button Apply Action to complete the action. The pages will be added to your page field and the modal window refreshes.

The thumbnails of the pages added to the page field now appear slightly transparent. This is the visual indication that those pages are now in your page field. Excellent! How easy was that?

To remove pages from the page field when still in the modal window, select the pages first, then in the action select/dropdown, choose Remove Page.

The modal window refreshes and the thumbnails of those pages now appear normal.

To delete pages (trash them), select them and apply the action Delete Page in the action dropdown and hit Apply Action.

The pages will be sent to the ProcessWire trash if the user has the ProcessWire permission to trash the respective pages.

To delete the images linked to the selectable pages, i.e. the images used to create the thumbnails, select the pages first and select Delete Image in the action dropdown. Click on Apply Action. Those images will be deleted if the user has the ProcessWire permission to edit the respective pages.

If the template used by those pages had more than one valid image field (as specified in the field setting Image Fields), the next available image thumb will be displayed. Otherwise, a generic ‘no image’ thumbnail will be displayed.

As earlier stated, the actions to delete pages or images will only appear in the dropdown if you allowed this in the fields’ settings and the related respective permissions are not in effect.

Close the modal window to see the changes in the edited page field. The pages you added are displayed in the Inputfield. In a later topic, we will look at how to manipulate the results for selectable pages using search, filters, sort as well as displaying other information about the selectable pages (Modal Lister view).