Module: Custom Page List

[dynweb]

Custom Page List lets you easily customize the page list (tree) in the admin section.

 

I wanted something more (easily) configurable than the existing solutions, so I tried to add some new functionality with an easy to use interface. This is my first module for ProcessWire, so don't hesitate to let me know how to make it better

 

Based on the work of

 

• Philipp Urlich (somatonic): PageListImageLabel https://github.com/somatonic/PageListImageLabel
• Adam Spruijt (adamspruijt): PageListBetterLabels https://github.com/adamspruijt/PageListBetterLabels

 

 

Features

 

• Customize styles and separators used in the page list
• Display custom labels for each field
• Display image thumbnails
• Display formatted dates
• Display info from related models (e.g. title field of related pages)
• Display on/off checkbox as "Yes/No" (ready for translation)
• Define output filter(s) for each field

 

 

Configuration

 

See the README that comes with the download.

 

 

Download

 

Source code is available at https://github.com/hgassen/custom-page-list.

 

[Soma]

Will checkout. Link is broken!

[dynweb]

Link fixed. Never trust a WYSIWIG editor.... Thank you, Soma.

[Pete]

This sounds awesome - excellent first post

[netcarver]

Great. Welcome to the forum too!

[ryan]

Nice work dynweb, thanks for posting this! Please add to the modules directory when you are ready too. 

One question I have is about the resizeThumb function. This may have come from one of the other modules you mentioned, I'm not sure. But it looks like it creates images in a different file format than the ones ProcessWire does, so I'm wondering what happens to those images when their source (larger) image gets deleted? Do the thumbs continue to exist? If so, you might want to change this to follow the same format of PW's images, which is [basename].[width]x[height].[ext]. If one of width or height are not defined in the resize, then they can be zero "0". But if your thumbnails follow this format, then ProcessWire will take care of cleaning them up when the source image is deleted or replaced. 

[dynweb]

Thank you, Ryan. You are right regarding the thumbs, the code comes from one of the existing modules.

I'll try to fix this and add it to the modules directory.

[Soma]

I wanted to add that both Page List Label modules copied my modules method resizeThumb(), which is only there to resize "FieldtypeCropImage" thumbnails (3rd party module) thus it's using another format for naming. Normal PW images get resized using normal $image->size(0,100) method.

Edit: thumbnails created by FieldTypeCropImage also still doesn't get deleted when the image is removed from page so I didn't bother about their naming too there.

[dynweb]

@Soma: You are right, the naming does not really matter in this case, but I still prefer to comply with PW naming conventions.

I also added a callback to delete the thumbs generated from cropimages if the parent image is deleted. And added the module to the modules directory

Thank you everybody for their feedback!

[geniestreiche]

Nice module dynweb.

In one of my templates i'm using the setting "title related_category.title" to display these two fields in the admin page list. When i click on a parent of an item with this template i get the error "Unknown Selector operator: '' -- was your selector value properly escaped?". When i delete the ".title" part of the field it works fine. Any idea.

[dynweb]

Please use (as you did) "related_category" as field name (with no subfield), and it will display the titles of all related items. Use of FieldtypePage.anysubfield is possible, but only the first related item is displayed (as in the Core module). I'll try to find a solution for the next version...

To avoid the error, please use this version.

[geniestreiche]

ahh... thanks dynweb   with version 1.0.3 it works fine.

[interrobang]

Thanks for this module. Works great so far. The only issue I have is, that the thumbnail generation doesn't work when using a single image field.

I quickly edited you module like this to fix single image fields:

