Skip to content

Fix traditional Instagram embeds#767

Merged
JohnONolan merged 2 commits into
mainfrom
fix-ig-embed
Mar 12, 2021
Merged

Fix traditional Instagram embeds#767
JohnONolan merged 2 commits into
mainfrom
fix-ig-embed

Conversation

@PaulAdamDavis

@PaulAdamDavis PaulAdamDavis commented Mar 11, 2021

Copy link
Copy Markdown
Member

Now that Ghost doesn't create Instagram embeds itself, users will instead use the embed code Instagram provides, into a HTML card.

This PR adds some highly specific styles that add vertical margins and horizontally centre the iframe that the <script> that the provided embed injects. The injected iframe has inline styles that necessitate the proposed change.

<iframe
    class="instagram-media instagram-media-rendered"
    id="instagram-embed-2"
    style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px;
        border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px;
        min-width: 326px; padding: 0px;" class="instagram-media instagram-media-rendered"
    id="instagram-embed-2"
    src="..."
    allowtransparency="true" 
    allowfullscreen="true"
    frameborder="0"
    height="745"
    data-instgrm-payload-id="instagram-media-payload-2"
    scrolling="no">
</iframe>

Before

Screenshot 2021-03-11 at 20 50 02

Screenshot 2021-03-11 at 20 50 07

After

Screenshot 2021-03-11 at 20 50 43

Screenshot 2021-03-11 at 20 50 49

PaulAdamDavis and others added 2 commits March 11, 2021 20:51
Highly specific styles for traditional Instagram embeds
@JohnONolan JohnONolan merged commit 5f127c3 into main Mar 12, 2021
@JohnONolan JohnONolan deleted the fix-ig-embed branch March 12, 2021 13:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants