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

- Updates logic behind image dimensions based on column width

Browse Source
This commit is contained in:
Vlad
2016-02-12 12:05:27 -05:00
parent 57f0b88299
commit 27d5972306
2 changed files with 240 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lib/Newsletter/Renderer/Blocks/Image.php
View File

@@ -23,18 +23,18 @@ class Image {
$column_width = ColumnsHelper::columnWidth($column_count); $column_width = ColumnsHelper::columnWidth($column_count);
$padded_width = StylesHelper::$padding_width * 2; $padded_width = StylesHelper::$padding_width * 2;
// scale image to fit column width // scale image to fit column width
if($element['width'] > $column_width || if($element['width'] > $column_width) {
($element['width'] < $column_width && $element['fullWidth'] === true)
) {
$ratio = $element['width'] / $column_width; $ratio = $element['width'] / $column_width;
$element['width'] = $column_width; $element['width'] = $column_width;
$element['height'] = ceil($element['height'] / $ratio); $element['height'] = (int) ceil($element['height'] / $ratio);
} }
// resize image if the image is padded and wider than column width // resize image if the image is padded and wider than padded column width
if($element['fullWidth'] === false && $element['width'] >= $column_width) { if($element['fullWidth'] === false &&
$ratio = $element['width'] / ($element['width'] - $padded_width); $element['width'] > ($column_width - $padded_width)
$element['width'] = $element['width'] - $padded_width; ) {
$element['height'] = ceil($element['height'] / $ratio); $ratio = $element['width'] / ($column_width - $padded_width);
$element['width'] = $column_width - $padded_width;
$element['height'] = (int) ceil($element['height'] / $ratio);
} }
return $element; return $element;
} }

470
tests/unit/Newsletter/RendererCest.php
View File

