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];
| | |