Hello Forem Creators!
It excites me to announce a significant improvement to how rich content (such as Tweets and Youtube videos) are embedded in Forem posts and comments.🎉
Now, you need just the embed keyword and the complete URL of the resource:
{% embed https://... %}
Prior to this change, rich content was embedded using keywords specific to the type of embed being created. For example, to embed a GitHub repository, you would use the github keyword and the slug to the repository:
{% github forem/forem %}
With our new approach, all you need is the complete URL to the repository:
{% embed https://github.com/forem/forem %}
Our Editor's Guide contains a list of supported content types. Note that embeds that were created using the former approach will still work for now. Eventually, the former approach will be deprecated.
Do jump in and try this new rich-content embed approach out! Please report any bugs you may encounter - thanks!
Top comments (13)
Looks like the Editor's Guide is updated on DEV, but not yet on Forem.dev? This is a great update, thanks for making things simpler!
Thanks for catching this Andy. I believe the changes will be pushed to Forem fleet tomorrow (Thursday). Correct me if I'm wrong @andy. 🙏
This is really exciting! My brain thanks everyone who worked on bringing this feature to life. It will be much easier to remember how to embed rich content now.
@msarit what will be the process of proposing the addition of new content types moving forward? I'd love to see support for websites like Bandcamp and a few others.
And just for fun, here is a soundcloud embed featuring one of my favorite songs from J.Cole 🥳
I should ask, what does everyone think about also including the rich content embed as a button inside the markdown toolbar? I feel like users who have never used markdown before would find that useful. However it might become confusing with the code + code block options that already exist within the markdown toolbar.
@ildi YES! on the embed button on the markdown toolbar. It was in my original list of dreams for the markdown toolbar but got cut because we had this had this project queued up as a predecessor. (I am often at war with myself, the banes of Product Owner life). I'm captured this as a GitHub discussion.
Re: other embed options
Stay tuned. I know that right now @msarit is working on Loom. But both this new structure and the work she has done to document all this should make it easier for us to say yes to more embeds moving forward. With the old liquid tag structure it each additional tag was creating a burden for our team.
Maybe there should be a post on here or github where everyone can send their requests for which embed options they would like to see added. Would also be nice to get an idea of which requests are the most popular from both Forem admins + users. But im glad that adding new embed options is much less of a burden now.
Most interent users have become conditioned and expect that they should be able to embed anything that they can get an embed code for. When I've encountered a platform that doesn't support all embed code, I wonder why and then just avoid using that platfrom or tool. Im not sure if others also feel the same way. It could also be that I've mostly become accustomed to working with Wordpress, so I just expect all embed code scripts to work.
I also strongly believe that a new user who joins a Forem should be able to quickly understand how they can embed a YouTube video when they go to compose their first post. If they get confused and dont see the option right in front of them, then we've lost, they might just give up and never attempt to post again. I got feedback like this when I first launched my own Forem, and I even discovered that users were not willing to bring it up to me, so it was a problem that they encourtered and instead of asking for help they just avoided posting all together. And of course we do have instructions on how users can achieve that, but for most users, they expect embeding to work the same as it does across the web and are not likely to put effort into learning a new way of doing the same thing. If anything they just assume that the option doesnt exist and move on. I know for a community like Dev whose main audience is developers, this might not be an issue since those users are familiar with markdown.
So we have two improvements we are working on right now and then, yes, I would totally be interested in opening up the discussion (@ellativity let's remember this in the future, eh?)
The first is adding a embed "fallback" to Open Graph / Twitter Card. This should hit a lot of URLs that will be awesome and make it more seamless for users (instead of having to reference a guide to what's supported).
The other is adding the "embed" link to the markdown tool bar just like the "link" we do now. Then we will add the markdown tool bar to comments. (I can't wait!)
Does that answer your thoughts Ildi?
Yes it does and thank you @jennieocken 😀
Toolbar in comments will be so welcomed!
Thanks for taking on this huge task, @msarit! This is going to be a big improvement to user experience across a wide range of Forems!
Any plans to add embeds for Forem post series? Where is the best place to add a feature request for that?
(The “where is the best place” question is honestly one I’d love to understand the answer to - y’all have forem.dev, and GH Issues, and GH Discussions, so I’m sometimes not quite sure how best to share ideas)
The best place to add a request is Github discussions. Issue are just for improvements we are actively working on and bug reports (note: we are cleaning up a lot of old issues so we are not actively working on 300+ items right now). Forem.dev is for talking about how to use Forem. Though of course great ideas, like this, come up in the comments frequently.
And I think that is an awesome idea.
This is great!!