* Some settings require refreshing the page to see the updated changes. 
* When testing the add-on image for its responsiveness you might have to refresh the page to see the change in image height.

After you drag or add the image with focuspoint into an area, the blocks setup screen will pop up.

 

Image

Select the image that you want to use from the file manager.

Getting the URL to the picture

Once you selected a image from the file manager click on the image and select properties, a screen with all image properties will pop up, in this screen find the field 'URL to File' , select the link and copy it. 

Focuspoint

The focuspoint section is made up of a helpertool, that helps you setup where you want to lay your focus in the selected image 

Helper tool

In the input field paste the URL to the image that you got from the properties field and click on the 'Go!' button and see the image loaded in the setup screen. You can then click anywhere in the image where you want to set focus on your image. The area that you selected will always be shown no matter what size the screen or image container has.

Y-field & X-field

These fields house the coordinates to the focuspoint in the picture, you can enter these manually or with helper tool in the setup.

HTML

Image height

Enter the height (in px) you want the image to have on a desktop screen, the add-on will automatically calculate the best size for the image on smaller devices all the while it never keeps the focus of the area you selected. 

The default image height is always 300px.

Image Link (optional)

You can add both a internal and external link to your image, please note that an external link will always open in a new window

Alt text & Title (optional)

You can enter a alt text and title for the image, this is completely optional