Page List "image" Label

[Soma]

Hey since I'm porting a site to PW2.1 I were thinking about what could help my mom managing her online art gallery.

The current gallery is custom coded, and had a table list view approach where one would see thumbs of the images. This helps to recognize the image without open the entry.

Since PW doesn't support this (yet), I thought that it may be cool to have the possibility of a label of type image in the page tree. I went to look for simple a solution and hacked the ProcessPageList Module to check for a custom label of string "image", then getting the image and return a img tag. Although I had to comment out the strip_tags and htmlspecialchars that's done before added to the label string (I think they can be configured to allow <img>... ). But it seems to work pretty well and sorting still works well.

I'm sure there's a better solution and this is just sort of a proof of concept. Ryan, would of course know how to implement this far more convenient (possible to make a module for this, Ryan?) may with some additional configurations for thumb size etc. May this whole thing will be obsolete once Ryan implements a raster table view alternative for page navigation... (thought I've read it somewhere that it's planed) then thumbs would be much easier to handle.

Here's a screenshot:

with a little more styling:

Here's where I modified the code a little:

<?php
foreach($fields as $field) {

		if(strpos($field, ".")) {
			list($field, $subfield) = explode(".", $field); 
		} else $subfield = '';

// modified this part

		if($field == 'image') $v = '<img style="display:inline;" src="'.$page->image->size(0,30)->url.'"/>'; 
			else $v = $page->get($field); 

?>

I would love to hear some thoughts on this subject.

OT: Apart from that I think I spotted a problem with the page tree drag and drop sorting... Unfortunately it isn't possible to move pages around in a paged sublevel. Like moving from page to page. Are there any thoughts made on this issue? EDIT: Just found the "more" link at the bottom of the paged list, which makes it possible to... not very obvious but possible, and manual sorting on very large lists is anyway silly

[ryan]

Looks cool–I will reply a bit later, getting called to dinner.

[Soma]

Thanks Ryan, but that must be a long dinner...

[ryan]

Sorry I haven't actually made it back to computer yet, just on cell and hard to type on this looks like I've got lots of msgs to catch up with hope to get back in office later today to catch up

[ryan]

Soma this seems like a great solution for when it's needed. Given that PW lets you specify image fields as "fields to show" in the pagelist (in each template's settings), it seems like it should do something like what you've put together here. If you don't mind, I'll implement something similar for when someone specifies an image field to appear in the pagelist.

[Soma]

Ryan, thanks for your time. I'm glad you like it. No I don't mind, that would be cool if you could implement something like this, as you said it's already there just not suitable yet for image type fields. Tell me if you need any help or suggestions/ideas. I could imagine something along the lines of a "fieldname[0,30]" to specifiy thumb width? Or a seperate config setting to specify it somewhere.

[Marty Walker]

Hi Soma,

I would love to see this as a module if possible. Do you have any plans for this. I can see it being extremely useful.

Regards

Marty

[Soma]

hey smd

There's no plans currently. I even don't know if it would be possible by a module to add this feature to the page list tree.

[Marty Walker]

Thanks Soma,

Is there a trick to getting your mod to work in 2.2?

Regards

Marty

[Soma]

You see the code in my first post. It's around #360 in ProcessPageList.module.

[Marty Walker]

I tried that and changed the template settings too. I just get a blinking page loader arrow. No bother. I don't like modding core files anyway.

It would be great if this was an core option at some point. PW is such a great CMS for artists. Having thumbnails alongside page names would be a great time-saver.

Cheers

Marty

[Soma]

Sorry I meant #306. It has to be like this:

public function ___getPageLabel(Page $page) {

       $value = '';

       // if the page's template specifies a pageLabelField, use that 
       $pageLabelField = trim($page->template->pageLabelField); 

       // otherwise use the one specified with this instance
       if(!strlen($pageLabelField)) $pageLabelField = $this->pageLabelField;

       // convert to array
       if(strpos($pageLabelField, ' ')) $fields = explode(' ', $pageLabelField); 
           else $fields = array($pageLabelField); 

       foreach($fields as $field) {

           if(strpos($field, ".")) {
               list($field, $subfield) = explode(".", $field); 
           } else $subfield = '';

           if($field == 'image') $v = '<img style="display:inline;" src="'.$page->image->size(0,30)->url.'"/>'; 
               else $v = $page->get($field);

           //$v = $page->get($field); 

           if($subfield && is_object($v)) {
               if($v instanceof WireArray && count($v)) $v = $v->first();
               $v = $v->get($subfield);

           } else if(($field == 'created' || $field == 'modified') && ctype_digit("$v")) {
               $v = date($this->fuel('config')->dateFormat, (int) $v); 
           }

           if($v) $value .= ($value ? ', ' : '') . "$v";
       }

       if(!strlen($value)) $value = $page->get("name"); 

       $value = strip_tags($value); 
       $value = htmlspecialchars($value, ENT_QUOTES, "UTF-8", false); 

       return $value;
   }

Yes, I wonder what Ryan thinks

[Marty Walker]

I think it's not working for me because I'm using the CropImage module.

[apeisa]

I think it's not working for me because I'm using the CropImage module.

That damn module is always ruining all the fun.. damnit!

To be honest: I need to check the code if there is something I could do to make it behave more like normal image field.

[ryan]

There's no plans currently. I even don't know if it would be possible by a module to add this feature to the page list tree.

It should be possible using the ProcessPageListRender::getPageLabel hook. That function is given a $page as an argument, and it returns the label to use for the page in the page list. If you hook in after it, or hook replace it, you should be able to have it return an <img> tag instead.

This is something we may want to add to the core at some point too, but based on a quick look, it appears that a module could accomplish it pretty easily.

[marcin]

It can look like this: http://jsfiddle.net/XXnTQ/1/

Image is under page title, you can preview it better after hover.