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!