Fix height calculations for Instagram responsive embeds #195
Conversation
Because from iframes, like Instagram embeds, have a non-responsive element (header + footer) as well as the responsive part (the image), it would be helpful to be able to specify the two separately. This adds an additional data-element (data-height-adjust) which can be specified on the .shortcake-bakery-responsive element. If this is set, that portion of the height will be considered "static" and will not be recalculated on resize.
Try to match the padding from the wrapper div in the initial embed code, and use it to set the "ratio" on the shortcode. Leaves the "ratio" argument out if it's 100%.
Satisfies minimum requirements for wp-coding-standards @Dev-Master.
goldenapples
changed the title
|
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. |
Mostly whitespace cleanup and the like...
tfw phpcs has two conflicting rules applied to one line...
|
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. |
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.)