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

    HC 8 months ago 80

    Nice! Thanks Ryan. A great addition. Can’t wait to use it.

  • Joe Regan

    Joe Regan 8 months ago 100

    I didnt even know I needed this, but I need this badly!

    • Teppo

      Teppo 8 months ago 62

      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. :)

  • Lenz

    Lenz 8 months ago 50

    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 !

  • Tom Reno

    Tom Reno 8 months ago 31

    Yes. Yes. Yes!

    So glad you tackled this. Very useful.

  • Bernard Verhaeghe

    Bernard Verhaeghe 8 months ago 10

    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 ...

  • Rasmus Schultz

    Rasmus Schultz 8 months ago 41

    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.

  • Tom

    Tom 8 months ago 21

    I love you.

  • Roope

    Roope 8 months ago 10

    Thank You Very Plenty!

  • Noel

    Noel 8 months ago 20

    This amazing, great feature and as always, amazing implementation!

  • Mont

    Mont 8 months ago 40

    Focus is a great idea! But let's talk about that snow. I thought you lived near Decatur, GA?

  • Adam

    Adam 8 months ago 41

    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.

  • Michael van Laar

    Michael van Laar 8 months ago 41

    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!

  • szabesz

    szabesz 8 months ago 31

    "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.

  • NikNak

    NikNak 8 months ago 10

    Sooo happy with focus area.... I've been hoping for this for a long time.... Than you :-)

  • Neeks

    Neeks 8 months ago 11

    so glad to see this feature! great work!

  • Neeks

    Neeks 8 months ago 11

    so glad to see this feature! great work!

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.