Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#28475 closed enhancement (invalid)

Resizing Images in WYSIWYG should use inline css instead of html width and height

Reported by: doodledogcody's profile DoodleDogCody Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.9.1
Component: TinyMCE Keywords:
Focuses: Cc:

Description

When using the new feature of resizing images directly within the WYSIWYG editor, Wordpress is change the normal html Width and Height attributes

For instance, this

<img class="aligncenter  wp-image-231" src="domain/image.jpg" alt="GreenhouseLoft" width="1024" height="1024" />

becomes this

<img class="aligncenter  wp-image-231" src="domain/image.jpg" alt="GreenhouseLoft" width="853" height="853" />

Seemingly this is how it should work, but with many themes and theme frameworks such as Genesis using Twitter Bootstrap and other CSS Resets as their base, these calls are over ridden by a simple CSS line like the following which is very convenient for the rest of the site.

img { height: auto; width: auto; };

I would like to suggest that the resizing of the image should take place in an inline style element which would override the default css above. For instance

<img style="width:853px; hieght:853px;" class="aligncenter  wp-image-231" src="domain/image.jpg" alt="GreenhouseLoft" width="1024" height="1024" />

This will change nothing with themes that don't have a CSS reset that calls width and height auto on images but will help to fix the problem with themes that do. As it is currently, resizing images in the editor with the new click and drag function causes no actual visual change on the front end of the site.

Change History (3)

#1 @camdensegal
11 years ago

This would cause issues with responsive themes. The standard responsive image css:

img {
   max-width: 100%;
   height: auto;
}

Would break as the height value would be overridden by the inline css and lead to squished images. Themes should be able to override the width and height values without resorting to !important, theme developers just need to be conscious of users setting image sizes and only override when necessary.

#2 @DoodleDogCody
11 years ago

  • Resolution set to invalid
  • Status changed from new to closed

okay, that does make sense, I do see that twitter bootstrap and others are now doing images that way, I was sure an older version was doing it how I mentioned above. I will change my default theme to that and everything should be good to go.

Thanks for the comment this can be closed

#3 @SergeyBiryukov
11 years ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.