How images are constrained in size when inserted in the WordPress editor

The article describes how images are constrained in size when inserted in the editor in WordPress, and the role of the variable $content_width. Under certain conditions even thumbnails and medium-sized images are constrained.

In WordPress 3.5 a significant update was made to the media administration panels, which now rely heavily on JavaScript and the Backbone.js framework.

A not very obvious fact is that images are sometimes constrained in size when inserted in a post, which means that their height and width attributes are reduced compared to the actual image size. This is generally done to make the images fit the main content area of the post or page.

This post is about a small detail of the media insertion panel, namely the calculation of the image dimensions shown in the size drop-down list for a selected image in the panel, and which are applied to the inserted image. I contributed with some bug fixes to the image size calculations (tickets #22738 and #23102). Ticket #22738 made a correction to the shown dimensions of large-size images, which are likely to be constrained in size due to the $content_width variable. Ticket #23102 provided a similar fix for thumbnails and medium-sized images, which in some circumstances also are constrained in size.

A constrained large-size image
A large-size image constrained to 704px, and with a max-width of 100%

Read more »