diff --git a/mailpoet/lib/EmailEditor/Engine/SettingsController.php b/mailpoet/lib/EmailEditor/Engine/SettingsController.php index c2319551a6..2feda86a2e 100644 --- a/mailpoet/lib/EmailEditor/Engine/SettingsController.php +++ b/mailpoet/lib/EmailEditor/Engine/SettingsController.php @@ -157,7 +157,19 @@ class SettingsController { return trim($cssString); // Remove trailing space and return the formatted string } - private function parseNumberFromStringWithPixels(string $string): float { + public function parseStylesToArray(string $styles): array { + $styles = explode(';', $styles); + $parsedStyles = []; + foreach ($styles as $style) { + $style = explode(':', $style); + if (count($style) === 2) { + $parsedStyles[trim($style[0])] = trim($style[1]); + } + } + return $parsedStyles; + } + + public function parseNumberFromStringWithPixels(string $string): float { return (float)str_replace('px', '', $string); } } diff --git a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Image.php b/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Image.php index 9802986f05..f3a03ef955 100644 --- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Image.php +++ b/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Image.php @@ -15,6 +15,7 @@ class Image implements BlockRenderer { ); $blockContent = $this->applyRoundedStyle($blockContent, $parsedBlock); + $blockContent = $this->addImageDimensions($blockContent, $parsedBlock, $settingsController); $blockContent = $this->addWidthToWrapper($blockContent, $parsedBlock, $settingsController); $blockContent = $this->addCaptionFontSize($blockContent, $settingsController); bdump($parsedBlock); @@ -33,6 +34,27 @@ class Image implements BlockRenderer { return $blockContent; } + /** + * Settings width and height attributes for images is important for MS Outlook. + */ + private function addImageDimensions($blockContent, array $parsedBlock, SettingsController $settingsController) { + $html = new \WP_HTML_Tag_Processor($blockContent); + if ($html->next_tag(['tag_name' => 'img'])) { + // Getting height from styles and if it's set, we set the height attribute + $styles = $html->get_attribute('style'); + $styles = $settingsController->parseStylesToArray($styles); + $height = $styles['height'] ?? null; + if ($height && is_numeric($settingsController->parseNumberFromStringWithPixels($height))) { + $html->set_attribute('height', $settingsController->parseNumberFromStringWithPixels($height)); + } + + $html->set_attribute('width', $settingsController->parseNumberFromStringWithPixels($parsedBlock['email_attrs']['width'])); + $blockContent = $html->get_updated_html(); + } + + return $blockContent; + } + /** * We need to reset font-size to avoid unexpected white spaces and set the width of the wrapper * for having caption text under the image. @@ -81,7 +103,7 @@ class Image implements BlockRenderer { $styles['font-family'] = $contentStyles['typography']['fontFamily']; } - $styles['width'] = '100%'; + $styles['width'] = '100% !important'; // Using important is necessary for Gmail app on mobile devices $align = $parsedBlock['attrs']['align'] ?? 'left'; return '