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

  • ProcessWire 3.0.168 core updates — More
    26 October 2020
  • This week a 2nd new module for processing Stripe payments has been added to FormBuilder. Unlike our other Stripe Inputfield, this new one supports 3D Secure (SCA) payments. We’ll take a closer look at it in this post, plus a live demo— More
    16 October 2020
  • Quick weekly update covering this week's commits for the upcoming 3.0.167 ProcessWire core version— More
    18 September 2020

Latest news

  • ProcessWire Weekly #337
    In the 337th issue of ProcessWire Weekly we're going to introduce a couple of brand new third party modules, take a closer look at the latest core updates, and more. Read on! / 24 October 2020
  • Stripe Payment Processor for FormBuilder
    This week a second new module for processing Stripe payments has been added to FormBuilder. We’ll take a closer look at it in this blog post, plus we’ve got a demo of it here too.
    Blog / 16 October 2020
  • Subscribe to weekly ProcessWire news

“The end client and designer love the ease at which they can update the website. Training beyond how to log in wasn’t even necessary since ProcessWire’s default interface is straightforward.” —Jonathan Lahijani