jQuery FocusPoint – Responsive and Intelligent image cropping

Jquery FocusPoint dynamically crops images to fill available space without cutting out the subject of the images and it absolutely great for full-screen images.

Although the responsive design has changed the web for the good, there are many issues that still needs improving. One of it is the positioning of images as the websites do not have a single layout any more. The images has to be adapted to laptops, tables and mobiles and they might be portrait, landscape or square. The last one is particularly relevant when you are using full-screen images. If you are using a single image for all devices, you might be disappointed with the results as the main subject of the image probably is clipped, missing or it looks really strange. Jquery FocusPoint is simple solution that will make sure that your images look absolutely great in any container by cropping the negative space out before the important parts.

jquery-focuspoint

Here are some examples showing the same image cropped a variety of different ways at once. Make sure you play with resizing the browser window to get a feel for what FocusPoint does.

And here is a full screen demo.

How does it work?

The idea is that most images have a focal point or subject that is the most important part of the image. In the case of a traditional portrait photo this would be the subject’s face (or specifically the spot right between their eyes). In the image above it’s arguably the point halfway between the two people’s faces.

FocusPoint requires you to indicate where this focal point is located within your image, and then works in the background to ensure that point is never cropped out.

How to use

1. Calculate your image’s focus point

An image’s focus point is made up of x (horizontal) and y (vertical) coordinates. The value of a coordinate can be a number with decimal points anywhere between -1 and +1, where 0 is the centre. X:-1 indicates the left edge of the image, x:1 the right edge. For the y axis, y:1 is the top edge and y:-1 is the bottom.

Related post:  Tips for web and graphic design students to make extra cash

image

Confused? Don’t worry, there’s a handy script included to help you find the focus coordinates of an image with a single click. Check out the helper tool (vastly improved courtesy of @auginator).

2. Include javascript and CSS

You’ll need to include jQuery (v1.9 or greater), the FocusPoint script, and FocusPoint css file. Example:

<link rel="stylesheet" href="focuspoint.css">
<script src="jquery.js"></script>
<script src="focuspoint.js"></script>

3. Mark up your image container

Specify the image dimensions and focus point coordinates on the image container. The image will take up whatever space is available in the container, so make sure there is some space to fill by setting a height for the container in your CSS. Example:

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
    <img src="image.jpg" alt="" />
</div>

Note: setting data-image-w and data-image-h is optional but recommended. Omitting these value means your image will not be positioned correctly inside the frame until it has finished loading, which may cause a visible jump.

4. Fire FocusPoint plugin

Usually the best place for this will be inside your $(document).ready() function.

//Fire plugin
$('.focuspoint').focusPoint();

That’s it!

Configuration options

FocusPoint comes with a few options you can change to suit your needs.

Option Values Default Description
reCalcOnWindowResize true orfalse true Whether or not to re-adjust image when the window is resized
throttleDuration Int e.g. or100 17 Throttling rate in milliseconds. Set to to disable throttling.

Example usage:

$('.focuspoint').focusPoint({
    throttleDuration: 100 //re-focus images at most once every 100ms.
});

FocusPoint functions

Once you have initialised FocusPoint on an image container you can access FocusPoint methods like this: $(someContainer).data('focusPoint').methodName().

Or the shorter way, like this: $(someContainer).focusPoint('methodName')

Function Description
adjustFocus() Re-do calculations and re-position an image in it’s frame. Call if container dimensions change.
windowOn() Start window event listener and re-focus image when window is resized
windowOff() Stop re-focusing image when window is resized
Related post:  Skippr - A lighter, faster slideshow plugin for jQuery

Using FocusPoint in content sliders

Currently FocusPoint can’t do it’s calculations properly if an image container or it’s parent is set todisplay:none, as it won’t have any dimensions. This can cause problems with sliders that hide non-active slides. A work-around for now is to trigger adjustFocus() on the image container as soon as it become visible.

Tips & Tricks

Image composition

In order for this concept of ‘fluid cropping’ to work well, your images will need to include some negative space around the subject that you are happy to be cropped out when necessary. You don’t need space on every side of the subject – but for maximum flexibility you’ll want to include both some vertical and horizontal negative space.

Pure CSS alternative

You can get a similar effect to this technique using only CSS and the background-position andbackground-size properties. Browser support isn’t as good (at the moment) and your image won’t be positioned exactly the same way – but it’s pretty close. The CSS technique leans towards preserving the original composition while FocusPoint is biased towards keeping the subject of the image in the centre of the frame. Depending on your requirements either technique may suit you better.

SilverStripe CMS integration

This plugin plays really well with the silverstripe-focuspoint module, which lets you set the focuspoint on any image with just a click, and makes the info available in your front-end templates so you don’t have to do any math. It also provides really easy ‘destructive’ cropping outputting resampled images cropped to a particular width and height based on the same logic.

 Live Demo  Download


Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close