instagram embeds cut off at small screen sizes

[montchr]

[instagram url="https://instagram.com/p/96cJ_hgNHH/?taken-by=knostikat"]

Running on a fresh site, latest versions of Shortcake and Shortcake Bakery.

Here's the embed at a desktop size:

And at a mobile screen size:

[montchr]

And it's worse for vertical images. This is a desktop size:

[danielbachhuber]

Thanks for the report.

I suppose they have some media queries in their CSS, so retaining the same proportion when scaling causes problems.

I've filed it as a bug. I don't have any great ideas on how to fix right now. Might be worth seeing if Jetpack has addressed this through some means.

[montchr]

I suppose they have some media queries in their CSS, so retaining the same proportion when scaling causes problems.

Thanks, makes sense.

Would it be possible to use the Instagram API oEmbed endpoint? Apparently the embed HTML is included in the response.

[danielbachhuber]

Would it be possible to use the Instagram API oEmbed endpoint?

Could. Related #89

IIRC, we only get the image and some basic text out of the oEmbed endpoint (e.g. no likes, branding, user avatar, etc.). As such, the iframe embed is preferable.

[montchr]

Actually, Jetpack is using the API oEmbed endpoint. But there's a lot of extra stuff related to caching, which probably would be good to keep.

IIRC, we only get the image and some basic text out of the oEmbed endpoint (e.g. no likes, branding, user avatar, etc.). As such, the iframe embed is preferable.

Endpoint does provide HTML, which, in this example, would be:

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/96cJ_hgNHH/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Taking a vacation with The Doctor in the #TARDIS for a few months, see you in a couple minutes</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A photo posted by Chris Montgomery (@knostikat) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-11-10T17:44:03+00:00">Nov 10, 2015 at 9:44am PST</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Tested, looks great, no proportion issues.

[montchr]

Shall I open a PR using the oEmbed endpoint to address this issue?

[danielbachhuber]

Tested, looks great, no proportion issues.

Can you share comparison screenshots?

Shall I open a PR using the oEmbed endpoint to address this issue?

Sure — we'd consider it.

[montchr]

Here's the output of the Shortcake Bakery shortcode:

[instagram url="https://instagram.com/p/_FFvtTDwSG/"]

Note that the bottom of the embed is cut off, as this is a vertical image.

And here's the same Instagram post using the HTML from the oEmbed endpoint (different than the HTML from my previous comment, for comparison's sake):

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/_FFvtTDwSG/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">🔛🔝 #Philadelphia</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A photo posted by @odettablue on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-12-09T17:31:15+00:00">Dec 9, 2015 at 9:31am PST</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Here, the entire embed is intact.

[montchr]

And if you're curious here's the API response for https://api.instagram.com/publicapi/oembed/?url=http://instagr.am/p/_FFvtTDwSG/:

{
  "provider_url": "https://www.instagram.com",
  "media_id": "1136339749667013766_179420960",
  "author_name": "odettablue",
  "height": null,
  "thumbnail_url": "https://scontent-lga3-1.cdninstagram.com/hphotos-xfa1/t51.2885-15/sh0.08/e35/p640x640/12362117_573167109503565_528046734_n.jpg",
  "thumbnail_width": 640,
  "thumbnail_height": 800,
  "provider_name": "Instagram",
  "title": "🔛🔝 #Philadelphia",
  "html": "<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-version=\"6\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:8px;\"> <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;\"> <div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"></div></div> <p style=\" margin:8px 0 0 0; padding:0 4px;\"> <a href=\"https://www.instagram.com/p/_FFvtTDwSG/\" style=\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\" target=\"_blank\">🔛🔝 #Philadelphia</a></p> <p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\">A photo posted by @odettablue on <time style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2015-12-09T17:31:15+00:00\">Dec 9, 2015 at 9:31am PST</time></p></div></blockquote>\n<script async defer src=\"//platform.instagram.com/en_US/embeds.js\"></script>",
  "width": 658,
  "version": "1.0",
  "author_url": "https://www.instagram.com/odettablue",
  "author_id": 179420960,
  "type": "rich"
}

[danielbachhuber]

Cool, let's do it. The global $post needs to be set in order for the oEmbed call to be appropriately cached. You might need to dig into WP internals a bit to see how that's done.

[montchr]

Cool, let's do it.

Ok, great. I'll get started on that.

The global $post needs to be set in order for the oEmbed call to be appropriately cached.

Looks like Jetpack isn't using global $post in its Instagram shortcode at all — they're calling wp_cache_get() and wp_cache_set() independent of WP_Embed. I was planning on modelling this after the Jetpack implementation unless you think there's a better way to do caching here.

Also, Jetpack is using wp_enqueue_script() to load the embed script, then it strips the <script> tag from the embed HTML. This seems like a good way to do it, but I know that there are a few other shortcodes in Bakery that could benefit from that approach too. Is that something I should do here, or would it be better to just leave the <script> and tackle the enqueue method in another PR? I don't think there's currently an issue open for it, but that would prevent us from loading the embed scripts for each and every embed from the same provider (such as in an article with several Twitter embeds).

[danielbachhuber]

I was planning on modelling this after the Jetpack implementation unless you think there's a better way to do caching here.

We should follow core's caching implementation — storing the result in post meta — so we aren't dependent on a persistent object cache.

Is that something I should do here, or would it be better to just leave the <script> and tackle the enqueue method in another PR?

Sure — just for the Instagram embed on this PR.

[montchr]

@danielbachhuber can you clarify the end? Looks like your comment got cut off.

[danielbachhuber]

Oh, <script> was treated as HTML. I've updated