incorrect inline css for images

Replies: 1

I’m a developer & I maintain the site in question.

We’re using the Newsmag style & I’m seeing a problem where the plugin is writing incorrect inline css into the page, causing images in Posts to be set to 660px.

In version 0.6.2 I was seeing:

/* Inline styles */
.amp-wp-inline-72f7148af6599bc6f18d790b3f206645{max-width:660px;}  </style>

but in 1.1 we’re getting:

	/* Inline stylesheets */
:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-241f9ca{width:660px}  </style>

This is causing the error. Around images I’m seeing this:

<figure id="attachment_71569" aria-describedby="caption-attachment-71569" class="wp-caption aligncenter amp-wp-241f9ca">

I can fix the issue either by :
– removing amp-wp-241f9ca from the figure element
– removing the inline css so that this style is not defined
– changing the inline style definition so that it reads min-width instead of width

I’ve got around this by hacking the plugin (just in one place) but is there a better fix for this?

Current hack in place is:

File : amp/includes/amp-post-template-functions.php: 

 * @param AMP_Post_Template $amp_template Template.
 */
function amp_post_template_add_styles( $amp_template ) {
	$stylesheets = $amp_template->get( 'post_amp_stylesheets' );
	if ( ! empty( $stylesheets ) ) {
		echo '/* Inline stylesheets */' . PHP_EOL; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

// update next line
		echo fix_style_width_error(implode( '', $stylesheets )); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	}

	$styles = $amp_template->get( 'post_amp_styles' );
	if ( ! empty( $styles ) ) {
		echo '/* Inline styles */' . PHP_EOL; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		foreach ( $styles as $selector => $declarations ) {
			$declarations = implode( ';', $declarations ) . ';';
// update next line
			print fix_style_width_error( sprintf( '%1$s{%2$s}', $selector, $declarations ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		}
	}
	print "\nh1.title { font-family: 'Open Sans', arial, sans-serif; font-weight:400; color:#222; word-wrap: break-word; }\n";
}

// add this function

/**
 * in v0.6 they used max-width which worked great. After that it was width, which is breaking our amp pages
 * @param $str
 */
function fix_style_width_error($str) {

    return preg_replace('/(^|[^-])(width)/', '$1max-width', $str);
}