incorrect inline css for images

  • 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);
}

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter mark2048

    (@mark2048)

    – not sure how to edit the original post : Newsmag is of course the Theme, not a style.

    @mark2048 Thanks for the information and context. Can you confirm you are using WPBakery and also the version of Newsmag in use? Older versions of NewsMag offer a variation of the official AMP plugin, while newer versions provide their own Reader mode templates, so it might require some more troubleshooting.

    Thread Starter mark2048

    (@mark2048)

    Hi

    Currently : Newsmag v4.2 , WPBakery 5.7

    With the same versions of these plugins, using 0.6 of your plugin ‘max-width’ was written out as an inline style key, but newer versions generate ‘width’.

    Looking at the amp_post_template_add_styles($amp_template) code, it seems that v0.6 used to find styles: $styles = $amp_template->get( ‘post_amp_styles’ ) but the newer versions find stylesheets, in $stylesheets = $amp_template->get( ‘post_amp_stylesheets’ )

    @mark2048 You can always change the CSS on your AMP URLs only if you are not happy with how the plugin renders images in Reader mode. The below is an example of a CSS rule which would apply to AMP URLs only:

    add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
function xyz_amp_my_additional_css_styles( $amp_template ) {
        ?>
.your_image_class{
max-width:660px;
}
        <?php
}

    That will overwrite any of your current CSS rules.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘incorrect inline css for images’ is closed to new replies.