search

wp-shortcake / shortcake-bakery

A fine selection of shortcodes for WordPress
42 stars 16 forks source link

Fix height calculations for Instagram responsive embeds #195

Open goldenapples opened 7 years ago

goldenapples commented 7 years ago

Fixes the responsivity calculations for Instagram embeds to enable supporting non-square Instagram posts. Introduces a new setting which can be controlled by data attributes on other responsive iframe embeds, data-height-adjust. If this value is set on an embed, that portion of the height will be considered static, and the remainder of the height will scale linearly with the width.

(This fix also fixes #162, because it checks for the image height when reversing the embed code.)

goldenapples commented 7 years ago

Oh, I didn't look closely enough, and there's already a PR open that tackles Instagram embeds in a different way: #164.

I think this is a simpler approach overall and follows the format of the rest of our shortcodes, embedding them as iframes where possible for isolation. But there's a lot of value to fetching and caching oembed responses, so I'll take a look at that PR.

goldenapples commented 7 years ago

I'd love to get thoughts on this as an approach to handling responsive embeds that have a fixed component. It works pretty well for Instagram, because all Instagram embeds have a fixed height for the header and footer elements, and then the image has to scale responsively with the embed width.

Short of either (a) rendering these embeds directly into the content rather than using the iframe embed code, or (b) setting up some postmessaging to resize the iframes to fit, this seems like the best approach here.