Embed media content in lektor pages?

Question

I am currently using Nikola as page generator.

But depending on the page scope and users, Lektor seems to be easier and more streamlined for the end-user. This fits well for a new page I plan.

Nikola also embedds media (youtube, vimeo, soundcloud, etc.) https://getnikola.com/handbook.html#restructuredtext-extensions

How is such functionality provided by Lektor?

Answer 1

The answer of @A. Jesse is right. Due to maintain simplicity in the core of Lektor, much like Flask, automatic embedding is not done by the "core".

However, in the same spirit of Flask, Lektor is highly extensible. That also applies to its parsing of MarkDown formatted text in the post & rendering the final HTML.

As he already said, you can directly paste the embeddable code in HTML in your otherwise MarkDown texts. And, it will be included as-is in the final HTML.

But, personally I thought that hurts the core intention of MarkDown's simplicity & quick readability.

easy-to-read, easy-to-write plain text format

That why I felt necessity of lektor-embed-x where the writer will just write down the content's link in a seperate paragraph. This small piece of plugin will do the rest to the possible extent. It is basically a glue-library between embedX and Lektor.

• If the content is of a relatively "popular" site, and the link is okay format, related necessary embed-code will be generated and included in the final HTML.
• If not, the link will result in a regular link, i.e. an <a href=... link.

The usage is very simple.

step 1 Add the plugin by: $ cd path/to/lektor/project_folder $ lektor plugins add lektor-embed-x Package lektor-embed-x (0.1.2) was added to the project

That's it. You are ready to go. [as of now, there is no addition configuration.]

Now, on the post you can add the link on a paragraph of its own paragraph, without any special marker or start-flag, in your MarkDown formatted post as below.

contents.lr

title: About this Website
---
body:

This is a website that was made with the Lektor quickstart.

And it does not contain a lot of information.


# **HEADING 1**

## 2nd head

_italic slated text_

~~mess~~

whatever text i need to write.

https://twitter.com/codinghorror/status/686254714938200064

Below is how I can embed in a post.

http://www.youtube.com/watch?v=_lOT2p_FCvA


So, that was what i wanted to say.

---

After generating final HTMLs through Lektor, the above post will generate something like:

NOTE

Please note that this is a very nascent one-man project under active development and just out of pre-alpha phase. Hence, not many providers or link format is there. Yet. But, I hope it will be mature in a short time.

Answer 2

It's not yet provided in Lektor. Typically with Lektor, you write your content in Markdown. You could simply paste the HTML embed code (from YouTube or whichever service) directly into your Markdown. But there is a plugin just released called lektor-embed-x that may do what you want.

Answer 3

If you are ok with using flows you can of course also define flow blocks for your media. That also allows more control via options displayed in the admin. For example a very simple (featureless) youtube flow block could look like this:

flowblocks/youtube.ini:

[block]
name = Youtube
button_label = Youtube Video

[fields.ytid]
label = Video ID
type = string
width = 1/2

templates/blocks/youtube.html:

<iframe width="560" height="315" src="https://www.youtube.com/embed/{{this.ytid}}" frameborder="0" allowfullscreen></iframe>

This defines a new block type named "Youtube Video" with internal name "youtube". The user has to input the youtube video id (the letters/digits after ?v= in the video url) which is then used in the template via the this.ytid reference.

With this technique it's also possible to add lots of more options. An almost full featured example is below.

flowblocks/youtube.ini:

[block]
name = Youtube
button_label = Youtube Video


[fields.ytid]
label = Video ID
type = string
width = 1/2

[fields.size]
label = Video size
type = select
choices = 560x315, 640x360, 853x480, 1280x720
choice_labels = 560 x 315, 640 x 360, 853 x 480, 1280 x 720
default = 560x315
width = 1/2

[fields.rel]
label = Show suggested videos when the video finishes
type = boolean
default = true
width = 1/4

[fields.controls]
label = Show player controls
type = boolean
default = true
width = 1/4

[fields.showinfo]
label = Show video title and player actions
type = boolean
default = true
width = 1/4

[fields.nocookie]
label = Enable privacy-enhanced mode
type = boolean
width = 1/4

templates/blocks/youtube.html:

<iframe width="{{ this.size.split("x")[0] }}" height="{{ this.size.split("x")[1] }}" src="https://www.youtube{{ "-nocookie" if this.nocookie }}.com/embed/{{this.ytid}}?{{ "rel=0&" if not this.rel}}{{ "controls=0&" if not this.controls }}{{ "showinfo=0" if not this.showinfo }}" frameborder="0" allowfullscreen></iframe>

This would then look like this while editing in the admin:

Maybe some smart regular expression could be used to allow the user to paste full youtube urls so they don't need to extract the video id by hand. But i didn't try that yet.