The Focuspoint
In a nutshell, the focuspoint offers a solution to view images in all different ratios after the user has defined a focuspoint (hot spot) in the image while uploading it. The focuspoint is suitable for every kind of JavaScript application.
See the demo here
To install
JavaScript package:
bower install focuspoint
, then manually include /dist/focuspoint.js and /dist/focuspoint.css and the classList and requestAnimationFrame polyfills
MeteorJS package:
meteor add lifelynl:focuspoint
AngularJS module:
coming soon
What and why?
Designing web products, used to be simple. Basically everyone experienced your website the same. Nowadays, we have to design and develop for countless different devices. Menus, textual content and icons are easy; it's just a matter of properly arranging them. Images, however, are a different story. Most photographs have a 3:2 ratio so whenever the screen ratio alters, you have to crop the photo and only the middle of the image is displayed. You'll see that most subjects are either cut off or even completely outside the frame.
So we came up with the Focuspoint. Just like when you take a photograph, whenever you upload an image, you tell us where the focus should be. We then use a simple CSS rule in order to apply the best background position for every device. The benefit of the focuspoint is that the photographs, even on super small devices like a watch, will always look great.
Concept video:
Technical concept
- For every image, you'll have to be able to save the focuspoint as two decimal values between 0 and 1, x and y. These represent the coordinates of the focuspoint in the picture. So it is important to write some back-end code for this. That's up to you ;)
- To apply the focuspoint to an image in your application, we just use
background-size: cover
in combination with abackground-position
CSS-rule on your element. - To create a focuspoint editor in your image upload module, we will render a draggable dot for you. Then you can simply read out the x and y values to save them to your database whenever you want.
API
For the full API, please visit the wiki on Github.
Basic example for the editor
These css-classes are quite necessary. We recommend you to always use those classes and overwrite the styling for the button to your needs.
var element = document; var editor = element view_elm: document x: 0456 y: 0124; editor;
We look for an element with the 'lfy-focuspoint-button' class to find the button. When you don't use that classname, you can alternatively specify a button_elm
.
Basic example for viewing
var element = document; var viewer = element x: 0456 y: 0124;