New and useful image manipulation actions

ProcessWire 3.0.88 core updates

I mentioned last week that we'd look at the roadmap this week. I'm actually still working on that, so will post the 2018 roadmap next week instead. But I do have a version update this week which adds some useful tools to our images field in the admin (InputfieldImage), and I think this is one that both you and your clients will find really handy.

New image actions

On several occasions, I've had clients ask me "How do I fix this photo"? Usually that means that the photo is upside down, flipped the wrong way, or something like that. Despite cameras storing orientation data (which PW detects and uses), there still seem to be regular occasions where things just don't end up quite right with the photo that a client is using (for whatever reason). I suspect cameras make a best guess about intended orientation, which isn't always right. Whatever the reason is, the need comes up regularly enough to make me think we needed a solution.

I had tried adding the capability to our existing image editing tool a long time ago (the tool where you can crop and resize), but it didn't work so well there for various reasons. One being that it's just too slow of a process if you need to apply the same exact action to a bunch of images.

This week, when the need surfaced again with a client, I thought it was time to get something going, so went ahead and added it. You can now perform the following actions on any image in your images field(s):

  • Duplicate (creates another copy/clone of the image)
  • Flip vertical
  • Flip horizontal
  • Flip both
  • Rotate 90 degrees (clockwise or counterclockwise)
  • Rotate 180 degrees (clockwise or counterclockwise)
  • Rotate 270 degrees (clockwise or counterclockwise)
  • Convert to black and white (greyscale)
  • Convert to sepia tone
  • Reduce/minify (quickly reduce by 50%, supported when IMagick installed)

The best way to demonstrate is just to show you a couple of screenshots. In this first screenshot, we can see an InputfieldImage with different actions applied to the images. The "duplicate" action was used to create several different copies of the same image. The first image is the original, and the others are either flipped, rotated, or have had color adjustments.

The next screenshot shows how the actions are applied. There is a new “Actions” select box next to the existing Crop and Variations buttons. You can select an action here, and it will be applied when the page is saved.

I've also updated our ImageSizer engine modules (ImageSizerEngineGD and ImageSizerEngineIMagick) to support all of these actions via newly added API methods. Whether using the default GD functions, or the optional IMagick module, you'll get equally nice results from these actions. However, in my experience so far, the IMagick module can produce results a little more quickly, while also using less memory. This also means you can process larger images with IMagick that might exhaust memory in GD. It is most noticeable on off-camera photos with the Rotate action, which is particularly memory intensive in GD, but doesn't appear to be in IMagick. But if you aren't dealing with giant off-camera images, then I think you'll be equally happy either way.

Should you want it, just as a reminder, the IMagick module is included with the PW core and you can install it from Modules > Install > ImageSizerEngineIMagick, so long as your PHP installation has the Imagick module present. Thanks to Horst for creating this module, which was added to the core many versions ago.

In addition to the actions mentioned above, more actions an can be added by way of hooks. I think we'll also be adding some more built-in actions here, so open to any suggestions you have. A few that I'd started but hadn't yet finished are:

  • Remove image variations
  • Rebuild image variations
  • Cut, copy and paste (for movement of images between pages and/or image fields)

I hope that you all are having a great start to the New Year, and we'll see you back here next week hopefully with the 2018 roadmap! As always, for the latest ProcessWire news, check in at the ProcessWire Weekly. Have a great weekend.

Comments

  • DaveP

    DaveP

    • 6 years ago
    • 30

    Great addition which will be very useful. Just to echo Ryan's comments, enable the Imagick module if your hosting allows - it is a big improvement over GD.

  • Nikolaus Rademacher

    Nikolaus Rademacher

    These are great updates to the image fields, Ryan! Very cool :)

    One feature request that comes up very often with our users is being able to crop in predefined canvas relations (i.e. 4:3, 16:10, custom) so that the image doesn‘t get cropped awkwardly by the system. Thinking of the seperation of content and display, the best way to implement such a functionality would probably be with the variations dialogue.

    Keep up the good work :)

  • Nikolaus Rademacher

    Nikolaus Rademacher

    • 6 years ago
    • 20

    These are great updates to the image fields, Ryan! Very cool :)

    One feature request that comes up very often with our users is being able to crop in predefined canvas relations (i.e. 4:3, 16:10, custom) so that the image doesn‘t get cropped awkwardly by the system. Thinking of the seperation of content and display, the best way to implement such a functionality would probably be with the variations dialogue.

    Keep up the good work :)

  • Pretobrazza

    Pretobrazza

    • 6 years ago
    • 41

    Great addition indeed!
    Maybe I'm just dreaming up loud but as PW is reading the orientation data (which PW detects and uses), couldn't it also read and write LatLng to e.g. the $page->map->lat and ->map->lng fields?
    In some cases, this would be extremely useful if this option would exist out of the box!

 

PrevProcessWire 3.0.87 core updates

8

For our final dev branch version of 2017, we've added a couple new features that I think you'll find useful. For starters, we've added drag-and-drop (and paste) image upload support to our richtext editor (CKEditor), which is really handy. We've got all the details and a short screencast here as well.  More 

NextProcessWire 2018 Roadmap

5

In this post, we take a look at all that was covered in 2017, and our roadmap for 2018, which includes plans for the year ahead. More 

Latest news

  • ProcessWire Weekly #515
    In the 515th issue of ProcessWire Weekly we’ll check out the latest core updates, new modules, and more. Read on!
    Weekly.pw / 23 March 2024
  • Invoices Site Profile
    The new invoices site profile is a free invoicing application developed in ProcessWire. It enables you to create invoices, record payments to them, email invoices to clients, print invoices, and more. This post covers all the details.
    Blog / 15 March 2024
  • Subscribe to weekly ProcessWire news

“I am currently managing a ProcessWire site with 2 million+ pages. It’s admirably fast, and much, much faster than any other CMS we tested.” —Nickie, Web developer