More flexible embeds

#1

:newspaper: 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.

You can generate an embed from Share → Embed Project

42%20PM
Screen Shot 2018-02-13 at 3.08.42 PM.png1756x856 126 KB

  • ^ horizontal split view (becomes vertical on small screens)
  • header-less design is more space efficient, less noisy

Hot new querystring customizations :fire::

  • 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.

#2

Thanks for the update, @pketh!

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.

#3

Yup, you can force the vertical layout by constraining the width of a container wrapping the embed to 580px.

#4

Ah, sorry I meant like with a query param, like layout=vertical or something. It’d be nice to have manual control over that.

#5

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

#6

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!)

#7

Jumping in the discussion

I might want to only share the App, not the Code panel, is this doable?

Also, can I choose which file is shown by default?

#8

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.

#9

No, not at the moment. I guess for now you can just use an iframe and the app’s publish URL if the platform you’re embedding on supports it.

Yes, whatever file you select in the filetree in the preview when defining the embed is the default selected file when displaying the embed.

#10

Works great :slight_smile: Thanks very much!

#11

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.

#12

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.

#13

we’re making some updates now so i’ll look into seeing whether we can do that

#14

Fantastic, thank you!

#15

@pketh

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.

Thanks

#16

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.

#17

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).