Issues embedding Github gists *and* other media via rich text (custom code)

Design help Custom code
1

In order to be able to (nicely) embed various types of media via CMS (mainly Instagram and Twitter) I followed this tutorial (via samliew).

<script>
Webflow.push(function() {
  $('.w-richtext p').html(function() {
    return $(this).html().indexOf('&lt;') == 0 && $(this).html().match(/&gt;$/) != null ? $(this).text() : $(this).html();
  });
});
</script>

It works great, and renders much more nicely than using the “native” Webflow embed feature. But for some reason doesn’t work specifically for Github Gists, which is used frequently on a client blog I am working on. So I went ahead and followed this tutorial (via oyemike) specifically for Gists.

<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js"></script>

<script>
// define the load gist function
var loadGist = function(elem) {
    var gistUrl = $(elem).text().match(/\bhttps?:\/\/\S+(.js)/gi);
    if (typeof gistUrl === 'undefined' || gistUrl === null || gistUrl.length == 0) 
        return;
    // load gist
    $(elem).show();
    $(elem).empty();
    postscribe(elem, '<script src=' + gistUrl+ '><\/script>');
    };

var gists = $('p:contains("CODE:")');
gists.hide();
gists.toArray().forEach(loadGist);
</script>

Which also works great, however for some reason the Gists are rendering twice, assumably something to do with the two pieces of custom code working together?

36%20pm
36%20pm1654×1116 141 KB

Would someone be able to help me in fixing this issue? Perhaps there’s a way to combine the two custom code pieces? Any help would be greatly appreciated.

Public share link
Live Preview

2

Update: After a bit of trial and error, I managed to fix the issue by keeping the Github Gists custom code in the global custom code section, but moving the other custom code (for general embeds) in to the page-specific custom code section (both in the footer part). Maybe this has something to do with the order in which the code is read by web browsers?

Honestly I don’t know enough to really know how it fixed the issue, or how “stable” the fix is, so for now I will just keep my eye on it.

2 Likes
3

Congrats @caicardenas for figuring out your own issue. Most cant say the say I give you two :+1: :+1: on finding your way, even if it is temporary!

Happy Designing,
Brandon

1 Like
4

Unfortunately after more editing of the site in general, the duplicated Gists issue is coming back. It seems to be a bit temperamental, sometimes I can remove the custom code, publish, add the custom code back, publish, and it fixes the issue. But then if I make a change (elsewhere on the site) and publish the changes, the issue comes back, even if the I was working on a completely different part of the site.

If anyone with coding knowledge could help that would be awesome!

5

@webdev Jeff, you have any thoughts on helping @caicardenas?

6

I prefer to embed the variable part of the custom code in a CMS item field, then include it. This way I don’t need to force the client to make an external connection (except for the CDN script i use).

This is the approach I use.

1 Like
7

I had a look at the article you sent through Jeff, but unfortunately that approach won’t work for me as this all needs to be controlled in a single rich text element for the client to add/edit blog posts easily.

@samliew I noticed you helped edit the custom code from Ohn originally, perhaps you know a way to combine the two so that gists work (and are not rendered twice on the page)?

8

Also I don’t usually like to rant, but I would like to add that it seems a real shame that we need to find these workarounds anyway. If Webflow’s native embed rendering for Twitter/Instagram etc wasn’t so broken (especially on mobile) I would’t be having these issues in the first place :pensive: I could just use the custom code for Github Gists (which works perfectly on its own) and let Webflow handle the rest. Rant over!

9

Take a look at this post. You could combine the logic.

10

Hey mate will this work for you now? You can now use custom code in rich text elements

11

Yes! I saw the announcement for this while I was away on holiday and haven’t had a chance to test it out yet, but I think this should solve the problem I was facing :slight_smile:

12

Awesome!! Glad it worked out. Love to hear about what you’re up to in QLD, I’ll reach out directly.