Weekly update – 27 January 2023

[ryan]

This week we've got a few minor issue fixes and a couple of pull request additions on the dev branch. Pull request #251 thanks to @Jan Romero added a download button to the thumbnail images in InputfieldImage. I wasn't sure we really needed that, but really liked his thinking behind it, which was envisioning the ability to add more custom buttons/actions for images. So while I didn't specifically add the download button, I added the proposed system for adding any custom buttons, and then applied that same thinking to some other parts of InputfieldImage. And we'll talk about how to add that Download button here. ?

First, let's look at how you might add your own download button, and note we're using this as just an example, as you might add any kind of button this way. A new hookable getImageThumbnailActions() method was added for this purpose. So here's how you might hook it (in /site/ready.php) to add a download button:

$wire->addHookAfter('InputfieldImage::getImageThumbnailActions', function(HookEvent $event) {
  $image = $event->arguments(0); // Pageimage
  $class = $event->arguments(3); // class to use on all returned actions
  $a = $event->return; // array
  $icon = wireIconMarkup('download');
  $a['download'] = "<a class='$class' href='$image->url' download>$icon</a>";
  $event->return = $a;
}); 

With that hook in place, here's what it looks like when you hover a thumbnail image. And if you click that Download icon, it downloads the file to your computer:

or in list mode (download icon appears in right corner next to trash):

I was thinking it would be useful to also be able to add custom actions after you click the thumbnail, and it shows the image edit features. So let's add a Download button there instead, by hooking the new getImageEditButtons() method:

$wire->addHookAfter('InputfieldImage::getImageEditButtons', function(HookEvent $event) {
  $image = $event->arguments(0); // Pageimage
  $class = $event->arguments(3); // class(es) to use on all returned actions 
  $buttons = $event->return; // array, indexed by action name
  $icon = wireIconMarkup('download');
  $buttons['download'] = "<button class='$class'><a download href='$image->url'>$icon Download</a></button>";
  $event->return = $buttons;
});

And the result looks like this (see new Download button after Variations button):

We also have that Actions dropdown that you see in the screenshot above. This is already hookable but we've not had any good examples of it. In this case, you need two hooks: one to add the action to the <select> and another to handle the processing of the action when the page is saved. So in our next example, we'll demonstrate how to display verbose EXIF information about whatever image(s) the action was selected for.

In this first hook, we'll add the action to the Actions <select>: 

// Example of adding an “Get EXIF data” action to the <select>
$wire->addHookAfter('InputfieldImage::getFileActions', function(HookEvent $event) {
  $image = $event->arguments(0); // Pageimage
  if($image->ext == 'jpg' || $image->ext == 'jpeg') {
    $actions = $event->return; // array
    $actions['exif'] = 'Get EXIF data';
    $event->return = $actions;
  }
});

And in this next hook, we'll handle the action, which gets called when the page editor form is submitted:

// Example of handling an “Get EXIF data” action
$wire->addHookAfter('InputfieldImage::processUnknownFileAction', function(HookEvent $event) {
  $image = $event->arguments(0);
  $action = $event->arguments(1);
  if($action === 'exif' && file_exists($image->filename)) {
    $exif = exif_read_data($image->filename);
    $event->warning([ "EXIF data for $image->name" => $exif ], 'icon-photo nogroup');                       
    $event->return = true;
  }
});

And here's what it shows after you hit save (for any images that had the action selected): 

The screenshot above is truncated because it was about twice is big as what's above. All the above code examples are also included in the phpdoc for each of the relevant hookable methods in the InputfieldImage module.

For another recent useful addition, be sure to check out ProcessWire Weekly #454 (last week) which covered some new options available for the language translation functions like __text('hello'); where you can now tell it what kind of input type (and how many rows) to use in the admin translation interface, via inline PHP comments. Thanks for reading and I hope you have a great weekend!

[bernhard]

Hey @ryan thx for the additions! And thx @Jan Romero for the PR!

I think a download button is a must have on image fields, so for my taste it should be default, but until then I've added a tweak to RockMigrations (v2.15.0) so the download buttons are just a checkbox away ?