Merge pull request #121 from Lullabot/46-pinterest-workaround

46 pinterest workaround

README.md

@@ -250,7 +250,8 @@ print($amp->warningsHumanText());
 
 ### Caveats and Known issues
 - We only support UTF-8 string input and output from the library. If you're using ASCII, then you don't need to worry as UTF-8 is a superset of ASCII. If you're using another encoding like Latin-1 (etc.) you'll need to convert to UTF-8 strings before you use this library 
-- If you have `<img>`s with `https` urls _and_ they don't have height/width attributes _and_ you are using PHP 5.6 or higher _and_ you have not listed any certificate authorities (`cafile`) in your `php.ini` file  _then_ the library may have problems converting these to `<amp-img>`. This is because of http://php.net/manual/en/migration56.openssl.php . That link also has a work around. 
+- If you have `<img>`s with `https` urls _and_ they don't have height/width attributes _and_ you are using PHP 5.6 or higher _and_ you have not listed any certificate authorities (`cafile`) in your `php.ini` file  _then_ the library may have problems converting these to `<amp-img>`. This is because of http://php.net/manual/en/migration56.openssl.php . That link also has a work around.
+- If your `<amp-pinterest>` pins are appearing "chopped off" (after pinterest embed code conversion) try the workaround [here](https://github.com/Lullabot/amp-library/issues/46#issuecomment-230424580) 
 
 ### Useful Links
 - [Composer homepage](https://packagist.org/packages/lullabot/amp) for the AMP PHP Library on [Packagist](https://packagist.org/), the PHP package repository

src/Pass/PinterestTagTransformPass.php

@@ -51,12 +51,13 @@ function pass()
 
             $context_string = $this->getContextString($dom_el);
             $script_tag = $this->getScriptTag($el, '&(*UTF8)pinterest\.com/js/pinit\.js&i');
-            $pinterest_dimensions = $this->getPinterestDimensions($el);
 
             // hard code width and height for now (medium size pin)
             // layout="responsive" is not the way to go. Omit that.
-            $el->after('<amp-pinterest ' . $pinterest_dimensions . ' data-url="' . $data_url . '" data-do="embedPin"></amp-pinterest>');
+            $el->after('<amp-pinterest data-url="' . $data_url . '" data-do="embedPin"></amp-pinterest>');
+            $new_el = $el->next();
             $new_dom_el = $el->next()->get(0);
+            $this->setPinterestDimensionsFrom($el, $new_el);
 
             // Remove the a, its children and the script tag that may follow after the a tag
             $el->removeChildren()->remove();
@@ -75,17 +76,30 @@ function pass()
 
     /**
      * @param DOMQuery $el
-     * @return string
+     * @param DOMQuery $new_el
      */
-    protected function getPinterestDimensions($el)
+    protected function setPinterestDimensionsFrom(DOMQuery $el, DOMQuery $new_el)
     {
+        $dimensions = [
+            'medium' => ['width' => '345', 'height' => '426'],
+            'large' => ['width' => '562', 'height' => '627'],
+            'small' => ['width' => '236', 'height' => '345']
+        ];
+
         $pin_width = trim($el->attr('data-pin-width'));
-        if ($pin_width == 'medium') {
-            return ' width="345" height="426" data-width="medium" ';
-        } else if ($pin_width == 'large') {
-            return ' width="562" height="627" data-width="large" ';
+        if (!in_array($pin_width, ['small', 'medium', 'large'])) {
+            $pin_width = 'small';
+        }
+
+        $width = $el->attr('width');
+        $height = $el->attr('height');
+        $hw_available = !empty($width) && !empty($height);
+        $new_el->attr('data-pin-width', $pin_width);
+        if ($hw_available) {
+            $new_el->attr('width', $width);
+            $new_el->attr('height', $height);
         } else {
-            return ' width="236" height="345" data-width="small" ';
+            $new_el->attr($dimensions[$pin_width]);
         }
     }
 }

tests/test-data/fragment-html/pinterest-fragment.html.out

@@ -1,4 +1,4 @@
-<amp-pinterest width="345" height="426" data-width="medium" data-url="https://www.pinterest.com/pin/99360735500167749/" data-do="embedPin"></amp-pinterest>
+<amp-pinterest data-url="https://www.pinterest.com/pin/99360735500167749/" data-do="embedPin" data-pin-width="medium" width="345" height="426"></amp-pinterest>
 
 
 ORIGINAL HTML