ACF 5.7.x compatibility ?

[tmconnect]

Are there any plans to make this plugin working correct with the new ACF 5.7.x?

Thanks
Thomas

[gamutsf]

Same. Getting an error "cannot read property 'extend' of acf.field.image.extend -- prevents adding any images in acf-qtranslate image fields.

[social-ink]

Nthing this... Has the developer stopped providing updates?

[ghost]

really appreciate this plugin! hope the developer can make it compatible with the 5.7.X.

[cgidds]

Here's the fix for that error, which is in main.js:

/**
 * Clone functionality from standard Image field type
 */
acf.fields.qtranslate_image = acf.Field.extend({
    type: 'qtranslate_image',
    focus: function() {
        this.$el = this.$field.find('.acf-image-uploader.current-language');
        this.$input = this.$el.find('input[type="hidden"]');
        this.$img = this.$el.find('img');

        this.o = acf.get_data(this.$el);
    }
});

/**
 * Clone functionality from standard File field type
 */
acf.fields.qtranslate_file = acf.Field.extend({
    type: 'qtranslate_file',
    focus: function() {
        this.$el = this.$field.find('.acf-file-uploader.current-language');
        this.$input = this.$el.find('input[type="hidden"]');

        this.o = acf.get_data(this.$el);
    }
});

/**
 * Clone functionality from standard WYSIWYG field type
 */
acf.fields.qtranslate_wysiwyg = acf.Field.extend({
    type: 'qtranslate_wysiwyg',
    focus: function() {
        this.$el = this.$field.find('.wp-editor-wrap.current-language').last();
        this.$textarea = this.$el.find('textarea');
        this.o = acf.get_data(this.$el);
        this.o.id = this.$textarea.attr('id');
    },
    initialize: function() {
        var self = this;
        this.$field.find('.wp-editor-wrap').each(function() {
            self.$el = jQuery(this);
            self.$textarea = self.$el.find('textarea');
            self.o = acf.get_data(self.$el);
            self.o.id = self.$textarea.attr('id');
            acf.fields.wysiwyg.initialize.call(self);
        });
        this.focus();
    }
});

Essentially, you want to change the acf.field.image.extend (and every other .extend) to acf.Field.extend instead. Even with that fix though, there's still a tinymce error when switching from Text to Visual in the WYSIWYG editor.

[asedano]

I did this and works fine:

/**

• Clone functionality from standard Image field type
  */
  acf.registerFieldType(acf.models.ImageField.extend({
  type: 'qtranslate_image',

$control: function(){
return this.$('.acf-image-uploader.current-language');
},

$input: function(){
return this.$('.acf-image-uploader.current-language input[type="hidden"]');
},

render: function( attachment ){
var control = this.$control();

// vars
attachment = this.validateAttachment( attachment );

// update image
control.find('img').attr({
  src: attachment.url,
  alt: attachment.alt,
  title: attachment.title
});

// vars
var val = attachment.id || '';

// update val
this.val( val );

// update class
if( val ) {
  control.addClass('has-value');
} else {
  control.removeClass('has-value');
}

}
}));

/**

• Clone functionality from standard File field type
  */
  acf.registerFieldType(acf.models.QtranslateImageField.extend({
  type: 'qtranslate_file',
  render: function( attachment ){
  var control = this.$control();

  // vars
  attachment = this.validateAttachment( attachment );

  // update image
  this.$control().find(' img').attr({
  src: attachment.icon,
  alt: attachment.alt,
  title: attachment.title
  });

  // update elements
  control.find('[data-name="title"]').text( attachment.title );
  control.find('[data-name="filename"]').text( attachment.filename ).attr( 'href', attachment.url );
  control.find('[data-name="filesize"]').text( attachment.filesizeHumanReadable );

  // vars
  var val = attachment.id || '';

  // update val
  acf.val( this.$input(), val );

  // update class
  if( val ) {
  control.addClass('has-value');
  } else {
  control.removeClass('has-value');
  }
  },
  }));

acf.registerFieldType(acf.models.WysiwygField.extend({
type: 'qtranslate_wysiwyg',
initializeEditor: function() {
var self = this;
this.$('.acf-editor-wrap').each(function() {
var $wrap = $(this);
var $textarea = $wrap.find('textarea');
var args = {
tinymce: true,
quicktags: true,
toolbar: self.get('toolbar'),
mode: self.getMode(),
field: self
};

  // generate new id
  var oldId = $textarea.attr('id');
  var newId = acf.uniqueId('acf-editor-');

  // rename
  acf.rename({
    target: $wrap,
    search: oldId,
    replace: newId,
    destructive: true
  });

  // update id
  self.set('id', newId, true);

  // initialize
  acf.tinymce.initialize(newId, args);
});

}
}));

[flowgrow]

hey @asedano thanks for this, I believe @funkjedi added this to the current version 1.7.24, right?
unfortunately it still doesn't work for me on any of my WYSIWYG fields.

[Error] TypeError: undefined is not an object (evaluating 'r[e]')
	(anonymous function) (wp-tinymce.php:3:339907)
	e (wp-tinymce.php:3:339965)
	bind (wp-tinymce.php:3:11952)
	init (wp-tinymce.php:3:341333)
	e (editor.min.js:1:999)
	(anonymous function) (editor.min.js:1:273)
	C (wp-tinymce.php:3:11117)
	d (wp-tinymce.php:3:11258)

downgrading to ACF 5.6.10 also didn't work I got a fatal php error:

Class 'acf_field' not found in /var/www/salomon/wp-content/plugins/ACF-Nav-Menu-Field/nav-menu-v5.php on Line 18

any hints with this?

[tmconnect]

Thanks for updating