The FocalPoint component acts like a helper for displaying responsive images.
FocalPoint is inspired in this awesome project on Github from Adam Bradley. You can read more about focal points in the project docs or in this article. I think reading these links give an overview of what this technique is for.
In general, when we use this component, we divide the image in a virtual grid of 12x12 as shown below.
In the picture, you can see that the image is focusing 3-cell up and 3 to the right. The focal point emphasize the man's face when the image is displayed on small screen sizes and as we increase the size of the image will be displayed complete.
When using this component, you have to specify the offset defining the focal point on the image always starting from the middle of the grid. For example, you can set the offset using top-6 and right-6 CSS classes in order to crop the image to the top-right corner. Same using down-6 left-6 for the bottom-left corner. It's really easy to use.
The following image represents how to set the focal point to top-2 right-2 focusing in the important part of it ;)
Now, resize your browser window to see how the image above set it's focus at the specified point on smaller screen sizes.
And now, being in a smaller screen size under 768px, click the following button to set the focal point off and see the difference.
Set focal points on images above to offYou can play with this component in the playground below using the provided images or your own ones.
This is not server-side technology!! ... so the image sizes on page load will be the same as the original ones. If your problem is bandwidth and serving responsive images in differents sizes then this is not your component. The only way for doing that is using server side technology, multiple images with a plugin or any specialized cloud service.
Said that, you can use this component in a lot of places for displaying your images pretty, because i'm sure you are not using several different sized images in all your sites ;)
Pretty easy ... you are going to need the image tag (With id or class if you want to select it using css selectors) and it's done.
<img id="optional id" class="optional class" src="yourImage" alt="your image description" />
Stashy.FocalPoint(selector)
Parameter | Type | Description |
---|---|---|
selector | string | CSS selector. Select images for being cropped on smaller screen sizes. If you leave the selector blank, by default FocalPoint is going to take all <img /> tags in the page. |
Name | Description |
---|---|
on(pointA,pointB) | Initializes FocalPoint. Using the selector passed in the constructor, this method will crop all the images matching it with the points specified in the parameters |
pointA and pointB may be set up with these class names: "up-1" to "up-6". Up offset from center virtual grid "down-1" to "down-6". Down offset from center virtual grid "left-1" to "left-6". Left offset from center virtual grid "right-1" to "right-6". Right offset from center virtual grid |
|
update(pointA,pointB) | Update FocalPoint images with new points specified in the parameters |
pointA and pointB may be setted up with these values: "up-1" to "up-6". Up offset from center virtual grid "down-1" to "down-6". Down offset from center virtual grid "left-1" to "left-6". Left offset from center virtual grid "right-1" to "right-6". Right offset from center virtual grid |
|
off() | Restarts image to the original state. |
If you don't set the points, then the image will be cropped using the center point of the grid.
var fp = Stashy.FocalPoint("selector"); fp.on("up-3","right-3"); fp.update("down-3","left-3"); fp.off();
Select different focal points for the images
less
For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:
Stashy.Variables.less Stashy.Mixins.less Stashy.FocalPoint.lessJS
jQuery.js Stashy.FocalPoint.js