Click here to create a new issue on GitHub

U4-8646 - Instagram Embed through RTE fails

Created by David Dimmer 22 Jun 2016, 18:04:29 Updated by Mark Catalano 20 Jan 2017, 16:27:02

Tags: Unscheduled Gold partner

Relates to: U4-8529

Embedding an Instagram Image into the RichTextEditor fails to render correctly.

Sample project: https://www.dropbox.com/s/xcxfacasz03bkbe/U7.5.0-instagram-embed.zip?dl=0

Login: admin Password: 12345678

Macro Works: /instagram-test/embedded-with-macro/

Embed from RTE does not: /instagram-test/embedded-without-macro/

Tested: Umbraco 7.4.2 Umbraco 7.5 beta

The RTE is removing the script code at the bottom of the embed outside the blockquote.

2 Attachments

Comments

Sebastiaan Janssen 23 Jun 2016, 13:44:35

Two ways to solve this:

  1. Allow script tags in your config/tinyMCE.config (validElements) - I don't think I need to explain that that's a bad idea
  2. Include the required script tag in your template where you need to load the instagram pictures:
David Dimmer 23 Jun 2016, 13:53:45

We tried that. The blockquote must be getting altered.
Sebastiaan Janssen 23 Jun 2016, 13:55:07

Tried what? I just tried adding this to my and it works fine afterwards?
Sebastiaan Janssen 23 Jun 2016, 13:55:42

Make sure you're tinyMce.config is the same as the one we ship with in Umbraco 7.4!
Owain Williams 24 Jun 2016, 11:15:26

I've just uploaded the latest tinyMce.config file and then clicked on "embed", pasted the https url and clicked the retrieve button. The image loads the first time but then if I try it again it just hows the empty instagram box. No photo.
Sebastiaan Janssen 24 Jun 2016, 11:22:44

@mantaii What does the network tab of your browser show? Any errors, etc? Note that the <script> tag is coming from Instagram, we just read whatever they give us using their official OEmbed endpoint.
Sebastiaan Janssen 24 Jun 2016, 11:24:32

I would strongly advise against allowing script tags in your rich text editors by the way, there's so many lovely ways that could fail and besides, it's not great to just randomly throw js references in the middle of a page, preferably they should be in the <head> or just before </body>. I'd advice you manually add the required script tag in your template.
Sebastiaan Janssen 24 Jun 2016, 11:41:54

Alright, I now see the problem as well. I'm afraid there's not much we can do about this, the embeds.js that instagram uses to replace their icon with the actual picture is heavily obfuscated and unreadable. Even if we were able to debug it, we can't change it if we find the bug. I'm afraid you're stuck with having no preview in the backoffice most of the time. :/ If anyone has a clever workaround, I'm all ears..
Owain Williams 24 Jun 2016, 11:42:45

@sebastiaan Thanks! I've put the script in to the head of my template and it does seem to fix the problem. Not within the RTE but once the content is published the images are there.

There were no errors in the network tab either.
Sebastiaan Janssen 24 Jun 2016, 12:08:03

Even tried to hack the planet and just replace their background URL, but that doesn't work out too well either, no preview and then the embeds.js doesn't kick in properly any more either

using System.Text.RegularExpressions; using Umbraco.Core;

namespace Umbraco.Web.Media.EmbedProviders { public class OEmbedJson : AbstractOEmbedProvider { public override string GetMarkup(string url, int maxWidth, int maxHeight) { string requestUrl = BuildFullUrl(url, maxWidth, maxHeight);

        var jsonResponse = GetJsonResponse<OEmbedResponse>(requestUrl);
        var html = jsonResponse.GetHtml();
        
        if (jsonResponse.ProviderName.InvariantEquals("Instagram"))
        {
            const string pattern = "(background:url\\(data\\:image\\/png\\;base64\\,)(.*)(\\))";
            html = Regex.Replace(html, pattern, "background:url('" + jsonResponse.ThumbnailUrl + "')");
        }

        return html;
    }
}

}

Mark Catalano 20 Jan 2017, 16:27:02

There is a solution to this issue on stackoverflow see - http://stackoverflow.com/a/27409565/4995729

window.instgrm.Embeds.process()

Priority: Normal

Type: Bug

State: Closed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted:

Affected versions:

Due in version:

Sprint:

Story Points:

Cycle: