Title: incorrect inline css for images
Last modified: July 10, 2019

---

# incorrect inline css for images

 *  [mark2048](https://wordpress.org/support/users/mark2048/)
 * (@mark2048)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fincorrect-inline-css-for-images%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Thread Starter [mark2048](https://wordpress.org/support/users/mark2048/)
 * (@mark2048)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/incorrect-inline-css-for-images/#post-11717912)
 * – not sure how to edit the original post : Newsmag is of course the Theme, not
   a style.
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/incorrect-inline-css-for-images/#post-11718543)
 * [@mark2048](https://wordpress.org/support/users/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](https://wordpress.org/support/users/mark2048/)
 * (@mark2048)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/incorrect-inline-css-for-images/#post-11718749)
 * 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’)
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/incorrect-inline-css-for-images/#post-11721577)
 * [@mark2048](https://wordpress.org/support/users/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.

 * ![](https://ps.w.org/amp/assets/icon.svg?rev=2527602)
 * [AMP](https://wordpress.org/plugins/amp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/amp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/amp/)
 * [Active Topics](https://wordpress.org/support/plugin/amp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/amp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/amp/reviews/)

## Tags

 * [image width](https://wordpress.org/support/topic-tag/image-width/)
 * [max-width](https://wordpress.org/support/topic-tag/max-width/)
 * [too wide](https://wordpress.org/support/topic-tag/too-wide/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 4 replies
 * 2 participants
 * Last reply from: [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * Last activity: [6 years, 11 months ago](https://wordpress.org/support/topic/incorrect-inline-css-for-images/#post-11721577)
 * Status: not resolved