^ horizontal split view (becomes vertical on small screens)
header-less design is more space efficient, less noisy
Hot new querystring customizations :
previewFirst toggle showing the preview window before your code
attributionHidden Hiding attribution for orgs that want to keep things real corporate
sidebarCollapsed The sidebar is open by default now (just like the regular editor), collapsing it in the preview lets it be that way in your embed (nice for single file examples)
embedPreviewSize you can drag to customize the size (width or height) of your preview window. It’s proportional so no matter what you do so it’ll always display properly on all screen sizes.
Glitch embeds now also have Embedly support. So you can embed your project into a blog post by just pasting the editor URL. Further customization can be done with the same url params. (still debugging this so YMMV for a bit)
Also
If you’re currently using an embed in the wild it should continue to work, but I’d recommend creating a new embed code from the editor for the new features.
One question: is there a way to force the vertically-stacked layout? On https://wistia.com/doc/player-api, where we have the Glitch embed in its own third column, it’s not great to have that third column split into further sub-columns.
because the layout is based on css media queries (for performance and maintainability reasons), I don’t think they can be set programmatically. I’ll have to think about that some more
We’re trying to embed into a Medium article so that it looks like the embed in this article of yours https://medium.com/glitch/create-without-limits-art-apps-on-glitch-85973d48b4ba (i.e. the ‘app’ view is visible by default, not ‘code’ or ‘both’). Medium uses Embedly, so doesn’t recognize the longer/formal Embed code you provide. It just wants a plain URL and doesn’t recognize that URL if parameters are added after the root.
What is the appropriate syntax so that the app view loads by default using and Embedly embed? (Thanks in advance!)
Confusingly, for Medium you have to use the project’s edit URL as the base - but the embed url parameters still work. For example, to embed with the app view use https://glitch.com/edit/#!/dx?path=README.md&sidebarCollapsed=true&previewSize=100 switching out the project name for yours.
For anyone having trouble embedding on Medium and just getting a hyperlink, I tried copying and pasting Gareth’s link above and editing my project name in on Medium which didn’t work.
You have to paste in the link with your project name already in it or Medium won’t think it’s an embed.
Is there a way to embed different pages? The Embedly integration only accepts glitch.com/*, and if you specify a ?path=public/other-page.html the code panel changes to other-page.html but the displayed page is always index.html. Would it be possible for the Glitch team to change the app preview to read from the path query param, or (perhaps because that would break previous embeds) add another query param that allows us to change the app preview? Perhaps appPreview?
My use case
I’d like to use a single Glitch project as an example with various demos & make a Medium post to accompany it. To do this cleanly, with various small demos, I’d like to add interactive examples as pages of the Glitch project.
I’d love to be able to (as described above) do https://glitch.com/edit/#!/caff?path=public/other-page.html?appPreview=public/other-page.html in order to embed a new example without making a whole new Glitch project.
Is there a way to add a handle to the embed iframe to allow users to resize the embedded glitch without having to resize the page? Sometimes I would like to allow users to enlarge the embed either because the text is too small for them or because they want to see a large block of code in the glitch without scrolling.
this won’t affect the text size, but when you’re making the embed you can drag the bottom of the embed preview to change the height that they see. Would that address your use case?
Also, if a user on a page uses the browser shortcuts for making the text bigger (eg cmd-+ on a mac), that’ll also make the text in glitch bigger.
I would prefer adding a handle to the bottom right corner so the user can resize it when viewing the glitch rather than me setting dimensions at creation time (we do that already).
@caraya what you’re asking for isn’t a feature that belongs in the Glitch embeds, but that you can build on whatever site you’re embedding it in! You’re probably looking for the resize CSS property—take a look at this little CodePen example I made to see how you can do it too!
Put your Glitch projects everywhere. Stretch and squeeze them to be juuust right. We hope you’ll put them in more places – we know we will.
:
Thanks very much!