ckeditor in their migration to the ACF system in 4.1 has forced by default image width and height into the images as inline styles.
Simply turning off ACF does not solve the problem. The ACF configuration can be set to send width and height to HTML attributes if you use ACF. The issue though is that they do not provide a “whitelist” of all the plugins. Without such a thing certain ckeditor toolbars will not appear, even when enabled in the editor configuration screen. Those issues are covered in the existing ACF issue and the media markup being converted to false issue.
After trying several solutions all to no avail I have resorted to using jQuery to resolve this dilemma.
Drupal.behaviors.imgAttributes = {
attach: function () {
//First check to see if an image is on the page, if not, do nothing
if ( $( 'img').length > 0 ) {
//Loop through each image found and retrieve the width and height.
//Then remove the width and height from the inline css.
//Finally write the width and height as attributes to the html img tag.
$('img').each(
function(){
var imgWidth = $(this).css( "width");
var removeWidth = $(this).css( "width", "" );
var imgHeight = $(this).css( "height" );
var removeHeight = $(this).css( "height", "");
$(this).attr("width",imgWidth);
$(this).attr("height", imgHeight);
});
//The figure wraps our images and if a height is set, it will not wrap
//around the text, only the image. This is basically height:auto.
$('figure').each(
function(){
var removeFigureHeight = $(this).css( "height", "");
});
}
}
}
Certainly this is not an elegant solution. However, modifying the ckeditor library itself seems risky for upgrade compatibility and ACF currently has no way to override the default “automatic” handling of ACF without declaring each and every component we use, which I tried, but couldn’t quite get to work in a satisfactory manner.
There is the following ckeditor bug ticket which has been again closed because ACF does allow you, as stated above, have image with and height be attributes not inline styles. However, getting ACF to work in Drupal with our myriad of other filters makes for a very challenging task.
While I do not feel this is a bug with WYSIWYG it is an annoyance for those using ckeditor and trying to create flexible images.
Hello,
What page or script you insert this code?
thank you!
You place the javascript inside of your themes js file. Depending what theme you use this could be in a variety of places. Look for a directory named js or javascript and then plop this code into the file residing in that directory.