// interrobang: additional check: $v instanceof Pageimage
            if ($v instanceof Pageimages || $v instanceof Pageimage && $thumbExists === false) {
                
                // Get image sizes
                if (strpos($options['pageLabelImageSize'], ',') !== false) {
                    $size = explode(',', $options['pageLabelImageSize']);
                    $sizeWidth = $size[0];
                    $sizeHeight = $size[1];
                } else {
                     $sizeWidth = $options['pageLabelImageSize'];
                     $sizeHeight = $options['pageLabelImageSize'];
                }
                
                if (!is_numeric($sizeWidth) || !is_numeric($sizeHeight)) {
                    $sizeWidth = $sizeHeight = 24;
                }

                if (count($v)) {
                    // If image field is of type cropimage (thumbnails module)
                    if ($this->fields->get($field)->type == 'FieldtypeCropImage' && $subfield) {
                        $thumbUrl = $v->first()->getThumb($subfield);
                        $thumbUrl = $v->url . $this->resizeThumb($v, $thumbUrl, array($sizeWidth, $sizeHeight));
// interrobang: additional elseifs for Pageimages and Pageimage
                    // Normal image fields
                    } elseif ($v instanceof Pageimages) {
                        $thumbUrl = $page->$field->first()->size($sizeWidth, $sizeHeight)->url;
                    } elseif ($v instanceof Pageimage) {
                        $thumbUrl = $page->$field->size($sizeWidth, $sizeHeight)->url;
                    }
                }

[Soma]

Just wanted to note that this module kinda falls apart with recent changes in PW (2.3.5 dev)

dates formatting doesn't work anymore/or never had

all labels are separated by "," suddenly after updating

it would be nice to either integrate something more advanced into core that allows for more control over labels.

Ryan?

I spent too much time tweaking and debugging with this modules and my own. Images labels, page fields, dates etc.

[ryan]

Recent versions of the dev branch add some more classes in there (if I'm remembering correctly) to make more style options possible in the pagelist. The separator character is now added by CSS rather than being in the markup, which is probably why it started showing up there. If it turns out to be problematic, I can change it back to a non-css solution for that. 

[arjen]

Thanks Ryan, the CSS solution was a real lifesaver today!

[ottogal]

Is the module Custom Page List compatible to the PW 3.0.18 devns version?

[Macrura]

@ottgal, you could try it out on a test install, and report back here (for example using MAMP etc.)

In fact it is always a good idea to test modules on a test installation before installing them on a live production site.

Most modules in the directory work fine on the latest version of PW.

There are 1 or 2 modules that need some case fixing to work with all newer versions of PW, but the compiler is there to make usage of the 3.x branch as glitch-free as possible.

[ottogal]

After some minor snags the module installed well in PW 3.0.18.

I had the same issue Soma talked about:

all labels are separated by "," suddenly after updating

Thanks to Ryan for this hint:

The separator character is now added by CSS rather than being in the markup

So I tried to get rid of the commas changing line 63 of 

/wire/modules/Process/ProcessPageList/ProcessPageList.css 

from

.PageListItem > a span + span:before {
	content: ', ';
}

to

.PageListItem > a span + span:before {
	content: '  ';
}

But of course, changing files in  /wire/  is always a bad idea.

So what is the right way: Copy the whole  ProcessPageList/   directory to   /site/modules/  ? Or copy just the css file - but to which location?

[Robin S]

So what is the right way: Copy the whole  ProcessPageList/   directory to   /site/modules/  ? Or copy just the css file - but to which location?

The whole module should be in /site/modules/ to begin with. You don't install modules into /wire/modules/ - that is only for the core modules.

[Sebii]

The whole module should be in /site/modules/ to begin with. You don't install modules into /wire/modules/ - that is only for the core modules.

I think the mentioned change it not part of the discussed module, but really a change of a core module. So that's not the problem.

@ottogal: You can try to use the AdminCustomFiles module (https://processwire.com/talk/topic/7588-admin-custom-files/) and just place a CSS file that overwrites this rule as you mentioned in your post already.

This should work if I'm not overlooking smth.

[Robin S]

I think the mentioned change it not part of the discussed module, but really a change of a core module.

Right you are, I didn't read carefully enough. AdminCustomFiles sounds like a good solution.

[ottogal]

@Sebii

Yes, that's the problem.

Thanks for the hint to the AdminCustomFiles module!  I'll give it a try (when I understand what to do...)

[Sebii]

You have to place a new CSS file with the overwriting rule in this modules "dynamic script & styles folder" (The new CSS you meantioned in your post).
In the configuration screen of the module, you can now select for which Processes these scripts &styles (your new css file) should be included/added to the rendering of the admin page.
I'm not 100% sure how the Process is named that you are looking for, but I guess smth like ProcessPageTree or similar is what you need to activate it for.

Edit: Actually it should be the ProcessPageList.

Edited May 20, 2016 by Sebii

[ottogal]

Thank you, Sebii, for your reply - I saw it just now when I came back to report success...

Indeed, it's ProcessPageList, since the css file containig the "bad" definition was ProcessPageList.css.

It took me a while to find the necessary settings - the drop-in examples were helpful. In fact it's really easy.

Thanks again!