We have moved to GitHub Issues
You are viewing the read-only archive of Umbraco's issue tracker. To create new issues, please head over to GitHub Issues.
Make sure to read the blog posts announcing the move for more information.
Created by David Dimmer 22 Jun 2016, 18:04:29 Updated by Mark Catalano 20 Jan 2017, 16:27:02
Tags: Unscheduled Gold partnerRelates 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
Two ways to solve this:
We tried that. The blockquote must be getting altered.
Tried what? I just tried adding this to my
and it works fine afterwards?Make sure you're tinyMce.config is the same as the one we ship with in Umbraco 7.4!
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.
@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.
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.
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..
@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.
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;
}
}
}
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: