Contrib.social

Focal point is not applied

Open on Drupal.org →
Created on 25 October 2022, over 2 years ago
Updated 22 August 2023, over 1 year ago

Problem/Motivation

Hello,

Thank you for a great module, it's exactly what I need! However, for some reason I can't get it to work =\ Putting this as a support request as the issue is clearly on my side.

When I enable the module and change image view mode, I can see the new twig template. I've changed all styles to correspond the new structure; I've made extra certain that whatever style is in focuspoint.css would not get overwritten. Focuspoint parent div has display: block; and width: 100%; styles as instructed.

It seems to almost work; I can see data-focus-x and data-focus-y values, but no matter what the focus point actually is, the image always seems to concentrate on a top left corner, as if it wasn't repositioned at all.
I've checked browser inspector and it seems like only jquery.focuspoint.min.js is being included; I've tried to manually include jquery.focuspoint.js via custom module, but that didn't change anything.

Would appreciate any input on how can I make this work!

💬 Support request
Status

Closed: cannot reproduce

Version

1.10

Component

Code

Created by

toomanynights

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    🇨🇦Canada SKAUGHT

    sorry for time..I have more recently updated the (new version 2 for Drupal10) readme/help.
    ------------------------------

    Configure View modes as needed for image fields using Focal Point.
    KEYNOTES:
    - The 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.
    - 'Manage Display' Viewmode 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.

    Manually:
    1. install into /modules.
    2. refer to Requirements (above) to install required Javascript plugins.
    3. enable module.
    4. setup Image field as you need. see 'Configuation' below!

    Composer:
    1. composer require drupal/focal_point_focus
    2. move/copy JS Plugin from /vendor into correct /libraries location.
    3. setup Image field as you need. see 'Configuation' below!

  • Status changed to Closed: cannot reproduce over 1 year ago
  • Comment over 1 year ago →
    🇨🇦Canada SKAUGHT
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024