Module Description
An Image Formatter for Focal Point crops integrating with jquery-focuspoint plugin for displays. Set expected image render height (per view mode) and let the image shift to maintain chosen focal point view-ability.
* HTML output uses figure tag. Does use Twig template, override as you need!
* If image field 'title' it is rendered as figcaption
* Image field 'alt' text is supported
* 'mute title' and 'first-only' display options
See general Focuspoint Dolphin demo
Regarding width and height in Theme output
With whatever the focal-point-focus twig template is wrapped by when rendered should be Block Displayed (display:block) and have a width set (width:100%). If that element is used as a column, it should then some type of relative set width, not just floated. This formatter sets the display height from the Managed Display UI. This is how the Javascript calculates how to reposition the image to remain 'focused' within the width of space it has available.
Imagecache
* This is not an Imagecache module! The image you attach is output as is. It is these dimensions with it's crop and ratio that are used as scaling and re-positioning are used to fill the space.
* The Focal Point module its self does provide an imagecache preset.
* The focalpoint script itself can not be applied ontop of that as the crop target has been lost after Imagecache processes a new image size.
File Size vs Image Size
* Final Output quality may seem too low for retina displays if image dimensions are too low to begin with. A happy balance of file size and image size are needed ensure quick downloading and render by a browser.
* Generally use an real pixel sized image that make since for your website needs,
Configuartion Readme
* Your Field Widget 'Form Display' should be expected to use the 'crop thumbnail' Preview Image Style. Others will probably will not work well with the reposition math.
* Your Manage Display' View-mode needs to have the expected Display Height set. this is key to working with responsive widths in the region of where the content will be rendered.
Requires
* Focal Point
* jquery-focuspoint plugin. Place into .../libraries/jquery-focuspoint
* D7 requires Libraries API
* D8 (and forward, D9 & D10) requires Crop API and focal_point
* HTML output uses figure tag. Does use Twig template, override as you need!
* If image field 'title' it is rendered as figcaption
* Image field 'alt' text is supported
* 'mute title' and 'first-only' display options
See general Focuspoint Dolphin demo
Regarding width and height in Theme output
With whatever the focal-point-focus twig template is wrapped by when rendered should be Block Displayed (display:block) and have a width set (width:100%). If that element is used as a column, it should then some type of relative set width, not just floated. This formatter sets the display height from the Managed Display UI. This is how the Javascript calculates how to reposition the image to remain 'focused' within the width of space it has available.
Imagecache
* This is not an Imagecache module! The image you attach is output as is. It is these dimensions with it's crop and ratio that are used as scaling and re-positioning are used to fill the space.
* The Focal Point module its self does provide an imagecache preset.
* The focalpoint script itself can not be applied ontop of that as the crop target has been lost after Imagecache processes a new image size.
File Size vs Image Size
* Final Output quality may seem too low for retina displays if image dimensions are too low to begin with. A happy balance of file size and image size are needed ensure quick downloading and render by a browser.
* Generally use an real pixel sized image that make since for your website needs,
Configuartion Readme
* Your Field Widget 'Form Display' should be expected to use the 'crop thumbnail' Preview Image Style. Others will probably will not work well with the reposition math.
* Your Manage Display' View-mode needs to have the expected Display Height set. this is key to working with responsive widths in the region of where the content will be rendered.
Requires
* Focal Point
* jquery-focuspoint plugin. Place into .../libraries/jquery-focuspoint
* D7 requires Libraries API
* D8 (and forward, D9 & D10) requires Crop API and focal_point
Module Link
Project Usage
202
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module solves the issue of maintaining a chosen focal point in images by allowing them to shift to remain visible within the expected render height, while integrating with the jquery-focuspoint plugin for displays.
Data Name
focal_point_focus
OPENAI CHATBOT
OPENAI CHATBOT
