Tag: embed

Embed a gist in WordPress

Mostly I don’t mind the WordPress Gutenberg editor, but this was a real pain in the ass.

First, you need a new “block.” It needs to be a regular paragraph block, NOT a code block. Code blocks are for writing code.

Then you need to turn on “Add Custom HTML” for that block.

Screenshot of WP Custom HTML option

Then you take the embed code from your gist (see image below), including the script tags, and paste it. There is no WordPress embed option for gists. Do not waste your time Googling for how to embed a gist, as I did.

Screenshot of gist embed box at top of gist page

Now you’ll have a proper gist embed in your WordPress post.

Clarification: It’s not a pain in the ass once you know this is the way to do it. It’s a pain in the ass to figure it out because (a) it doesn’t work like other WordPress embeds in Gutenberg, and (b) there are a bunch of incorrect post about how to do it, including one at WordPress Support.

Exporting from Bokeh

Bokeh is a Python library for creating interactive data visualizations. I just started learning about it, and I immediately wanted to export either static images or HTML/JavaScript — or both! However, at first it seemed I would need to install extra libraries to make it happen.

Persistently, I kept searching, and I found that there are export options that do not require any extra libraries. Hooray!

So say you have already created and displayed a chart assigned to the variable chart1, using a Jupyter Notebook. This is all you’ll need to export a complete, fully functioning HTML file with included JavaScript:

Lordy, it was torture to embed that freaking gist using the WP Gutenberg editor. New post to follow.

Screenshot of Bokeh Save tool

The default toolset in Bokeh includes a “Save” icon. This outputs a PNG image of the chart.

Responsive YouTube embeds

  1. Embed YouTube video in an iframe.
  2. Place the iframe in a container div.
  3. Give the iframe position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  4. The container gets position: relative; and its ::before pseudo-element is: content: ""; display: block; padding-bottom: n% where n is the ratio of height to width multiplied by 100. So a 16:9 video should be given a bottom padding of 9 / 16 * 100, or 56.25%.

This solution was provided by Thomas Wilburn in the News Nerdery Slack, and it can be coded auto-magically for you here.

css.php