The next generation embedding with Entity embed – Janez Urevc (@slashrsm) – What is in Drupal 8

View Github Repository Open presentation in a new window

slashrsm

See all presentation from slashrsm

The next generation embedding with Entity embed – Janez Urevc (@slashrsm) – What is in Drupal 8

0 0

entity-embed-session

Session about Entity embed.

On Github slashrsm / entity-embed-session

The next generation embedding with Entity embed

Janez Urevc / @slashrsm / http://janezurevc.name

slashrsm.github.io/entity-embed-session

Janez Urevc (@slashrsm)

  • senior engineer and team lead at MD Systems
  • Active member of Drupal community since 2009
  • Lead of the D8 media initiative
  • ex Examiner.com

Biggest company contributor

Source: drupal.org/drupal-services

http://www.md-systems.ch/en

  • top 5 D8 ind. contrib.
  • D8 expert
  • D8 media expert (NP8)

Remote: Office not required

I am always happy to help!

Contents of the session

  • What we learned from Drupal 7?
  • What we have in Drupal 8 core?
  • Idea behind Entity embed
  • Architecture and patterns
  • Configuration
  • Entity browser integration
  • Roadmap

Drupal 7

  • Lots of WWYSIWYG editors
  • Each module implements embedding from scratch
  • There is no perfect implementation

What is in Drupal 8

CKEditor + Basic image upload

Your web browser doesn't support playing this WebM screencast.

Pros

  • Way better than D7
  • Ability to align
  • Ability to add captions
  • File usage tracking
  • Leads the way for D8

Cons

  • Can only embed self-hosted images
  • No way to embed 3rd party images
  • No way to embed other rich media
  • No way to embed non-media
  • Little control over display

Anyone ever seen something like this?

Source: www.theguardian.com

  • In Drupal => node rendered as a teaser (or "inline teaser"?)

Or this? Anyone?

Source: www.nytimes.com

  • In Drupal => media entity rendered as a teaser

Entity embed

  • drupal.org/project/entity_embed
  • Officially born at NYC Camp 2 years ago
  • Build on top of core's approach (uses same principles)
  • Embed anything
  • YouTube video (Media entity)

Entity embed (cont'd)

  • Self-hosted video (Media or File entity)
  • Related article (Node)
  • List of related articles (Taxonomy)
  • Related product (Commerce product)
  • Discussion thread (Comment)
  • You name it ....

Architeture

3 levels:

  • WYSIWYG integration
  • storage
  • display

Architecture: WYSIWYG

  • "Embed button" is a config entity
  • Not coupled to entities - as we will see later.
  • Works through plugins

Architecture: WYSIWYG

Works through Embed module

  • Not coupled to entities - as we will see later.
  • Works through plugins
  • You can generally embed whatever you'd like

Architecture: storage

Custom HTML tag

  • Custom tag with data-attributes

Architecture: display

Text filters

  • Converted to rendered representation of the entity on view - text filter

Displaying of entities

We are re-using Entity reference field formatters.

Display: rendered entity

Display: field formatters

  • Any formatter that you enable/code should work with EE

DEMO

Fresh install Enable EE Add icon to the button Configure filter Create 2 child nodes: one Page and one Article Create host node: embed page (use float) show how it looks embedded Try to quick edit it Create host node: embed article show how it looks embedded, show comments

Entity browser integration

drupal.org/project/entity_browser

Entity browser integration

Entity browser is powerful but complex tool. Best to initially try it with File entity browser module.

It can make Entity embed's selection part way nicer.

File entity browser

drupal.org/project/file_browser

DEMO

Enable file_browser Show button config add button to the WYSIWYG editor embed by uploading float caption embed by selecting

Roadmap

beta release hopefully this week (1 beta blocker - almost there)

You can already use it!

Get involved!

drupal.org/project/entity_embed

github.com/drupal-media/entity_embed

#drupal-media @ Freenode.net

There is more!

  • Remember Embed module?

URL Embed

Status: Basic functionality

drupal.org/project/url_embed

Allows embedding of URLs using the WYSIWYG or link fields.

<a href="https://www.youtube.com/watch?v=DnpO_RTSNmQ" data-embed-display="html"></a>
  • Example of another embed plugin.

Another DEMO!

Enable url_embed Show button config Add button to the WYSIWYG editor Embed a YT video (https://www.youtube.com/watch?v=DnpO_RTSNmQ) float caption embed by selecting

Thank you! Questions?

Janez Urevc / @slashrsm / http://janezurevc.name

slashrsm.github.io/entity-embed-session

The next generation embedding with Entity embed Janez Urevc / @slashrsm / http://janezurevc.name slashrsm.github.io/entity-embed-session