Wrap large images

[rmccue]

We should work out how to style images so they don't break emails.

[johnbillion]

Adding a style="max-width:100%" attribute to every <img> tag might work.

[missjwo]

Did some testing in one of work's network sites.

• Wrapping the image with a div with style="max-width: 100%;" works on some email browsers. Not all.
• Adding style="max-width: 100%; " to the image tag works across the board, but the ratio of the image is warped as the height is being set with a pixel amount of the image.
• Adding style="max-width: 100%; height:auto;" or style="max-width: 100%; height:100%;" solves the problem above but it is not a solution across the board. For example - Gmail in the browser shows the large image at max window width and keeps it's ratio in tact. Airmail listens to max-width but ignores height attribute.
• Removing the pixel calculated height off the image allows for both Gmail and Airmail to have full width images and the ratio proportion correct.

Default WordPress image code:

<img src="large-image.jpg" alt="" width="2592" height="" class="alignnone size-full wp-image-215" />

What works in multiple email viewings:

<img src="large-image.jpg" alt="" width="2592" height="" class="alignnone size-full wp-image-215" style="max-width: 100%; height:100%;" />

Suggestion of fix

This could be at a falcon level, but my gut says that it should be at a p2 level - where images are selected, they should not have the height set in them. And the extra style tag should be added.

This could be done at a falcon leve using regex but i'm debating if thats really the right place for the solution.

@rmccue thoughts? let me know if you want a copy of the test emails + posts.

[rmccue]

We fixed this with the following:

/**
 * Set the max-width, and remove height values of images before the content gets email to everyone.
 *
 * It solves the problem where images are wider than the window space
 * in emails and thus force the email to be extra wide.
 *
 * @param string $content
 *
 * @return string $content
 */
function image_width_filter( $content = '' ) {
	if ( ! preg_match_all( '/<img [^>]+>/', $content, $matches ) ) {
		return $content;
	}
	foreach( $matches[0] as $image ) {
		$original = $image;
		if ( false !== strpos( $image, ' height=' ) ) {
			$image = preg_replace( '/ height="([0-9]+)"/', ' height=""', $image );
		}
		$image = str_replace( '<img ', '<img style="max-width:100%; height:auto;" ', $image );
		$content = str_replace( $original, $image, $content );
	}
	return $content;
}
add_filter( 'falcon.connector.wordpress.post_content_html', 'image_width_filter' );
add_filter( 'falcon.connector.wordpress.comment_content_html', 'image_width_filter' );

Yet to be determined whether this should be added to Falcon as well. Probably, is my thinking.

[missjwo]

100% add to falcon!