A plugin for Craft CMS based on jQuery FocusPoint
Clone or download
smarineau-cyr update version to 1.1.8
Latest commit 89afab0 Sep 20, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
focuspoint update version to 1.1.8 Sep 20, 2018
screenshots Revised UI by adding a little gear icon at the right of the assets Jul 15, 2016
.gitignore Initial commit Mar 14, 2016
LICENSE.md added license Mar 14, 2016
README.md readme edit Jul 15, 2016
changelog.json update version to 1.1.8 Sep 20, 2018


Focus point field type for Craft CMS

A plugin for Craft CMS based on jQuery FocusPoint (https://github.com/jonom/jquery-focuspoint). This create a new field type "Focus Point" where you can choose coordinates on an image for the focus point. It's a good way to use the same field/image for multiple crops or responsive images.


Tested on Craft 2.5 and 2.6. No other specific requirement.

How to install

Download the latest release and unzip the focuspoint folder in the plugins directory. Install it via the administration plugins page.

How to use

Create a new field with the type "Focus Point". On an entry (or any content), choose coordinates for each uploaded assets on the field.

In your template, you can access the focus point data this way (you should load jQuery FocusPoint javascript on the front-end and initialize it) :

{% set image = entry.image.first() %}
<div class="focuspoint"
	data-focus-x="{{ image.focusX }}"
	data-focus-y="{{ image.focusY }}"
	data-image-w="{{ image.width }}"
	data-image-h="{{ image.height }}">
	<img src="{{ image.url }}">

Alternatively, you can use it in combination with Imager (https://github.com/aelvan/Imager-Craft) without the need to load any javascript :

{% set image = entry.image.first() %}
{% set transformedImage = craft.imager.transformImage(image, {
    width: 800,
    height: 600,
    mode: 'crop',
    position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'
}) %}
<img src="{{ transformedImage.url }}">

or as a background image in css :

{% set image = entry.image.first() %}
<div style="background-image: url('{{ image.url }}');
    background-size: cover;
    background-position: {{ image.focusPctX }}% {{ image.focusPctY }}%;">


Edit field

Edit Focus point popup