Image focus point with zoom

ProcessWire 3.0.92

This version expands upon our recently introduced Focus Point selection feature for image fields by adding zoom support to the mix. This version also continues resolving GitHub issue reports as other recent dev versions have, while we work towards a release candidate for ProcessWire 3.1.

Focus point with zoom in image fields

A few weeks ago we introduced the focus point selection feature for image fields, and we've received a lot of positive feedback about this feature—we're glad you are finding it useful. In the post where it was introduced, we also showed you a preview of the zoom feature (video), but hadn't yet added it to the core. Now we have. This optional zoom feature enables you to not only select your focus point, but also zoom into it, giving the editor even more control over how non-proportional API-generated crops will appear.

This feature was a collaboration between Horst Nogajski and me. Horst handled development of the zoom feature on the PHP side (for our ImageSizerEngine modules, which he also developed), while I handled development of the front-end interactive part on the JS side. The result seems to work nicely, though note that I'd consider this feature to still be experimental (at least the front-end part), so it's not enabled by default. It's not perfect yet as there are still some details that need adjustment (again, on the front-end at least), though it's also useful and functional as it is for most images. But be on the lookout for additional tweaks to this feature in the coming weeks.

How to enable zoom

To enable zoom with focus point selection, edit your Images field (Setup > Fields > any images field), and click on the Input tab. Locate the “Focus point selection” field, and choose the “Focus point with zoom” option. Save, and then edit any page with an images field. After clicking the “Focus” button for any image, you should now have the option to not only select the focus point, but also to zoom into it using a draggable slider control. The zoom control helps you to further isolate and focus the subject of the image, and potentially exclude irrelevant aspects of the image.

Focus/zoom preview

Those already using the focus point feature in images fields may have noticed that it gives you both a static and live preview of your selection in the square grid of images. But this preview only appears if you are in the square images grid mode. That's because this is the only mode that doesn't display the entire image. This leaves open the opportunity to display a preview of your image with the focus point. Now this preview also displays your zoom selection as well. Of course, if your image size variations on the front-end aren't square like the preview, the actual result depend on your $image->size($width, $height) call, but the square preview should give a general idea. Also note the preview is a ballpark preview, as there may be some minor differences of a few pixels between your selection and the preview, but we're working on that.

Helpful tip: You can remove focus (and zoom) from an image by selecting “Remove focus” in the “Actions” dropdown for the image. This action only appears if the image already has a saved focus setting.

This is likely the last new feature that will be added to the 3.0.x dev branch, as we shift to focus exclusively on preparing ProcessWire 3.1 release candidates. Next week we'll talk more about getting ready for ProcessWire 3.1. By the way, there were once again lots more new awesome sites submitted this week in our sites directory—thanks for the submitting them, I'm amazed at the quality of work—keep them coming! Thanks for reading, enjoy the ProcessWire Weekly, and have a great weekend!


Twitter updates

  • We added WebP image support this year and many have been adopting it in existing projects. We look at a process used for migrating existing websites to WebP images— from preliminary considerations to implementation & testing, w/lots of tips & tricks too: More
    16 August 2019
  • Core version 3.0.137 on the dev branch adds the ability to hook multiple methods at once, in a single call. This post details how it works and provides a useful example of how you might put it to use in your development environment— More
    2 August 2019
  • ProcessWire 3.0.136 updates our CKEditor version and adds a new backtrace() method to the core Debug class— More
    26 July 2019

Latest news

  • ProcessWire Weekly #275
    In the 275th issue of ProcessWire Weekly we're going to walk you through the new features included in ProcessWire 3.0.138, cover some WebP related stuff, and highlight recent forum posts and online resources. Read on! / 17 August 2019
  • WebP images on an existing site
    In this post we’ll look at a process used for migrating an existing website to use WebP images. We’ll cover everything from preliminary considerations to implementation and testing, with lots of tips and tricks along the way.
    Blog / 16 August 2019
  • Subscribe to weekly ProcessWire news

“…building with ProcessWire was a breeze, I really love all the flexibility the system provides. I can’t imagine using any other CMS in the future.” —Thomas Aull