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
Last week there wasn't a blog post, but instead there was a long forum post about why there wasn't blog post—the weather got me! To follow up from that, the weather improved, the new furnace is being installed as I type this, and it looks like the snow removal operation in my attic was a success. Looking back on it, I was really lucky that the furnace stopped working. That's because, had it been working, the snow in my attic would have melted before I could have cleared it out, and I probably would have had to replace the entire ceiling, insulation, etc. What seemed like a big problem at first (furnace kaput) turned out to be some really good timing.
ProcessWire 3.0.89 is the latest dev branch version and it includes fixes for a lot of GitHub issue reports. It also includes a new focus point image cropping feature, which came in as #150 from @thomasaull in our processwire-requests repository. This post will take a closer look at that new feature.
Focus point cropping
One of the items on our 2018 roadmap is support for predefined crops. I've always been a little shy about a predefined crop feature because crops with specific dimensions (or proportions) are a design-specific element. I've always felt the content management environment should be isolated from the design details of the front-end. Redesigning the front-end shouldn't require one to go back into the admin and re-do things. But predefined crops have pixel dimensions or proportions that are specific to the styling needs of the front-end. If the output needs of the front-end change (like a switch from portrait to landscape photos of some dimension/proportion), then that means the crops the editor created are no longer relevant and they would have to go back and create new ones for the new styling needs of the front-end.
This is why I was very enthusiastic about feature request #150 when I saw it, because it seems like it solves the need for predefined crops, but in a way that is much more scalable across design changes. That's because with focus point cropping, the editor need only determine what's the important subject of the photo, while the designer/developer still determines the necessary dimension or proportion to use on the front-end. So no matter what size photos are needed on the front-end, a variation in any dimension can be created that ensures the subject of the photo is never cropped out.
While the focus point feature is new to the core, it's something you are probably already familiar with as it's used in a lot of other places, and even an existing module that's been around for a long time. I'm also not suggesting that it entirely replaces the need for predefined crops. Certainly predefined crops provide more fine grained control for those that want it, and what you see is what you get. But I also think the focus point solution is a better balance when it comes to solving the problem of crops, while avoiding design dependencies (and thus being more scalable).
Below is a short video that demonstrates how this feature works in ProcessWire.
The video above also demonstrated an optional zoom feature, which I temporarily enabled just to show you how that might work. That's very preliminary, far from complete, and technically not really even necessary (since we already have a crop feature). But I thought it would be a useful addition to the focus point feature, perhaps as an optional feature that can be enabled with it.
A few other things to note on the focus point feature:
If you are in square thumbnail (grid) mode, they act as a type of live preview. Not really necessary, but perhaps helpful still. If you are in proportional grid mode or in list mode, the entire image is shown, so you won't see previews there.
One of the reasons I wanted the focus feature to operate right in the Image Inputfield (and not elsewhere, like in a modal window) is so that you could quickly define the focus point for lots of images.
Note the icons shown for the Focus button. If you see a round circle, it indicates there is no focus defined. If you see a round circle with a checkbox in it, it means focus is defined. This is a way you can quickly determine (in list mode) which images have a focus point and which don't.
Whenever you change the focus point of an image, it re-creates the existing image variations (having both defined width and height) to use the new focus point. Custom cropped images (like those sized/cropped in CKEditor) are not re-created automatically, since they are already finalized by the editor rather than some automated process.
If you want to remove any focus settings for an image (reverting back to 50% left, 50% top) there is a new action in the Actions select called "Remove focus". This action does not currently re-create variations, but you can do that from the Variations button.
Focus point and API
When it comes to creating different image size variations on the front-end, you don't have to do anything at all. Focus point is immediately useful, without you having to do anything from the development side. Focus point comes into play on any
$image->size() call that specifies both width and height dimensions. If only one dimension is specified (just width, or just height) then the focus point is ignored, since an image proportional to the original is always created. Meaning there is nothing for a focus point to achieve on
While perhaps unlikely, if there is a situation where you want the focus point to be ignored by the
$image->size() call, then include
'focus' => false in the
$options array argument. If you are creating both focused and non-focused versions of the same image at the same dimension, make sure you also specify a suffix for one of them, so their filenames aren't identical, i.e.
'suffix' => 'nofocus', but the 'nofocus' part would be whatever suffix you choose to use for the purpose.
If you want to use the defined focus point settings for some other purpose, perhaps for CSS
background-position or the like, this information is available with every image (Pageimage instance). Simply call the
$image->focus() method, and it returns an associative array containing "top" and "left" properties, which represent percentages from top and left to the focus point.
Hope that you enjoy this new feature, please let us know how it works for you. Have a great weekend and enjoy reading the ProcessWire Weekly.