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.192 (dev branch) contains 11 issue fixes and 5 pull requests, over 20 commits— More
    7 January 2022
  • ProcessWire 3.0.191 core updates: updates to the installer and the profile exporter module— More
    24 December 2021
  • This week ProcessWire went on a diet, trimming the core size from 15.5 MB down to 7.5 MB by moving optional site profiles into their own GitHub repos— More
    17 December 2021

Latest news

  • ProcessWire Weekly #401
    In the 401st issue of ProcessWire Weekly we'll cover the latest core updates, check out a brand new module called Lister Native Date Format, and more. Read on! / 15 January 2022
  • ProcessWire 3.0.190 core updates
    ProcessWire 3.0.190 has 15 commits relative to 3.0.189 and contains a mixture of issue resolutions and feature additions. This post covers them all, in addition to updates for the PageAutosave and ProFields Table modules.
    Blog / 3 December 2021
  • Subscribe to weekly ProcessWire news

I just love the easy and intuitive ProcessWire API. ProcessWire rocks!” —Jens Martsch, Web developer