Module Page List Image Label

[Soma]

PageListImageLabel

Marty requested and sponsored a new module little while ago.

http://processwire.c...t-image-option/

I just wanted to create a separate release thread. Many thanks to Marty for sponsoring and making this possible. This just shows how great this community is.

So here it is the Page List Image Label module. It enables you to add thumbnails of images from the pages in the admin page tree.

Download:

http://modules.processwire.com/modules/page-list-image-label/

Github: 

https://github.com/somatonic/PageListImageLabel

A screenshot of it in production. (old version)

[SiNNuT]

Great stuff!

[arjen]

Thanks, Soma. Great module. Finally got a chance to use this in a new project.

[Soma]

Ryan, the image generation stops working for crop_images (apeisa modules thumbnails) with dev branch and file protection enabled.

I can see that somehow the new sizing of the thumbnail returns a protected url like /path/to/page/-/ But can't see how it would be possible to fix. It works with normal image fields.

Code that is responsible is.

// if image field is of type cropimage (thumbnails module)
if($this->fields->get($field)->type == "FieldtypeCropImage"){
 if(count($v)){
   $thumb_url = $v->first()->getThumb($subfield);
   $thumb_url = $v->url . $this->resizeThumb($v, $thumb_url, $size);
 }
} else { // all normal image fields
 if(count($v)){
   $thumb_url = $page->$field->first()->size($size[0],$size[1])->url;
 }
}

And the resize

private function resizeThumb($field, $thumb_url, $size){
 $thumb_path = $this->config->paths->root . $thumb_url;
 $filename = $size[0] . "x" . $size[1] . "_" . basename($thumb_url);
 $thumb_path_new = $field->path . $filename;
 if(@copy($thumb_path, $thumb_path_new )){
   $sizer = new ImageSizer($thumb_path_new);
   $sizer->resize($size[0],$size[1]);
   return $filename;
 } else return false;

}

[ryan]

The problem here is that resizeThumb()'s implementation assumes that one can construct the server path to the file from the URL (see the first line in that function). But the URL and disk path can be very different things. You may be able to fix it by replacing the first line in that function with this:

$thumb_path = $field->path() . basename($thumb_url);

[Soma]

The problem here is that resizeThumb()'s implementation assumes that one can construct the server path to the file from the URL (see the first line in that function). But the URL and disk path can be very different things. You may be able to fix it by replacing the first line in that function with this:

$thumb_path = $field->path() . basename($thumb_url);

You're my hero! Yes it seems this was it. I fixed it and while at it added check for if the image already exists to not create it everytime. Commited to the source. It's now on 1.0.2.

Thanks

[NikNak]

Hi Soma

Many thanks for this module - very helpful.

I have stumbled across an issue which I wrongly reported as a bug here: https://github.com/ryancramerdesign/ProcessWire/issues/232

Basically, if you wish to use a date as an output in a list alongside an image, it no longer formats the date as you specified. If I uninstall the module, the dates are formatted as expected.

Kind regards

Nik

[Soma]

Thanks for the report, I just pushed an update. and should be working now.

Problem was I never used dates, and I had page outputformatting turned off for easier image handling. Drawback of this is there's no N/A when there's no image found.

[NikNak]

Thanks so much. I'll give that a try.

Regards

Nik

[NikNak]

Hi again Soma

Just run into another issue.

I had a cropimage field set to allow up to 5 images and referenced the name 'banner_image.banner' to be displayed in the page list. (banner being the crop name).

This all worked fine until I changed the 'Max files allowed' to 1.  

Now when I try and list the files, I get an error message saying:

Method Pageimage::path does not exist or is not callable in this context.

If I try and use the image rather than the cropped reference (ie 'banner_image' instead of 'banner_image.banner')

The error I get is 'There is no Thumb called:'

Do you know if this is something I am doing wrong?

Kind regards

Nik

EDIT:

Elsewhere in the file tree I use an image field (not a cropimage) with 'max files allowed' equal to 1, and this outputs the images fine.

[adrian]

Nik,

This will fix the "There is no Thumb called" error:

https://github.com/somatonic/PageListImageLabel/pull/1

I've leave Soma to answer the other part.

[NikNak]

Ah... ok

Many thanks  I think I'll have to revert to having more than one image for now then. 

Regards

Nik

[Soma]

Yeah I know about the issue, but haven't been able to solve it in a convenient way, also now it has changed since then to outputformatting on which is different for image fields. Kinda have to take a look again, but not sure I'll be able to do it any soon. So if somebody gets a chance. Adrians' solution wasn't really cutting it I think when I tested it back then and requires more things to consider.

[adrian]

Sorry if my "solution" isn't cutting it - it is working perfectly in my scenario, but I guess I haven't thought it through for all use cases.

Sorry for any confusion

[NikNak]

