Focal Point Focus

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
• v2.1.x Breakpoint Provider height selection using Style @media rules — not Picture Source (srcset) See README/help page!
• v2.1.x 'Lazy Load' attribute option.

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 that are used to scaling and re-positioning the image.
• Reminder: The Focal Point module itself 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.

Breakpoint (2.1.x)

• This is not a Breakpoint Provider! It is assumed that Your theme, the Contrib modules used in Your project, finally; Your own custom modules may provide the Breakpoint Plugin to define Breakpoint Groups setup into Your project specifics (not by support of this module). Thanks for understanding @media complexity
• HOW TO TEST: Sitebuilder/developer ready Breakpoint Provider testing can be enabled/disabled via State API
  
  enable: \Drupal::state()->set('focal_point_focus.breakpoint_test',true);
  
  disable: \Drupal::state()->delete('focal_point_focus.breakpoint_test');
  
  This will add a DASHED OUTLINE [with a preset range of colours. Max 20 expected for this test method from any provide] for each breakpoint output to <style scoped> base of this tool (not via behaviour).
• Yes, the JS Behavior has sequece to matchMedia() for fallback to inline style.

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 a 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

• All Versions are dependent on: Crop API and focal_point
• D7 requires Libraries API
• Any version lower than 2.0: requires jquery-focuspoint plugin. Place into .../libraries/jquery-focuspoint

--------------

• v2.1.x (D10) original script jQuery.focalPoint.js moderized (for jQuery 3) and move into own codebase. No need to install base library now.

Buy Me a Coffee