From 28356a522a90eec687328cfa3b5d76229f2ef79e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 12 Dec 2018 10:26:57 +0100 Subject: [PATCH 1/3] Fix images without dimensions being given size of 0 [MAILPOET-1680] --- lib/Newsletter/Editor/StructureTransformer.php | 6 ++++-- lib/Newsletter/Renderer/Blocks/Image.php | 14 ++++++++++---- lib/Newsletter/Renderer/Template.html | 1 - 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/lib/Newsletter/Editor/StructureTransformer.php b/lib/Newsletter/Editor/StructureTransformer.php index 06dcdf6ebf..42f12668ca 100644 --- a/lib/Newsletter/Editor/StructureTransformer.php +++ b/lib/Newsletter/Editor/StructureTransformer.php @@ -49,14 +49,16 @@ class StructureTransformer { $image = $item; } + $width = $image->getAttribute('width'); + $height = $image->getAttribute('height'); return array( 'type' => 'image', 'link' => $link, 'src' => $image->getAttribute('src'), 'alt' => $image->getAttribute('alt'), 'fullWidth' => $image_full_width, - 'width' => $image->getAttribute('width'), - 'height' => $image->getAttribute('height'), + 'width' => $width === null ? 'auto' : $width, + 'height' => $height === null ? 'auto' : $height, 'styles' => array( 'block' => array( 'textAlign' => 'center', diff --git a/lib/Newsletter/Renderer/Blocks/Image.php b/lib/Newsletter/Renderer/Blocks/Image.php index fe72a1a0e4..a9641ad4b8 100644 --- a/lib/Newsletter/Renderer/Blocks/Image.php +++ b/lib/Newsletter/Renderer/Blocks/Image.php @@ -14,11 +14,17 @@ class Image { $element['src'] = get_option('siteurl') . $element['src']; } - $element['width'] = (int)$element['width']; - $element['height'] = (int)$element['height']; - $element = self::adjustImageDimensions($element, $column_base_width); + $element['width'] = str_replace('px', '', $element['width']); + $element['height'] = str_replace('px', '', $element['height']); + if(is_numeric($element['width']) && is_numeric($element['height'])) { + $element['width'] = (int)$element['width']; + $element['height'] = (int)$element['height']; + $element = self::adjustImageDimensions($element, $column_base_width); + } + + $max_width = is_numeric($element['width']) ? ($element['width'] . 'px') : '100%'; $image_template = ' - ' . $element['alt'] . ' '; if(!empty($element['link'])) { diff --git a/lib/Newsletter/Renderer/Template.html b/lib/Newsletter/Renderer/Template.html index 1b9cc0f231..f4fcaf4887 100644 --- a/lib/Newsletter/Renderer/Template.html +++ b/lib/Newsletter/Renderer/Template.html @@ -28,7 +28,6 @@ } .mailpoet_image img { height: auto; - width: 100%; -ms-interpolation-mode: bicubic; border: 0; display: block; From 970123d0cee55c56a79a2cc44c20c08df87af2ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 12 Dec 2018 15:46:10 +0100 Subject: [PATCH 2/3] Add test for images with 'auto' dimensions [MAILPOET-1680] --- tests/integration/Newsletter/RendererTest.php | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/tests/integration/Newsletter/RendererTest.php b/tests/integration/Newsletter/RendererTest.php index 88e89f3971..3b0493cd77 100644 --- a/tests/integration/Newsletter/RendererTest.php +++ b/tests/integration/Newsletter/RendererTest.php @@ -334,6 +334,20 @@ class RendererTest extends \MailPoetTest { expect($new_image_dimensions['width'])->equals(619); } + function testItRendersImageWithAutoDimensions() { + $image = array( + 'width' => 'auto', + 'height' => 'auto', + 'src' => 'https://example.com/image.jpg', + 'link' => '', + 'fullWidth' => false, + 'alt' => 'some test alt text' + ); + $rendered_image = Image::render($image, self::COLUMN_BASE_WIDTH); + expect($rendered_image)->contains('width="auto"'); + expect($rendered_image)->contains('max-width:100%'); + } + function testItRendersText() { $newsletter = $this->newsletter['body']; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][2]; From adf1783cd927e9b882c0de2223d9c178b50e8342 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 12 Dec 2018 17:34:45 +0100 Subject: [PATCH 3/3] Add test ensuring image renderer understands dimensions both with & without 'px' [MAILPOET-1680] --- tests/integration/Newsletter/RendererTest.php | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/tests/integration/Newsletter/RendererTest.php b/tests/integration/Newsletter/RendererTest.php index 3b0493cd77..8b01324fb8 100644 --- a/tests/integration/Newsletter/RendererTest.php +++ b/tests/integration/Newsletter/RendererTest.php @@ -348,6 +348,34 @@ class RendererTest extends \MailPoetTest { expect($rendered_image)->contains('max-width:100%'); } + function testItAdjustImageDimensionsWithPx() { + $image = array( + 'width' => '1000px', + 'height' => '1000px', + 'src' => 'https://example.com/image.jpg', + 'link' => '', + 'fullWidth' => false, + 'alt' => 'some test alt text' + ); + $rendered_image = Image::render($image, self::COLUMN_BASE_WIDTH); + expect($rendered_image)->contains('width="620"'); + expect($rendered_image)->contains('max-width:620px'); + } + + function testItAdjustImageDimensionsWithoutPx() { + $image = array( + 'width' => '1000', + 'height' => '1000', + 'src' => 'https://example.com/image.jpg', + 'link' => '', + 'fullWidth' => false, + 'alt' => 'some test alt text' + ); + $rendered_image = Image::render($image, self::COLUMN_BASE_WIDTH); + expect($rendered_image)->contains('width="620"'); + expect($rendered_image)->contains('max-width:620px'); + } + function testItRendersText() { $newsletter = $this->newsletter['body']; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][2];