When choosing an image style for the imagefield thumbnail, we can choose one using javascript crop (directly or not) so it would be great if this thumbnail was refreshed when the cropping is over.
Currently, you have to reload the page to see the news thumbnail.

Cheers!

Comments

joekers’s picture

joekers
Primary language English
commented

Do you mean once you have clicked "Save selection" for it to refresh the page with the new image?

As I needed to do this - from the Jquery UI Dialog - and have just manage to do it using a small bit of Jquery..

duaelfr’s picture

duaelfr
he/him
Primary language French
Location Montpellier, France
commented

I mean when you upload an image in a D7 admin form, there is a thumbnail which is shown.
As this thumbnail is using an image style chosen by the site builder and as this image style can use a javascript crop alteration, this thumbnail should be reloaded after the user click on "Save selection" or "Done cropping" regardless of the cropping method (jQuery UI, iframe, Colorbox...)

gagarine’s picture

gagarine commented

Yes I made some user test and it's disturbing for the end user. They either think their change was not save or just don't understand why is not reflected in the interface.

But I have to say I don't know the right approach to do that with FAPI.

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented

Yep, the users are honestly lead to believe that their cropping changes and saving did not have any effect whatsoever. The thumbnail needs to be updated to reflect the cropped area of the image.

manila555’s picture

manila555 commented

Yes, I also have this same problem where the users click "Save Selection" and "Done Cropping" but have no idea what to do from that point forward. It does look like none of the cropping changes were applied.

My question is also, once the user crops the image and saves it. How do I displayed the cropped image on the node?

saru1683’s picture

saru1683 commented
Issue summary: View changes

I did some debug and found a solution to change the thumbnail after the "Save Selection".
Changed imagecrop.js located on js folder of imagecrop module, The Changes are bellowed.

$(document).ready(function() {
  
  $("#imagecrop-style-selection-form #edit-styles").change(function() { Drupal.Imagecrop.changeViewedImage($(this).val()); });
  if (Drupal.settings.imagecrop.cropped) {
    if (Drupal.Imagecrop.forceUpdate) {    
      $('img', '#imagecrop-preview').bind('load', Drupal.Imagecrop.forceUpdate);      
      refresh_cropimg();    	
    }
    $('#cancel-crop').html(Drupal.t('Done cropping'));
    //window.close();
  }
  
  function refresh_cropimg() {
	  $('.user-picture img', window.opener.document).each(function () {
		  var source = $(this).attr('src');
		  var delimiter = source.indexOf('?') === -1 ? '?' : '&';
		  $(this).attr('src', (source + delimiter + 'time=' + new Date().getTime()));
		} );
	  $('.image-preview img', window.opener.document).each(function () {
		  var source = $(this).attr('src');
		  var delimiter = source.indexOf('?') === -1 ? '?' : '&';
		  $(this).attr('src', (source + delimiter + 'time=' + new Date().getTime()));
		});
	} 
});

Thank you.

mikpouet’s picture

mikpouet commented

Same issue, my version is "7.x-1.0-rc3+68-dev".
I just had to add this in imagecrop.js on line 13:
Drupal.Imagecrop.forceUpdate();
after the line:
$('img', '#imagecrop-preview').bind('load', Drupal.Imagecrop.forceUpdate);

The function was already there, just need to fire it at the right time.

Thank you people for this nice plugin btw!