Thanks for the response. I'll keep an eye on any future developments.

Kind regards

Nik

[MuchDev]

Howdy there Mr. Soma, I have to say first that I love this module and for the page I am using it with (which is for a collection of 60,000 artworks) this plugin has become essential. I was wondering if any progress has been made in order to fix the bug that was earlier reported. I would really be bummed if I couldn't use this. Hope all that is well with ya man .

Well it looks like I derped . I thought I was using your module but I guess I was using PageListBetterLabels sorry for the bother. 

[theFisher86]

I'm having trouble getting this working.  I'm not sure if I installed it correctly or am using it properly.

My images are in a structure like this 

Home
-Images
--Image Category 1
---Image_a
---Image_b
---Image_c
--Image Category 2
---Image_d
---Image_e
---Image_f

My Images are in their own specific template (called images) which contains an image field, a category field and a description field.  I want to create a generic fieldtype call img_picker which will allow the user to pick an image from any of the categories for placement on any page and I would like to use PageListImage Label to display them. 

I can't figure out which field I should be adding to which 'label' field.  Also, not quite sure which label field you're talking about in your instructions.  Please Help! 

[isellsoap]

I have a similar issue like theFisher86 (at least I think I do).

Putting the name of an image field in the "List of fields to display in the admin Page List" works fine.

But my scenario is as follows: I have a page selection field and selected a page which has an image field.

Is it possible to show the image of that selected page in the admin Page List? Using "page_select_field.image" just renders the image path in the admin Page List. :-(

[Soma]

@isellsoap No it's not supported/possible. Though I'm sure it can be implemented just not easy and I have no time. But you could create your own hook for that usecase it would be easier.

I'm having trouble getting this working.  I'm not sure if I installed it correctly or am using it properly.

My images are in a structure like this 

Home
-Images
--Image Category 1
---Image_a
---Image_b
---Image_c
--Image Category 2
---Image_d
---Image_e
---Image_f

My Images are in their own specific template (called images) which contains an image field, a category field and a description field.  I want to create a generic fieldtype call img_picker which will allow the user to pick an image from any of the categories for placement on any page and I would like to use PageListImage Label to display them. 

I can't figure out which field I should be adding to which 'label' field.  Also, not quite sure which label field you're talking about in your instructions.  Please Help! 

"All you need to do to enable it, is add the name (i.e. images) of the image field you have on the template to the custom label option in the advanced template settings."

In the template advanced setting you can enter field names what then would be the label in the page list tree. The function that is responsible for this is also hookable and there's several modules that do it you could look at how to archive what you want.

[tpr]

CSS awesomeness!

Enter this into the "Text color" field in the module settings:

transparent; width: 70px; height: 70px; border: none; background: transparent; border-radius: 100%; overflow: hidden; padding: 0; margin-right: 0.7em; color: #aaa

Also set the first field value to "70,70". No matter what you write elsewhere, the code above will overwrite it.

[adrian]

Hi @Soma - not sure if you're still supporting this module, but there is a conflict with the new expandable Pages > Tree menu. With this module installed, the page title appears blank. Please let me know if you have any trouble reproducing.

[adrian]

On 3/14/2017 at 1:28 PM, adrian said:

Hi @Soma - not sure if you're still supporting this module, but there is a conflict with the new expandable Pages > Tree menu. With this module installed, the page title appears blank. Please let me know if you have any trouble reproducing.

@Soma - here's a PR to fix this - thanks!

https://github.com/somatonic/PageListImageLabel/pull/4

[Soma]

Hey adrian thanks for the heads up and help! I'll look into it when I get time the next days. I'm not sure if it still is of much use anymore.

[Soma]

One of my older module just got some love!

So, just wanted to mention that the Module was updated to v2.0.0 with some changes.

1. Its now compatible with PW2.4+ and PW3+.

2. Some changes were made to how it works. It was replacing core function to create the page list labels thus some newer features were missing. Which was kinda pain in the ***. Now it's just hooking after and prepends the image. Done.

3. It also now is not enabled/configured through the template custom label anymore. You can configure templates via a textfield on the modules configuration screen. Just enter template names along with the image field you wish to use:

basic-page,image

Or

basic-page,image.landscape
document1,image.portrait 

 

4. It now supports also

FieldtypeCropImage (v1)
FieldtypeCroppableImage (v2)
FieldtypeCroppableImage3 (v3)
...

 

Thanks @adrian for the patience to fix some old problem, and give a hint at new PW3 menu issue.

Strange looking at it after years

[robinc]

What is the best way to bulk upload multiple images? Similar to how you can with an images/files field, but would need each page name to be unique autogenerated, maybe name and/or title from each filename, or incremental.

page structure: i have container page( or pages for separate groupings), with a child page for each image

I Recently came across this module - it's really helpful!

Thanks