toward 7.x, 8.x and beyond.

Focal Point has a great, simple way for editors to pick the hot spot on an image.
with jquery-focuspoint — it would be awesome if a field formatter would use this plugin to render images through.

Comments

SKAUGHT created an issue. See original summary.

berdyshev’s picture

berdyshev commented

I have implemented this integration as separate module (now only for 8.x) — you can check it here https://www.drupal.org/sandbox/berdart/2738661

skaught’s picture

skaught
Primary language English
commented

just dumping this here for general/future ref..

this will turn D7's Focal Point co-ordinates into lat/long that jquery-focuspoint uses.
i think this is due to how Crop api records data in D8..

/*
 *   @param  $img = (array) image field data.
 */
function theme_focalpoint($img = array()) {
  if(isset($img['focal_point'])){
    $imgPath = file_create_url( $img['uri']);
    $imgW = $img['metadata']['width'];
    $imgH = $img['metadata']['height'];
    $focal_point = explode(',', $img['focal_point']);
    $imgFocusX = ($focal_point[0]/100) *  $imgH;
    $imgFocusY = ($focal_point[1]/100) * $imgW;
    $focal_point_x = (($imgFocusX / $imgH) - .5) * 2;
    $focal_point_y = (($imgFocusY / $imgW) - .5) * -2;

    return '<div class="focuspoint"
    data-focus-x="'.$focal_point_x.'"
    data-focus-y="'.$focal_point_y.'"
    data-image-w="'.$imgW.'"
    data-image-h="'.$imgH.'">
        <img src="'. $imgPath.'" alt="" />
    </div>';
  } else {
    return FALSE;
  }
skaught’s picture

skaught
Primary language English
commented
Status: Active » Closed (outdated)

sorry berdyshev: i've beaten you to release!

focal_point_focus

bleen’s picture

bleen commented

This is great news!! Glad you were able to get it working. Looks terrific. Its probably worth noting that this was committed recently: https://www.drupal.org/project/focal_point/issues/2784055

Might be relevant

skaught’s picture

skaught
Primary language English
commented

thanks!

I've just run through a node with this preview patch. Of course, it has no 'preview' of the formatters settings at this level (no known view mode).

I expect & hope users will more or less get that they just need to upload an image and set the basic crosshairs, then only when finally 'viewed normally' this dynamic re-layout effect will happen.

--
edit:
Formatter does disable quickedit. As that's were 'preview' and refreshing the display is..awaiting it's own issue (: