Jump to content

Page List Image Label


Soma
 Share

Recommended Posts

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)

post-100-0-60777700-1339186188_thumb.png

  • Like 10
Link to comment
Share on other sites

  • 3 months later...
  • 1 month later...

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;

}
Link to comment
Share on other sites

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

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

  • Like 2
Link to comment
Share on other sites

  • 10 months later...

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.

post-1696-0-08821800-1381155028_thumb.pn

Kind regards

Nik

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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 :D. I thought I was using your module but I guess I was using PageListBetterLabels sorry for the bother. 

Link to comment
Share on other sites

  • 5 months later...

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!  :frantics:

Link to comment
Share on other sites

  • 3 weeks later...

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. :-(

Link to comment
Share on other sites

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

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

post-100-0-31258700-1438079207_thumb.png

Link to comment
Share on other sites

  • 3 months later...

CSS awesomeness!

post-3156-0-82815000-1447363473_thumb.pn

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.

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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 ;)

  • Like 8
Link to comment
Share on other sites

  • 3 months later...

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

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By kixe
      Field that stores one or more references to ProcessWire pages with additional data in field context.
      Values are editable via page edit modal of the referenced page provided from the field if module AdminPageFieldEditLinks is installed and "Enable link to create new pages?" is checked in field settings.
      Requirements: AdminPageFieldEditLinks >= 3.1.4
      https://github.com/kixe/FieldtypePageContextData
      https://processwire.com/modules/fieldtype-page-context-data/
      Use case example:
      The planning of the Tonmeistertagung in the CCD (Congress Center Düsseldorf) from November 3rd, 2021 to November 6th, 2021 is in the finalization phase.
      The conference consists of a conference part and an exhibition. The planning is done via a separate frontendless PW instance. There, all companies (pages) that are active at various events are kept in a pool. Changes (address, logo) can always be done there. For the exhibition of the current conference in November, the exhibitor-companies (pages) are selected via a page reference field. A stand number must now be assigned to each selected company (page). We had originally solved this using the Profield FieldtypeTable. However, this had the disadvantage that each entry again made all companies available for selection and did not recognize which were already selected in a previous table row. The new field type now allows the value (company's stand number) to be assigned to a Company (page) in context to a specific Pagefield living in a specific page.
      https://tonmeistertagung.com/en/exhibitors/exhibition/
       
    • By Robin S
      This module lets you add some custom menu items to the main admin menu, and you can set the dropdown links dynamically in a hook if needed.
      Sidenote: the module config uses some repeatable/sortable rows for the child link settings, similar to the ProFields Table interface. The data gets saved as JSON in a hidden textarea field. Might be interesting to other module developers?
      Custom Admin Menus
      Adds up to three custom menu items with optional dropdowns to the main admin menu.
      The menu items can link to admin pages, front-end pages, or pages on external websites.
      The links can be set to open in a new browser tab, and child links in the dropdown can be given an icon.
      Requires ProcessWire v3.0.178 or newer.
      Screenshots
      Example of menu items

      Module config for the menus

      Link list shown when parent menu item is not given a URL

      Advanced
      Setting child menu items dynamically
      If needed you can set the child menu items dynamically using a hook.
      Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $colours = $event->wire()->pages->findRaw('template=colour', ['title', 'url', 'page_icon']); $children = []; foreach($colours as $colour) { // Each child item should be an array with the following keys $children[] = [ 'icon' => $colour['page_icon'], 'label' => $colour['title'], 'url' => $colour['url'], 'newtab' => false, ]; } $event->return = $children; } }); Create multiple levels of flyout menus
      It's also possible to create multiple levels of flyout submenus using a hook.

      For each level a submenu can be defined in a "children" item. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $children = [ [ 'icon' => 'adjust', 'label' => 'One', 'url' => '/one/', 'newtab' => false, ], [ 'icon' => 'anchor', 'label' => 'Two', 'url' => '/two/', 'newtab' => false, 'children' => [ [ 'icon' => 'child', 'label' => 'Red', 'url' => '/red/', 'newtab' => false, ], [ 'icon' => 'bullhorn', 'label' => 'Green', 'url' => '/green/', 'newtab' => false, 'children' => [ [ 'icon' => 'wifi', 'label' => 'Small', 'url' => '/small/', 'newtab' => true, ], [ 'icon' => 'codepen', 'label' => 'Medium', 'url' => '/medium/', 'newtab' => false, ], [ 'icon' => 'cogs', 'label' => 'Large', 'url' => '/large/', 'newtab' => false, ], ] ], [ 'icon' => 'futbol-o', 'label' => 'Blue', 'url' => '/blue/', 'newtab' => true, ], ] ], [ 'icon' => 'hand-o-left', 'label' => 'Three', 'url' => '/three/', 'newtab' => false, ], ]; $event->return = $children; } }); Showing/hiding menus according to user role
      You can determine which menu items can be seen by a role by checking the user's role in the hook.
      For example, if a user has or lacks a role you could include different child menu items in the hook return value. Or if you want to conditionally hide a custom menu altogether you can set the return value to false. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); $user = $event->wire()->user; // For custom menu number 1... if($menu_number === 1) { // ...if user does not have some particular role... if(!$user->hasRole('foo')) { // ...do not show the menu $event->return = false; } } });  
      https://github.com/Toutouwai/CustomAdminMenus
      https://processwire.com/modules/custom-admin-menus/
    • By tcnet
      This module for ProcessWire sends a notification email for each failed login attempt. Similar modules exists already in the module directory of ProcessWire. However, this module is designed to notify, even if specified user doesn't exist.
      Settings
      The settings for this module are located in the menu Modules=>Configure=>LoginFailNotifier.
      Notification email
      Specifies the email address to which the notification emails should be sent.
        Email subject
      Specifies the subject line for the notification email.
        Post variables
      Specifies the $_POST variables to be included in the notification email. Each variable must be separated by a comma. For example: login_name,login_pass
        Server variables
      Specifies the $_SERVER variables to be included in the notification email. Each variable must be separated by a comma. For example: REMOTE_ADDR,HTTP_USER_AGENT
      Link to ProcessWire module directory:
      https://processwire.com/modules/login-fail-notifier/
      Link to github.com:
      https://github.com/techcnet/LoginFailNotifier
    • By Fokke
      ProcessWire 3.x markup module for rendering meta tags in HTML document head section. Note that this module is not a full-blown SEO solution, but rather a simple tool for rendering meta tags based on module configuration. Adding custom meta tags is also supported.
      Built-in meta tags
      The following meta tags are supported out-of-the-box:
      Document title consisting of page title and site name Character set Canonical Viewport Description Keywords Hreflang tags Open Graph og:title og:site_name og:type og:url og:description og:image og:image:width og:image:height Twitter meta tags twitter:card twitter:site twitter:creator twitter:title twitter:description twitter:image Facebook meta tags fb:app_id The full documentation with configurable options can be found here: https://github.com/Fokke-/MarkupMetadata
       
      Requirements:
      ProcessWire>=3.0.0 PHP >=7.1 Installation using Composer
      composer require fokke/markup-metadata Manual installation
      Download latest version from https://github.com/Fokke-/MarkupMetadata/archive/master.zip Extract module files to site/modules/MarkupMetadata directory.
    • By m.sieber
      ITRK-Service for ProcessWire
      Module for the automated transfer of imprint, data protection declaration and terms and conditions from IT-Recht Kanzlei to your ProcessWire installation
      What is ITRK Service for ProcessWire?
      ITRK-Service for ProcessWire is a free module for ProcessWire CMS. It provides an interface to the update service of IT-Recht Kanzlei, via which the legal texts of your online presence are automatically updated. In this way, the texts remain legally secure and warning-proof in the long term. Imprint, data protection declaration, revocation and general terms and conditions are currently supported.
      You can find our documentation (in german language) here: https://www.pupit.de/itrk-service-for-processwire/dokumentation/

      Download: https://www.pupit.de/itrk-service-for-processwire/
      Github: https://github.com/pupit-de/pwItrkServiceConnector
×
×
  • Create New...