ProcessWire 3.0.89 core updates

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

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 $image->width() or $image->height() calls.

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.

Comments

HC
- 7 years ago
- 8 0
★★★★★
Nice! Thanks Ryan. A great addition. Can’t wait to use it.
Reply
Teppo
- 7 years ago
- 6 2
Reminds me of a quote from the late mr. Jobs: “a lot of times people don't know what they want until you show it to them.” Still true. :)
Reply
Joe Regan
- 7 years ago
- 12 1
★★★★★
I didnt even know I needed this, but I need this badly!
Reply
Lenz
- 7 years ago
- 5 0
That's a absolutely great addition. This is an example for a feature, which sets apart a piece of software from the rest of the competition. Well thought out. Useful for real world requirements. Congrats !
Reply
Tom Reno
- 7 years ago
- 3 1
★★★★★
Yes. Yes. Yes!
So glad you tackled this. Very useful.
Reply
Bernard Verhaeghe
- 7 years ago
- 1 0
Simply wonderful! My first thought goes to a soccerclub where yearly 200+ players need new portrait thumbs because their shirts carry new sponsors .. Like this, processing the thumbs of their head will go much faster than before!
Another wish: LatLng
The cherry on the cake remains the ability for the image field to have the option (Edit Field: images (when used with template: ....)) to store latitude and longitude next to 'image.description'. I read something where just like in InputfieldImage, exif-js is being used: http://blogs.microsoft.co.il/ranw/2015/01/07/reading-gps-data-using-exif-js/
Imagine, people being able to post images directly from their phone as also people uploading pictures from the front or backend, having the pictures immediately pinpointed on a map because the LatLng has been processed and stored on upload ...
Reply
Rasmus Schultz
- 7 years ago
- 4 1
We have this feature in our (currently closed-source) CMS, and it's a little different - I'll explain how and why.
Center based auto cropping only works for content with a single center - so, for example, for a photo of two people side by side, this strategy doesn't work, as you'll either center on one of them, or between them, both of which are wrong. The same for any content with two or more subjects.
Our model instead consists of a set of named cropping guides for the site - one of these is named "default", and gets used if you don't specify which one to use when you create an image URL.
Each image can then have zero or more cropping guide definitions - most of the time, users create the "default" one, and that works for maybe 90% of typical content, but they now have the option to override the default crop for certain uses of certain images.
Each cropping guide definition consists of x, y, width and height of the preferred crop, as well as x, y of the subject center - so, what we have is an exact, pixel based crop, that gets applied as-is, if you request an image with the exact aspect ratio of the crop. If your requested aspect deviates a little, the actual crop gets adjusted only a little, around the focus point - of it deviates a lot, it gets adjusted as well as possible.
This model is quite a bit more complex, and the UI is more involved, but it is necessary for those cases where center based cropping simply doesn't work.
Here's a fork of cropperjs that adds the detachable focus point to a traditional photoshop-style cropper:
https://github.com/mindplay-dk/cropperjs/tree/feature/pivot
This is not the one we ended up using, but the other components aren't open source yet.
Reply
Tom
- 7 years ago
- 2 1
★★★★★
I love you.
Reply
Roope
- 7 years ago
- 1 0
★★★★★
Thank You Very Plenty!
Reply
Noel
- 7 years ago
- 2 0
★★★★★
This amazing, great feature and as always, amazing implementation!
Reply
Mont
- 7 years ago
- 4 1
Focus is a great idea! But let's talk about that snow. I thought you lived near Decatur, GA?
Reply
Adam
- 7 years ago
- 4 1
I think (speaking to the points @RASMUS made) if, once the zoom feature is working, we could have multiple named focus/zoom point this could fill many more needs. Of course this would be optional and the allowed names would need to be defined some way. Just a thought, likely out of scope for the time being.
Speaking of current scope, can we get an option to reset focus to default?
Thanks for all the great work Ryan.
Reply
Michael van Laar
- 7 years ago
- 5 1
★★★★★
Absolutely great! I was a heavy user of the ImageFocusArea module and was really disappointed that it doesn’t work with the 3.x branch of ProcessWire. I even refused to update ProcessWire for one website which relied on focus cropping for each and every image.
Not only being able to use focus cropping with ProcessWire 3.x now, but even having this as part of the ProcessWire core is awesome!
Reply
szabesz
- 7 years ago
- 3 1
"I'm also not suggesting that it entirely replaces the need for predefined crops."
Sure, it does not replaces the need at all. Since there is just one step to get predefined crops, please take that step too! We just need to be able to save the focus point and the zoom rectangle around it and its done.
"predefined crops" would save me a lot of time. I have lost of pictures with some slight differences in them which need to be eliminated by a few "predefined crops" in Photoshop, but those crops need to be pixel perfect. Defining random focus points and random zoom rectangles are just not enough. Random cropping is great for random photos but for not nice an tidy series of images.
Reply
NikNak
- 7 years ago
- 1 0
Sooo happy with focus area.... I've been hoping for this for a long time.... Than you :-)
Reply
Neeks
- 7 years ago
- 1 1
★★★★★
so glad to see this feature! great work!
Reply
Neeks
- 7 years ago
- 1 1
★★★★★
so glad to see this feature! great work!
Reply