@@ -24,110 +24,110 @@ class NewsletterRendererCest {
} }
function itRendersCompleteNewsletter() { function itRendersCompleteNewsletter() {
$template = $this->renderer->render(); $template = $this->renderer->render();
expect(isset($template['html']))->true(); expect(isset($template['html']))->true();
expect(isset($template['text']))->true(); expect(isset($template['text']))->true();
$DOM = $this->DOM_parser->parseStr($template['html']); $DOM = $this->DOM_parser->parseStr($template['html']);
// we expect to have 7 columns: // we expect to have 7 columns:
// 1x column including header // 1x column including header
// 2x column // 2x column
// 3x column // 3x column
// 1x footer // 1x footer
expect(count($DOM('.mailpoet_cols-one')))->equals(2); expect(count($DOM('.mailpoet_cols-one')))->equals(2);
expect(count($DOM('.mailpoet_cols-two')))->equals(2); expect(count($DOM('.mailpoet_cols-two')))->equals(2);
expect(count($DOM('.mailpoet_cols-three')))->equals(3); expect(count($DOM('.mailpoet_cols-three')))->equals(3);
} }
function itRendersOneColumn() { function itRendersOneColumn() {
$column_content = array( $column_content = array(
'one' 'one'
); );
$column_styles = array( $column_styles = array(
'block' => array( 'block' => array(
'backgroundColor' => "#999999" 'backgroundColor' => "#999999"
) )
); );
$DOM = $this->DOM_parser->parseStr( $DOM = $this->DOM_parser->parseStr(
$this->column_renderer->render( $this->column_renderer->render(
$column_styles, $column_styles,
count($column_content), count($column_content),
$column_content) $column_content)
); );
foreach($DOM('table.mailpoet_cols-one > tbody') as $column) { foreach($DOM('table.mailpoet_cols-one > tbody') as $column) {
$rendered_column_content[] = trim($column->text()); $rendered_column_content[] = trim($column->text());
}; };
expect($rendered_column_content)->equals($column_content); expect($rendered_column_content)->equals($column_content);
} }
function itRendersTwoColumns() { function itRendersTwoColumns() {
$column_content = array( $column_content = array(
'one', 'one',
'two' 'two'
); );
$column_styles = array( $column_styles = array(
'block' => array( 'block' => array(
'backgroundColor' => "#999999" 'backgroundColor' => "#999999"
) )
); );
$DOM = $this->DOM_parser->parseStr( $DOM = $this->DOM_parser->parseStr(
$this->column_renderer->render( $this->column_renderer->render(
$column_styles, $column_styles,
count($column_content), count($column_content),
$column_content) $column_content)
); );
foreach($DOM('table.mailpoet_cols-two > tbody') as $column) { foreach($DOM('table.mailpoet_cols-two > tbody') as $column) {
$rendered_column_content[] = trim($column->text()); $rendered_column_content[] = trim($column->text());
}; };
expect($rendered_column_content)->equals($column_content); expect($rendered_column_content)->equals($column_content);
} }
function itRendersThreeColumns() { function itRendersThreeColumns() {
$column_content = array( $column_content = array(
'one', 'one',
'two', 'two',
'three' 'three'
); );
$column_styles = array( $column_styles = array(
'block' => array( 'block' => array(
'backgroundColor' => "#999999" 'backgroundColor' => "#999999"
) )
); );
$DOM = $this->DOM_parser->parseStr( $DOM = $this->DOM_parser->parseStr(
$this->column_renderer->render( $this->column_renderer->render(
$column_styles, $column_styles,
count($column_content), count($column_content),
$column_content) $column_content)
); );
foreach($DOM('table.mailpoet_cols-three > tbody') as $column) { foreach($DOM('table.mailpoet_cols-three > tbody') as $column) {
$rendered_column_content[] = trim($column->text()); $rendered_column_content[] = trim($column->text());
}; };
expect($rendered_column_content)->equals($column_content); expect($rendered_column_content)->equals($column_content);
} }
function itRendersHeader() { function itRendersHeader() {
$newsletter = json_decode($this->newsletter['body'], true); $newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][0]; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][0];
$DOM = $this->DOM_parser->parseStr(Header::render($template)); $DOM = $this->DOM_parser->parseStr(Header::render($template));
// element should be proplerly nested, and styles should be applied // element should be proplerly nested, and styles should be applied
expect(!empty($DOM('tr > td.mailpoet_header', 0)->html()))->true(); expect(!empty($DOM('tr > td.mailpoet_header', 0)->html()))->true();
expect(!empty($DOM('tr > td > a', 0)->html()))->true(); expect(!empty($DOM('tr > td > a', 0)->html()))->true();
expect($DOM('a', 0)->attr('style'))->notEmpty(); expect($DOM('a', 0)->attr('style'))->notEmpty();
expect($DOM('td', 0)->attr('style'))->notEmpty(); expect($DOM('td', 0)->attr('style'))->notEmpty();
} }
function itRendersImage() { function itRendersImage() {
$newsletter = json_decode($this->newsletter['body'], true); $newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][1]; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][1];
$DOM = $this->DOM_parser->parseStr(Image::render($template, $columnCount = 1)); $DOM = $this->DOM_parser->parseStr(Image::render($template, $columnCount = 1));
// element should be properly nested, it's width set and style applied // element should be properly nested, it's width set and style applied
expect($DOM('tr > td > img', 0)->attr('width'))->equals(620); expect($DOM('tr > td > img', 0)->attr('width'))->equals(620);
expect($DOM('tr > td > img', 0)->attr('style'))->notEmpty(); expect($DOM('tr > td > img', 0)->attr('style'))->notEmpty();
} }
function itAdjustsImageDimensions() { function itAdjustsImageDimensions() {
// image gets scaled down when image width > column width & it's not padded // image gets scaled down when image width > column width
$image = array( $image = array(
'width' => 800, 'width' => 800,
'height' => 600, 'height' => 600,
@@ -136,164 +136,156 @@ class NewsletterRendererCest {
$new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1); $new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1);
expect($new_image_dimensions['width'])->equals(660); expect($new_image_dimensions['width'])->equals(660);
expect($new_image_dimensions['height'])->equals(495); expect($new_image_dimensions['height'])->equals(495);
// image gets scaled up when image width < column width & it's not padded
$image['width'] = 100;
$new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1);
expect($new_image_dimensions['width'])->equals(660);
// nothing happens when image width = column width // nothing happens when image width = column width
$image['width'] = 660; $image['width'] = 661;
$new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1); $new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1);
expect($new_image_dimensions['width'])->equals(660); expect($new_image_dimensions['width'])->equals(660);
// image is reduced by 40px when it's padded // nothing happens when image width < column width
$image['width'] = 659;
$new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1);
expect($new_image_dimensions['width'])->equals(659);
// image is reduced by 40px when it's width > padded column width
$image['width'] = 621;
$image['fullWidth'] = false; $image['fullWidth'] = false;
$new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1); $new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1);
expect($new_image_dimensions['width'])->equals(620); expect($new_image_dimensions['width'])->equals(620);
// nothing happens when image with < padded column width
$image['width'] = 619;
$new_image_dimensions = Image::adjustImageDimensions($image, $columnCount = 1);
expect($new_image_dimensions['width'])->equals(619);
} }
function itAdjustImageSizeBasedOnColumnWidth() { function itRendersText() {
$newsletter = json_decode($this->newsletter['body'], true); $newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][1]; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][2];
$template['width'] = '800px'; $DOM = $this->DOM_parser->parseStr(Text::render($template));
$DOM = $this->DOM_parser->parseStr(Image::render($template, $columnCount = 2)); // blockquotes and paragraphs should be converted to spans and placed inside a table
// 800px resized to 330px (2-column layout) and 40px padding applied expect(
expect($DOM('tr > td > img', 0)->attr('width'))->equals(290); !empty($DOM('tr > td > table > tr > td.mailpoet_paragraph', 0)->html())
$template['width'] = '280px'; )->true();
$DOM = $this->DOM_parser->parseStr(Image::render($template, $columnCount = 2)); expect(
// 280px image should not be resized and padding should not be applied !empty($DOM('tr > td > table > tr > td.mailpoet_blockquote', 0)->html()
expect($DOM('tr > td > img', 0)->attr('width'))->equals(280); ))->true();
} // ul/ol/li should have mailpoet_paragraph class added & styles applied
expect(
!empty(
$DOM('tr > td > ul.mailpoet_paragraph > li.mailpoet_paragraph', 0)->html()
)
)->true();
expect(
!empty(
$DOM('tr > td > ol.mailpoet_paragraph > li.mailpoet_paragraph', 0)->html()
)
)->true();
expect($DOM('tr > td.mailpoet_text > ul.mailpoet_paragraph', 0)->attr('style'))
->contains('padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;');
// headings should be styled
expect($DOM('tr > td.mailpoet_text > h1', 0)->attr('style'))
->contains('margin:0;font-style:normal;font-weight:normal;');
function itRendersText() { }
$newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][2];
$DOM = $this->DOM_parser->parseStr(Text::render($template));
// blockquotes and paragraphs should be converted to spans and placed inside a table
expect(
!empty($DOM('tr > td > table > tr > td.mailpoet_paragraph', 0)->html())
)->true();
expect(
!empty($DOM('tr > td > table > tr > td.mailpoet_blockquote', 0)->html()
))->true();
// ul/ol/li should have mailpoet_paragraph class added & styles applied
expect(
!empty(
$DOM('tr > td > ul.mailpoet_paragraph > li.mailpoet_paragraph', 0)->html()
)
)->true();
expect(
!empty(
$DOM('tr > td > ol.mailpoet_paragraph > li.mailpoet_paragraph', 0)->html()
)
)->true();
expect($DOM('tr > td.mailpoet_text > ul.mailpoet_paragraph', 0)->attr('style'))
->contains('padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;');
// headings should be styled
expect($DOM('tr > td.mailpoet_text > h1', 0)->attr('style'))
->contains('margin:0;font-style:normal;font-weight:normal;');
} function itRendersDivider() {
$newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][3];
$DOM = $this->DOM_parser->parseStr(Divider::render($template));
// element should be properly nested and its border-top-width set
expect(
preg_match(
'/border-top-width: 3px/',
$DOM('tr > td.mailpoet_divider > table > tr > td.mailpoet_divider-cell', 0)->attr('style')
))->equals(1);
}
function itRendersDivider() { function itRendersSpacer() {
$newsletter = json_decode($this->newsletter['body'], true); $newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][3]; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][4];
$DOM = $this->DOM_parser->parseStr(Divider::render($template)); $DOM = $this->DOM_parser->parseStr(Spacer::render($template));
// element should be properly nested and its border-top-width set // element should be properly nested and its height set
expect( expect($DOM('tr > td.mailpoet_spacer', 0)->attr('height'))->equals(50);
preg_match( }
'/border-top-width: 3px/',
$DOM('tr > td.mailpoet_divider > table > tr > td.mailpoet_divider-cell', 0)->attr('style')
))->equals(1);
}
function itRendersSpacer() { function itRendersButton() {
$newsletter = json_decode($this->newsletter['body'], true); $newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][4]; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][5];
$DOM = $this->DOM_parser->parseStr(Spacer::render($template)); $DOM = $this->DOM_parser->parseStr(Button::render($template));
// element should be properly nested and its height set // element should be properly nested with arcsize/styles/fillcolor set
expect($DOM('tr > td.mailpoet_spacer', 0)->attr('height'))->equals(50); expect(
} !empty($DOM('tr > td > div > table > tr > td > a.mailpoet_button', 0)->html())
)->true();
expect(
preg_match(
'/line-height: 30px/',
$DOM('a.mailpoet_button', 0)->attr('style'))
)->equals(1);
expect(
preg_match(
'/arcsize="' . round(20 / 30 * 100) . '%"/',
$DOM('tr > td > div > table > tr > td', 0)->text())
)->equals(1);
expect(
preg_match(
'/style="height:30px.*?width:100px/',
$DOM('tr > td > div > table > tr > td', 0)->text())
)->equals(1);
expect(
preg_match(
'/style="color:#ffffff.*?font-family:Arial.*?font-size:14px/',
$DOM('tr > td > div > table > tr > td', 0)->text())
)->equals(1);
expect(
preg_match(
'/fillcolor="#666666/',
$DOM('tr > td > div > table > tr > td', 0)->text())
)->equals(1);
}
function itRendersButton() { function itRendersSocialIcons() {
$newsletter = json_decode($this->newsletter['body'], true); $newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][5]; $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][6];
$DOM = $this->DOM_parser->parseStr(Button::render($template)); $DOM = $this->DOM_parser->parseStr(Social::render($template));
// element should be properly nested with arcsize/styles/fillcolor set // element should be properly nested, contain social icons and
expect( // image source/link href/alt should be properly set
!empty($DOM('tr > td > div > table > tr > td > a.mailpoet_button', 0)->html()) expect(!empty($DOM('tr > td', 0)->html()))->true();
)->true(); expect($DOM('a', 0)->attr('href'))->equals('http://example.com');
expect( expect($DOM('td > a:nth-of-type(10) > img')->attr('src'))->contains('custom.png');
preg_match( expect($DOM('td > a:nth-of-type(10) > img')->attr('alt'))->equals('custom');
'/line-height: 30px/', // there should be 10 icons
$DOM('a.mailpoet_button', 0)->attr('style')) expect(count($DOM('a > img')))->equals(10);
)->equals(1); }
expect(
preg_match(
'/arcsize="' . round(20 / 30 * 100) . '%"/',
$DOM('tr > td > div > table > tr > td', 0)->text())
)->equals(1);
expect(
preg_match(
'/style="height:30px.*?width:100px/',
$DOM('tr > td > div > table > tr > td', 0)->text())
)->equals(1);
expect(
preg_match(
'/style="color:#ffffff.*?font-family:Arial.*?font-size:14px/',
$DOM('tr > td > div > table > tr > td', 0)->text())
)->equals(1);
expect(
preg_match(
'/fillcolor="#666666/',
$DOM('tr > td > div > table > tr > td', 0)->text())
)->equals(1);
}
function itRendersSocialIcons() { function itRendersFooter() {
$newsletter = json_decode($this->newsletter['body'], true); $newsletter = json_decode($this->newsletter['body'], true);
$template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][6]; $template = $newsletter['content']['blocks'][3]['blocks'][0]['blocks'][0];
$DOM = $this->DOM_parser->parseStr(Social::render($template)); $DOM = $this->DOM_parser->parseStr(Footer::render($template));
// element should be properly nested, contain social icons and // element should be properly nested, and styles should be applied
// image source/link href/alt should be properly set expect(!empty($DOM('tr > td.mailpoet_footer', 0)->html()))->true();
expect(!empty($DOM('tr > td', 0)->html()))->true(); expect(!empty($DOM('tr > td > a', 0)->html()))->true();
expect($DOM('a', 0)->attr('href'))->equals('http://example.com'); expect($DOM('a', 0)->attr('style'))->notEmpty();
expect($DOM('td > a:nth-of-type(10) > img')->attr('src'))->contains('custom.png'); expect($DOM('td', 0)->attr('style'))->notEmpty();
expect($DOM('td > a:nth-of-type(10) > img')->attr('alt'))->equals('custom'); }
// there should be 10 icons
expect(count($DOM('a > img')))->equals(10);
}
function itRendersFooter() { function itSetsSubject() {
$newsletter = json_decode($this->newsletter['body'], true); $template = $this->renderer->render();
$template = $newsletter['content']['blocks'][3]['blocks'][0]['blocks'][0]; $DOM = $this->DOM_parser->parseStr($template['html']);
$DOM = $this->DOM_parser->parseStr(Footer::render($template)); $subject = trim($DOM('title')->text());
// element should be properly nested, and styles should be applied expect($subject)->equals($this->newsletter['subject']);
expect(!empty($DOM('tr > td.mailpoet_footer', 0)->html()))->true(); }
expect(!empty($DOM('tr > td > a', 0)->html()))->true();
expect($DOM('a', 0)->attr('style'))->notEmpty();
expect($DOM('td', 0)->attr('style'))->notEmpty();
}
function itSetsSubject() { function itSetsPreheader() {
$template = $this->renderer->render(); $template = $this->renderer->render();
$DOM = $this->DOM_parser->parseStr($template['html']); $DOM = $this->DOM_parser->parseStr($template['html']);
$subject = trim($DOM('title')->text()); $preheader = trim($DOM('td.mailpoet_preheader')->text());
expect($subject)->equals($this->newsletter['subject']); expect($preheader)->equals($this->newsletter['preheader']);
} }
function itSetsPreheader() { function itPostProcessesTemplate() {
$template = $this->renderer->render(); $template = $this->renderer->render();
$DOM = $this->DOM_parser->parseStr($template['html']); // !important should be stripped from everywhere except from
$preheader = trim($DOM('td.mailpoet_preheader')->text()); // with the <style> tag
expect($preheader)->equals($this->newsletter['preheader']); expect(preg_match('/<style.*?important/s', $template['html']))
} ->equals(1);
expect(preg_match('/mailpoet_template.*?important/s', $template['html']))
function itPostProcessesTemplate() { ->equals(0);
$template = $this->renderer->render(); }
// !important should be stripped from everywhere except from
// with the <style> tag
expect(preg_match('/<style.*?important/s', $template['html']))
->equals(1);
expect(preg_match('/mailpoet_template.*?important/s', $template['html']))
->equals(0);
}
} }