Search code examples
phppinterestamp-html

AMP Pinterest size issue


In all tutorials / examples the correct width and height of our embeded pinterest image has to be set. We (currently) have no possibility to get this information.
We got some AMP layout possibilities but none of these seem to work:

  • fixed height -> problems with landscape images -> cutted
  • fixed -> cutted
  • responsive -> no dimensions -> not displayed

Why is the Pinterest behavior not the same like instagram or twitter?

When you look at the example page: https://ampbyexample.com/components/amp-pinterest/
here the PIN is also displayed wrong. Why?

Summarized:
Is it possible to get Pinterest working without the dimensions?
If it’s not possible without the dimensions: Do we need the PHP API to get these dimensions?


Solution

  • One of the main goals of AMP is to avoid any content reflow while the page is loading. AMP achieves this by statically layouting the whole page. This requires that the height of all AMP components can be calculated in advanced. This is the reason why you need to specify the height of the Pinterest embed and there is no way around it (the same is true for all other embeds such as twitter, instagram,...).

    In your case, it sounds like the responsive layout is the best option (it requires width and height though in order to calculate the image aspect ratio). However, it looks like amp-pinterest doesn't properly support the responsive layout as the image isn't scaled. I'd recommend filing a bug report for the AMP runtime.

    P.S. The samples on https://ampbyexample.com/components/amp-pinterest/ are fixed now.