How to use it
- Open the image in Media > Library, or in the media picker inside the builder.
- In the Focus point field, click the subject on the thumbnail. A crosshair marks the spot; Clear removes it.
- Use the image in an Image element with Object fit: cover, or as a background image. Bricks now crops around the spot you clicked, at every size and breakpoint.
Where it appears in Bricks
- Image element, Content tab: Ignore focus point, right after Object position.
- Section, Container, Block, Div, Style tab > Background: Ignore focus point.
Tick it on one element to use Bricks' default position there and keep the focus point everywhere else.
How it works with your own settings
Any position you set in Bricks wins: an Object position or background position on the element, at any breakpoint, in a hover state, in a component variant or in a global class. The focus point only fills in where you set nothing.
Limits
- With Object fit: contain or none, the whole image shows, so there is nothing to move.
- An Image element with art-directed sources (a different image per breakpoint) is left alone.
- In the builder canvas, Image elements show the focus point. Backgrounds on layout elements show it on the front end only, because Bricks draws them in the canvas with its own script.
Settings
None. Turn the module on in Bricks > Kiln (it is on by default).
Requirements
Bricks 2.4 or newer.