After changing focal point, image doesn't change until you click preview

Re-rolling this patch for 2.x

I am seeing this behavior also. I am using media-library_media_modify so that I can alter the focal point only on this particular reference field.

When I go to configure the block where this image exists, then try to change the focal point, the change only applies if I view the preview first.

Just did some more testing and the TLDR is that the only way the focal point change applies is if the preview image option is enabled AND the user actually previews the image.

If preview is not viewed, the changes do not apply.

This is on my local machine with caching off.

just a bold guess; could 🐛 hook_image_style_flush doesn't get the $path passed to Drupal\image\Entity\ImageStyle::flush() method Fixed be related to this?

No cacheing enabled.
Previewing image after focal point change did nothing and flushing cache also does nothing.

FWIW, this is happening for me, too, on both local (ddev) and remote (AWS environment). The specific context is media library. The focal point widget appears and is operable when adding an image in the media library modal, but the setting doesn't "take" unless you edit the image and reset it. I observe that when editing, I'm editing the media entity directly, rather than through the media library wrapper.

Drupal is at 10.1.1. The suggested patch doesn't appear to help, nor does flushing cache.

The patch didn't work for me either. I'm using Drupal 9.5.9 and attempting to enable the focal point feature by modifying the media after uploading it.

I also gave this a try: https://www.drupal.org/project/focal_point/issues/2906631#comment-15052967 🐛 After changing focal point, image doesn't change until you click preview Needs review but unfortunately, it doesn't appear to solve this issue either.

I made some adjustments in the ".module" file and it worked as expected for me.

I've tested the focal_point_2906631.patch on Drupal 9.5.9, and it's working fine! I'm not marking it as "Reviewed & Tested by the community" because it would be great if someone could verify that the cache is flushed only for the updated image (not all images on the website).

Just a precision on @gwenweb comment (we discussed the patch together at DC Lille) she mean that we need someone to review the code to ensure that only image styles using the updated focal point are flushed.

@brunomolica your patch Failed to Apply. Can you fix it please? I will test this patch with D10 when it's done.

Rerolled patch in #20 🐛 After changing focal point, image doesn't change until you click preview Needs review
Applies now but couldn't test due to unrelated error

I am getting the same as #18

Using with Media with the edit button. The Media edit button open the media/22/edit page in a modal.
Focal point does save, and the preview does work in the same manner as described in the original post.
You can visit the /media/22/edit from the /content/media page and the focal point is saved, and the preview is working as above.

I need to flush the image style for the crop to take effect.

I am using it with in a Responsive image Style.

I'm facing the same issue that was mentioned in #25 🐛 After changing focal point, image doesn't change until you click preview Needs review but I'm using Drimage.

Rerolled patch in #24
to support Image Optimize (Webp)

Beautiful. I forgot to mention that I was using an optimization pipeline with WebP in my comment yesterday, and had thought this may have been the issue since.

This works on my site as described by the original poster @badrange

Now wondering if we should open a new issue or work on this one, as the workflow is strange is you want to use the preview button. I.e you need to click save on the modal which closes it and then re-open the edit to use the preview.

I have tried this patch: focal_point_2906631-24.patch and I use drupal 10.2.2. @Den Tweed . It work strangely. I change the focal point on my media type edition with one click on img but it doesn't change. BUT, if i double-click on my media-type to change focal point, a field appears and i save. I go on my content, img doesn't change but after i change my current breakpoint, img is update.

I stumbled upon the same problem and can confirm that the patch solved our problem.

#27 works fine, solved my issue with .webp, thx!

Drupal 10.2.2
Focal Point 2.0.3

The patch #27 not working for me. After changing focal point, I need to make a clear cache to have the updated image in DOM and even then it's still the old image that's displayed. And if I refresh the page, the old image in displayed & is in DOM (the cropped image no longer appears anywhere).

Updated patch #13

"Hi @bleen, @Rajeshreeputra , I had replicated the aforementioned issue, implemented the necessary patches, and thoroughly tested Patch !24. It is now functioning properly, resolving the previously mentioned error. We can now move the ticket to RTBC. +1. Please review

