WordPress editor: how to work with large images on mobile devices

Even if WordPress has a mobile app for easily editing posts, it still lacks many features, so for non-basic operations it is still necessary to use the responsive dashboard on a mobile browser.

When a post includes full-width images with a total width bigger than the editor window, there are some visualization issues which make it difficult to view the article, edit it and even use the interface controls.

While disabling the automatic zoom for the admin area can be helpful, a good solution is to set a maximum width for the images included in the post.

In order to do it, we need to create a custom css style for the editor – let’s name it editor-style.css – with the following rules:

html, .wp-caption, img {width:98% !important;}
img {height:auto !important;}

It’s important to limit these rules to those cases where the post total width is larger than the actual editor width, so we can wrap the code in a media query.

Additionally, we need to exclude some special images, such as the “Page Break” and “Rear More” placeholders, which have the attribute [data-mce-resize="false"].

The resulting CSS code, for a post box width of 720px, is the following:

@media screen and (max-width: 719px)
{	html, .wp-caption, img:not([data-mce-resize="false"]) {width:98% !important;}
	img:not([data-mce-resize="false"]) {height:auto !important;}	

Next, we need to load this custom css stylesheet so that it is used on WordPress’ TinyMCE editor. To do it, let’s add the following lines to the functions.php template.

function add_custom_editor_style() {
    add_editor_style( 'editor-style.css' );
add_action( 'admin_init', 'add_custom_editor_style' ); 

This should allow to insert large images and to have them displayed correctly in the editor area of the edit post page.

Leave a comment