Jump to content

Module: Custom Page List


dynweb
 Share

Recommended Posts

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
 
 
 
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.
 
  • Like 14
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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!

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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;
                    }
                }
  • Like 3
Link to comment
Share on other sites

  • 6 months later...

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.

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

  • 7 months later...
  • 1 year later...

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Sebii
Link to comment
Share on other sites

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!

Link to comment
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
 Share

×
×
  • Create New...