This is my opinion/review on the available patches:

Patch #13 🐛 After changing focal point, image doesn't change until you click preview Needs review , also contains a code style enhancement ([$x, $y] = explode(',', $focal_point);) which a) is already implemented in module's latest version (2.1.0) and b) is not related to this issue. Patch should be ignored, as patches should only address one issue at a time.

Patch #33 🐛 After changing focal point, image doesn't change until you click preview Needs review is the correct version of patch#13 (without the code enhancement), but it does not solve the problem (at least in my env: Focal point 2.1.0, Drupal 10.2.7).

Patch #20 🐛 After changing focal point, image doesn't change until you click preview Needs review solves the aforementioned problem. This is the one that should be accepted. @gwenweb I verify that only the updated image gets flushed/regenerated and not all images.

Patch #24 🐛 After changing focal point, image doesn't change until you click preview Needs review is practically the same code as in patch#20, only the paths to the module file are different. People complained that patch#20 could not be applied to their envs, hence the re-roll with different paths.

Patch #27 🐛 After changing focal point, image doesn't change until you click preview Needs review is the same code as in #20 and #24, plus it addresses the issue of updating webp generated images as well. Yes, it solves the problem with the webps, but it falsely assumes that there are webps to update. Image Optimize and ImageAPI Optimize WebP modules are not related to this module and they are definitely not prerequisites for it. So, any fix related to webps, should be addressed by those modules' end and not from this one. This patch should be ignored.

ok then let's set focus to #20.

Hide all other files...

Unfortunately I was not able to reproduce the issue with steps mentioned on the issue summary.
I was using the page cache + Drupal 11 + focal_point 2.1.1 (with 🐛 Preview results in Error: Call to a member function getDefinitions() on null Active ) + Crop API 2.4.
So even without clicking preview link the page cache got MISS and the image got updated also for anonymous users.

I'm marking this as postponed until there's steps to reproduce on vanilla Drupal installation.

Regarding to #27/#35 about webp support, core has supported webp -format out-of-box for quite long time ( #2340699: Let GDToolkit support WEBP image format → ), so if this issue is still valid, we should make sure it works with webp format.

This is still a problem we're having. I can't reproduce it locally, but it happens on Pantheon. I suspect that using a CDN makes a difference.

None of the patches in this thread are solving this issue for me on their own. This new patch is a combination of the approaches in #27 and #33, which is working for me if I also add patch #4 from crop 🐛 Crop API is not appending a hash when the image styles are converted to WEBP Needs review

Leaving status as Postponed, because I can't actually provide definitive steps to reproduce the issue or explain exactly what's happening. Just wanted to share what's working for me.

I wasn't able to reproduce the issue.

1. Install Drupal 11.0.1 with the standard profile
2. Install Focal point with composer require drupal/focal_point (gets 2.1.1). Enable it.
3. Enable Media library
4. Change widget to Image (Focal point) foe the Media library form, leave default settings
5. Configure a new image style to use Focal Point Scale and Crop
6. Use this image style on the Article's image field.
7. Create article, add image and save with default focal point
8. Edit article, move focal point, save.
9. It gets re-cropped.

Save result with adding a new Media reference field and changing a focal point in the media library after attaching the media t the article.

I am still experiencing this issue with:

• Drupal Core 10.3.5
• Focal Point 2.x-dev + Patch #38 above
• Crop 2.4.0 + Patch #14 from the related Crop API issue 🐛 Crop API is not appending a hash when the image styles are converted to WEBP Needs review

Here are my steps to reproduce:

1. Add an Image media type, with image styles.
2. Upload a new Image media and save.
3. From the full Media Listing (/admin/content/media), edit the new Image media. You should be redirected to the entity's full edit page, where the preview is displayed correctly.
4. On a form using the Media Library (I'm adding a block in Layout Builder), select your image. The widget should populate the image in the field.
5. Go to edit a media item from the Media Library widget, and the preview image does not render correctly. I am noticing that the image src is correct (devtools displays its preview), but still not rendering.