Skip to content

Instantly share code, notes, and snippets.

@efc
Created March 7, 2019 20:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save efc/141ddde8b9badb0bc32369de925aed67 to your computer and use it in GitHub Desktop.
Save efc/141ddde8b9badb0bc32369de925aed67 to your computer and use it in GitHub Desktop.
AutoEmbed.rb is a plugin for Jekyll that automatically finds and renders embeds for any "naked URL" on the site.
# AutoEmbed plugin for Jekyll
#
# Created by Eric Celeste for Tenseg LLC
# March 2019
#
# License: MIT
#
# This plugin uses the ruby-oembed library to look up an oembed for
# any "naked URL" (a URL in a paragraph by itself). If the oembed
# is found, then the HTML for the oembed is presented. If there is
# no oembed found, then the URL is simply turned into a link.
#
# For best results, this plugin should be combined with some SCSS
# to improve the visual presentation of the oembeds. This includes
# ensuring that videos are presented with their proper aspect ratio
# and that some links that clutter rich embed results are hidden.
#
# This is the recommended SCSS to accompany this plugin:
#
# .embed-container {
# width: 100%;
# iframe {
# width: 100%;
# }
# &.rich {
# div, blockquote, p {
# display: none;
# }
# }
# &.video {
# display: block;
# position: relative;
# width: 100%;
# height: 0;
# padding-bottom: 51%;
# iframe {
# display: block;
# position: absolute;
# width: 100%;
# height: 100%;
# top: 0;
# left: 0;
# }
# }
# }
# see https://github.com/ruby-oembed/ruby-oembed
require 'oembed'
# register all default oembed providers
::OEmbed::Providers.register_all
# add providers and fallbacks here, if you like
Jekyll::Hooks.register [:pages, :documents], :post_render do |doc|
if (doc.is_a?(Jekyll::Page) || doc.write?) && (doc.output_ext == ".html" || (doc.permalink&.end_with?("/")))
# look for naked URLs wrapped in paragraph tags
doc.output = doc.output.gsub(/<p>(https?:\/\/[\S]+)<\/p>/) do |match|
out = '' # use this variable so we can include debugging info if we wish
begin
# if an oembed is found, then include the embed wrapped in a div
result = ::OEmbed::Providers.get($1)
fields = {
'provider_name' => result.fields['provider_name'],
'title' => result.fields['title'],
'type' => result.fields['type'],
'width' => result.fields['width'],
'height' => result.fields['height'],
}
style = ''
if fields['type'] == 'video'
fields['ratio'] = fields['height'].to_f / fields['width'].to_f * 100
style = "padding-bottom: #{fields['ratio']}%"
end
# out += "<pre>result: #{JSON.pretty_generate(fields)}</pre>"
out += "<div class=\"autoembed embed-container #{result.fields['type']}\" style=\"#{style}\">#{result.html}</div>"
rescue StandardError => e
# if no oembed is found, just turn the naked URL into a link
# out += "<pre>#{e.message} #{e.backtrace.inspect}</pre>"
out += "<p class=\"autoembed no-embed\"><a href='#{$1}'>#{$1}</a></p>"
end
out
end
end
end
@efc
Copy link
Author

efc commented Mar 7, 2019

To install this plugin on a Jekyll site, just put the AutoEmbed.rb file in your _plugins directory. You should also add ruby-oembed to your gems and the recommended styles to your SCSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment