Merge pull request #1687 from mailpoet/images-fix

Fix images without dimensions being given size of 0 [MAILPOET-1680]

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'),
+          'width' => $width === null ? 'auto' : $width,
-          'height' => $image->getAttribute('height'),
+          'height' => $height === null ? 'auto' : $height,
           'styles' => array(
             'block' => array(
               'textAlign' => 'center',

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['width'] = str_replace('px', '', $element['width']);
-    $element['height'] = (int)$element['height'];
+    $element['height'] = str_replace('px', '', $element['height']);
-    $element = self::adjustImageDimensions($element, $column_base_width);
+    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 = '
-      <img style="max-width:' . $element['width'] . 'px;" src="' . $element['src'] . '"
+      <img style="max-width:' . $max_width . ';" src="' . $element['src'] . '"
       width="' . $element['width'] . '" alt="' . $element['alt'] . '"/>
       ';
     if(!empty($element['link'])) {

lib/Newsletter/Renderer/Template.html

@@ -28,7 +28,6 @@
         }
         .mailpoet_image img {
             height: auto;
-            width: 100%;
             -ms-interpolation-mode: bicubic;
             border: 0;
             display: block;

tests/integration/Newsletter/RendererTest.php

@@ -334,6 +334,48 @@ 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 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];