Add background images support to renderer [MAILPOET-1403]

2018-07-16 17:05:22 +02:00
parent d8581f761f
commit c3e2b17aa1
3 changed files with 107 additions and 16 deletions
--- 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'] = '
      <tr>
-        <td class="mailpoet_content" align="center" style="border-collapse:collapse">
+        <td class="mailpoet_content" align="center" style="border-collapse:collapse;' . $background_css . '">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;mso-table-lspace:0;mso-table-rspace:0">
            <tbody>
              <tr>
                <td style="padding-left:0;padding-right:0">
-                  <table width="100%" border="0" cellpadding="0" cellspacing="0" class="mailpoet_' . $class . '" style="border-spacing:0;mso-table-lspace:0;mso-table-rspace:0;table-layout:fixed;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;' . $background_color . '">
+                  <table width="100%" border="0" cellpadding="0" cellspacing="0" class="mailpoet_' . $class . '" style="border-spacing:0;mso-table-lspace:0;mso-table-rspace:0;table-layout:fixed;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;">
                    <tbody>';
    $template['content_end'] = '
                    </tbody>
@@ -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'] = '
      <tr>
-        <td class="mailpoet_content-' . $class . '" align="left" style="border-collapse:collapse;' . $background_color . '">
+        <td class="mailpoet_content-' . $class . '" align="left" style="border-collapse:collapse;' . $background_css . '">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;mso-table-lspace:0;mso-table-rspace:0">
            <tbody>
              <tr>
@@ -78,11 +78,21 @@ class Renderer {
    return $template;
  }

-  function getBackgroundColor($styles) {
+  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;
    }
+  }
 }
--- 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
      );
--- 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];