Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add rendering improvements for Outlook

Browse Source 
[MAILPOET-5705]
This commit is contained in:
Jan Lysý
2023-11-22 20:14:06 +01:00
committed by Rostislav Wolný
parent 9122737523
commit 7792331999
2 changed files with 36 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
mailpoet/lib/EmailEditor/Engine/SettingsController.php
View File

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

24
mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Image.php
View File

@@ -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 '