diff --git a/lib/Newsletter/Renderer/Columns/Renderer.php b/lib/Newsletter/Renderer/Columns/Renderer.php index c44ef533cf..55aa72c8ed 100644 --- a/lib/Newsletter/Renderer/Columns/Renderer.php +++ b/lib/Newsletter/Renderer/Columns/Renderer.php @@ -2,14 +2,14 @@ namespace MailPoet\Newsletter\Renderer\Columns; class Renderer { - function render($column_styles, $columns_count, $columns_data) { + function render($column_styles, $column_image, $columns_count, $columns_data) { $styles = $column_styles['block']; $width = ColumnsHelper::columnWidth($columns_count); $class = ColumnsHelper::columnClass($columns_count); $alignment = ColumnsHelper::columnAlignment($columns_count); $template = ($columns_count === 1) ? - $this->getOneColumnTemplate($styles, $class) : - $this->getMultipleColumnsTemplate($styles, $width, $alignment, $class); + $this->getOneColumnTemplate($styles, $column_image, $class) : + $this->getMultipleColumnsTemplate($styles, $column_image, $width, $alignment, $class); $result = array_map(function($content) use ($template) { return $template['content_start'] . $content . $template['content_end']; }, $columns_data); @@ -20,16 +20,16 @@ class Renderer { return $result; } - function getOneColumnTemplate($styles, $class) { - $background_color = $this->getBackgroundColor($styles); + function getOneColumnTemplate($styles, $image, $class) { + $background_css = $this->getBackgroundCss($styles, $image); $template['content_start'] = ' - +
- +
'; $template['content_end'] = ' @@ -43,11 +43,11 @@ class Renderer { return $template; } - function getMultipleColumnsTemplate($styles, $width, $alignment, $class) { - $background_color = $this->getBackgroundColor($styles); + function getMultipleColumnsTemplate($styles, $image, $width, $alignment, $class) { + $background_css = $this->getBackgroundCss($styles, $image); $template['container_start'] = ' -
+ @@ -78,11 +78,21 @@ class Renderer { return $template; } - function getBackgroundColor($styles) { - if(!isset($styles['backgroundColor'])) return false; - $background_color = $styles['backgroundColor']; - return ($background_color !== 'transparent') ? - sprintf('background-color:%s!important;" bgcolor="%s', $background_color, $background_color) : - false; + private function getBackgroundCss($styles, $image) { + if($image !== null && $image['src'] !== null) { + $background_color = isset($styles['backgroundColor']) && $styles['backgroundColor'] !== 'transparent' ? $styles['backgroundColor'] : '#ffffff'; + $repeat = $image['display'] === 'tile' ? 'repeat' : 'no-repeat'; + $size = $image['display'] === 'scale' ? 'cover' : 'contain'; + return sprintf( + 'background: %s url(%s) %s center/%s;background-color: %s;background-image: url(%s);background-repeat: %s;background-position: center;background-size: %s;', + $background_color, $image['src'], $repeat, $size, $background_color, $image['src'], $repeat, $size + ); + } else { + if(!isset($styles['backgroundColor'])) return false; + $background_color = $styles['backgroundColor']; + return ($background_color !== 'transparent') ? + sprintf('background-color:%s!important;" bgcolor="%s', $background_color, $background_color) : + false; + } } } \ No newline at end of file diff --git a/lib/Newsletter/Renderer/Renderer.php b/lib/Newsletter/Renderer/Renderer.php index c9343682c2..6485952793 100644 --- a/lib/Newsletter/Renderer/Renderer.php +++ b/lib/Newsletter/Renderer/Renderer.php @@ -103,8 +103,10 @@ class Renderer { $content_block, $column_count ); + $content_block_image = isset($content_block['image'])?$content_block['image']:null; return $_this->columns_renderer->render( $content_block['styles'], + $content_block_image, $column_count, $column_data ); diff --git a/tests/unit/Newsletter/RendererTest.php b/tests/unit/Newsletter/RendererTest.php index a600fa2e3c..9c8405f180 100644 --- a/tests/unit/Newsletter/RendererTest.php +++ b/tests/unit/Newsletter/RendererTest.php @@ -59,6 +59,7 @@ class RendererTest extends \MailPoetTest { $DOM = $this->DOM_parser->parseStr( $this->column_renderer->render( $column_styles, + null, count($column_content), $column_content) ); @@ -81,6 +82,7 @@ class RendererTest extends \MailPoetTest { $DOM = $this->DOM_parser->parseStr( $this->column_renderer->render( $column_styles, + null, count($column_content), $column_content) ); @@ -104,6 +106,7 @@ class RendererTest extends \MailPoetTest { $DOM = $this->DOM_parser->parseStr( $this->column_renderer->render( $column_styles, + null, count($column_content), $column_content) ); @@ -113,6 +116,82 @@ class RendererTest extends \MailPoetTest { expect($rendered_column_content)->equals($column_content); } + function testItRendersScaledColumnBackgroundImage() { + $column_content = ['one']; + $column_styles = ['block' => ['backgroundColor' => "#999999"]]; + $column_image = ['src' => 'https://example.com/image.jpg', 'display' => 'scale', 'width' => '1000px', 'height' => '500px']; + $DOM = $this->DOM_parser->parseStr( + $this->column_renderer->render( + $column_styles, + $column_image, + count($column_content), + $column_content) + ); + $column_css = $DOM('td.mailpoet_content')[0]->attr('style'); + expect($column_css)->contains('background: #999999 url(https://example.com/image.jpg) no-repeat center/cover;'); + expect($column_css)->contains('background-color: #999999;'); + expect($column_css)->contains('background-image: url(https://example.com/image.jpg);'); + expect($column_css)->contains('background-repeat: no-repeat;'); + expect($column_css)->contains('background-position: center;'); + expect($column_css)->contains('background-size: cover;'); + } + + function testItRendersFitColumnBackgroundImage() { + $column_content = ['one']; + $column_styles = ['block' => ['backgroundColor' => "#999999"]]; + $column_image = ['src' => 'https://example.com/image.jpg', 'display' => 'fit', 'width' => '1000px', 'height' => '500px']; + $DOM = $this->DOM_parser->parseStr( + $this->column_renderer->render( + $column_styles, + $column_image, + count($column_content), + $column_content) + ); + $column_css = $DOM('td.mailpoet_content')[0]->attr('style'); + expect($column_css)->contains('background: #999999 url(https://example.com/image.jpg) no-repeat center/contain;'); + expect($column_css)->contains('background-color: #999999;'); + expect($column_css)->contains('background-image: url(https://example.com/image.jpg);'); + expect($column_css)->contains('background-repeat: no-repeat;'); + expect($column_css)->contains('background-position: center;'); + expect($column_css)->contains('background-size: contain;'); + } + + function testItRendersTiledColumnBackgroundImage() { + $column_content = ['one']; + $column_styles = ['block' => ['backgroundColor' => "#999999"]]; + $column_image = ['src' => 'https://example.com/image.jpg', 'display' => 'tile', 'width' => '1000px', 'height' => '500px']; + $DOM = $this->DOM_parser->parseStr( + $this->column_renderer->render( + $column_styles, + $column_image, + count($column_content), + $column_content) + ); + $column_css = $DOM('td.mailpoet_content')[0]->attr('style'); + expect($column_css)->contains('background: #999999 url(https://example.com/image.jpg) repeat center/contain;'); + expect($column_css)->contains('background-color: #999999;'); + expect($column_css)->contains('background-image: url(https://example.com/image.jpg);'); + expect($column_css)->contains('background-repeat: repeat;'); + expect($column_css)->contains('background-position: center;'); + expect($column_css)->contains('background-size: contain;'); + } + + function testItRendersFallbackColumnBackgroundColorForBackgroundImage() { + $column_content = ['one']; + $column_styles = ['block' => ['backgroundColor' => 'transparent']]; + $column_image = ['src' => 'https://example.com/image.jpg', 'display' => 'tile', 'width' => '1000px', 'height' => '500px']; + $DOM = $this->DOM_parser->parseStr( + $this->column_renderer->render( + $column_styles, + $column_image, + count($column_content), + $column_content) + ); + $column_css = $DOM('td.mailpoet_content')[0]->attr('style'); + expect($column_css)->contains('background: #ffffff url(https://example.com/image.jpg) repeat center/contain;'); + expect($column_css)->contains('background-color: #ffffff;'); + } + function testItRendersHeader() { $newsletter = $this->newsletter['body']; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][0];