The media 7.x-1.0-rc3 included #1186434: Media field image formatter doesn't create width and height attributes. which broke the image resize filter for media images in a WYSIWYG.

To verify if you reverse the changes in 1186434 by git apply -R the patch at http://drupalcode.org/project/media.git/patch/85753f3 resizing works again.

I'm not sure how to being working around this as media is now applying the width and the height which overrides the size set by image_resize_filter.

Comments

quicksketch’s picture

quicksketch
he/him
commented

I don't see how adding height/width would cause any breakage. It's the height/width that Image Resize Filter uses to do it's resizing, so if you didn't have them, it couldn't do anything. Could you describe the before and after effect on the markup that caused this breakage?

fenstrat’s picture

fenstrat
he/him
Primary language English
Location Australia
commented

If this is the input:

<p>[[{"type":"media","view_mode":"media_original","fid":"1234","attributes":{"alt":"","class":"media-image","height":"100","typeof":"foaf:Image","width":"85"}}]]</p>

This is the expected output:

<p><a href="http://example.com/files/images/image.jpg" class="colorbox"><img alt="" class="media-image" height="100" width="85" typeof="foaf:Image" src="http://example.com/files/resize/images/image-100x75.jpg" /></a></p>

However with media-7.x-1.0-rc3 what you get is:

<p><img alt="" class="media-image" height="1000" width="850" typeof="foaf:Image" src="http://example.com/files/images/image.jpg" /></p>

The expected output is present in media-7.x-1.0-rc2, or if you rollback http://drupalcode.org/project/media.git/patch/85753f3 as mentioned above in #0.

Tracking this back the issue stems from media_token_to_markup() which converts the token into markup through a render array. In doing so the $element is rendered as:

array(
  '#theme' => 'image_style',
  ...
  '#width' => 1000,
  '#height' => 850,
  '#attributes' => array(
    'height' => 85,
    'width' => 100,
  ),
);

As you can see, the styles applied in the WYSIWYG (100x85) are present in the #attributes, but as of media-7.x-1.0-rc3 the original image's #width and #height are included (previous to this they were not included). As a result when rendered as an img tag these values are overriding those set in the #attributes.

Question is, how to work around this, or how to overcome it?

quicksketch’s picture

quicksketch
he/him
commented
Category: bug » support
Priority: Major » Normal

Ah, well in that case this is indeed an issue with Media. There's nothing we can do on this side. Image Resize Filter is entirely dependent upon the height/width attributes that are passed to it. If the HTML doesn't contain the resized values, there's nothing it can do. I'm moving this to a support request, as there's nothing we can do over here.

fenstrat’s picture

fenstrat
he/him
Primary language English
Location Australia
commented

Yep fair enough. Will follow up in #1411340: Resizing images in WYSIWYG broken in media-7.x-1.0-rc3+ & 2.0-unstable3+.

mpgeek’s picture

mpgeek commented

There is now a how to for this issue using Media 2.x: #944184: Generate scaled cached image when scaling in WYSIWYG editor.

fenstrat’s picture

fenstrat
he/him
Primary language English
Location Australia
commented

Thanks @mpgeek #944184-9: Generate scaled cached image when scaling in WYSIWYG editor and http://drupal.org/node/1599070 certainly overcome this issue. However it's not really a viable option with a WYSIWYG editor where width/height is set by clicking and dragging to set the image size. If that's your usecase you might try #1411340-12: Resizing images in WYSIWYG broken in media-7.x-1.0-rc3+ & 2.0-unstable3+.