Panopoly Media: A Jumpstart to Media Rich Drupal

but out with me in a jump-start

media-rich drupal so with interpolates

media is a part of core it has been a

part of core for quite some time mouth

and methimazole this past week bro

released so now it's official thing you

know people have been using it for quite

some time

initiatives going on for years I'm

trying to standardize on a basic way to

handle media and Drupal and what more my

websites are using media feels like

every Drupal 8 like that I've worked on

has used media to some extent so this is

the solution that we've come to so this

is me everybody here knows you pretty

much but developer do a lot of

consulting work for our various

companies area recently and I'm joined

with my gut wizard we're working on a

platform where we use this cannot we

need

like this and finally on the various

Drupal and social media site so Konami

is a widely used Drupal distribution

primarily it's been the second

functionality it's being reported to

Drupal 8 so there's the things that are

quite ready yet there's a particularly

the layout aspect of it using panels or

layout there's some things that I'm

going to cite it there but the general

strategy in the meantime is to get a set

of useful sub modules that ship with it

media module they'll show you here today

is one of those things

you

so the objectives for this presentation

is going to show you how to use

polimedia to get a working solution how

to understand the basic way Drupal's

dealing with media give you a landscape

of what's going on trim the various

modules to help deal with media and then

how we can use kenapa media and then

customize it from there to suit the

needs of particular projects so we're

talking about four does open aqua media

gives us a demo and had some time for a

Q&A afterwards also feel free to jump in

and get any questions of them talking

about doesn't seem right or not specific

enough what that means discuss it we're

all friends right

okay so the primary use cases of media

and people we want to give our editors

way to create various media assets that

we use throughout the site we also want

a library of these assets that we can

manage and then reuse throughout content

the way we're going to use this in the

content is to feel like memory reference

fields that we're going to reference

that meeting entities as well as the

ability to embed them into WYSIWYG and

then the last part is actually

delivering our media to the end user

so these media are you referring to

videos and photos or is it more than

that I mean it can be anything really

the sort of the core ships with files

and images and I'll we're going to show

you in the distribution here is the

ability to use a better video also so

that's going to be YouTube and Vimeo

type videos and theory of use all sorts

of other

me and anything you can throw feel the

Swedish could be delivered so the

Kourtney basically just gives us media

entities just standard Drupal entities

just like any other Eckstein but feels

on just like any other fields on any

other entities so the media comes with a

name and it comes with some type of

source field we've got the ability to

put additional fields on it and also the

media functionality there's using entity

functionality we get few modes for

rendering it as well as form modes form

displays for editing it and created and

then the one kind of extra piece of

functionality that media has in motion

of source plugins so this is one of the

fields on the media entity itself

designated as a source field for

instance on the image media entity

there's an image field which then we can

use as the media itself for instance

this image field has dimensions they get

resolution and any other information is

included with it we can then use as

additional field data or as as needed

[Music]

alright so the core functionality in

terms of actually managing the media

data is fairly good but the part that's

not so great about it is the user

experience so what we get here is have a

box core experience we've got the

standard density form for creating

editing media it's just like any other

NC form and then the way this would

normally get utilized is with an ante

reference field and what's not so great

here is so this is our Andy reference

field of note we've essentially got a

two step process we would have to go

back end create our media and then come

in to our node that we're correcting and

reference it via RFC reference field

this is functional but it's not ideal

for a couple reasons one was a two step

process and two is when we're actually

using it and our field here this is just

really not useful it's not helpful it's

going to be difficult for editors to be

able to find they're looking for

[Music]

the whole thing Court does give us this

very useful as the media library so all

of our existing media is available view

manage it

editing creating stuff once again it's

not super useful in terms of creating

content one thing that Court does do

well is the rendering of content so it's

this media and I've seen the media

itself as a field so all of the standard

entity field rendering applies we can

deliver to the user that fairly

seamlessly in terms of general so once

again we're good to be able to the

ability to create media assets although

it's not great because that two-step

process we just discussed we've got the

library existing media which is

functional it's just not useful to

editors in the context of creating

content so that's any reference field it

doesn't give us the ability to use this

in the WYSIWYG at all it does give us

the ability to render it to the

end-users

so in terms of solutions on how to

handle this the seven way of handling

this was just to put fields on our

content right and ooh sorry but our node

has a image we would put an image field

on it can we use that the main

limitation is we can't use additional

attributes from that image for much of

anything you don't have the ability to

reuse it either so if two nodes use the

same image we end up creating the same

image twice I mean just our problem with

nobody who's durable 70

[Music]

you know the another option is to do it

yourself and there's be amazing maze of

media and Drupal where do we start and

then with the canonical media we're

going to give you a starting point so

essentially a outbox working solution

for the files image type media and then

the embed the video like I discussed

we've got this reusable media library is

also in the context of creating content

so we can select our media while we're

working with the nodes and you can

easily create and selecting during the

creation we can get it into the WYSIWYG

so there's a lot of different options in

terms of arranging your content so

sudden panels people using paragraphs

lots of different things for dealing

with the layouts this will actually let

us keep our main content like a body

field for instance and click media right

side and then this is just a starting

point and always make changes to it suit

forever subscribe

[Music]

any question

alright so the canopic media itself once

again it's just a module so Saddam

drupal.org it's part of the canonically

distribution that can be used

independently monopoly

it contains mostly just configuration

BMO files for figuration for your site

we would install the module

configuration into play it's got some

dependencies for other contributorily

that give you this functionality and

then there's a bit of custom glue code

just some minor alterations to a few

things and just makes it a better

experience

so the configuration that comes with

come out with media once again we've got

our media entities fields new mobile

displays so we take the four commedia

types we add video type and when we make

some adjustments to the court action

well come with some browser

configuration we'll see that's what

we're gonna use to create and select our

media and then also the entity WYSIWYG

so this is the entity browser what

you're seeing from is actually many

browser gives us this modal so this is a

field women that would be used on a node

for instance so the field widgets when

you go to enter in your entity reference

value instead of doing an autocomplete

or checkboxes or whatever the widget you

may have there's alternative widget

which is the same browser opens in a

mobile there are some other options on

how to it doesn't have to be a more

convenient and page for instance then

the media NC browser provides a Hugh and

some minor tweaks that go along with

that in terms of selecting your media so

this this image right here is the one

we've selected for instance and this

makes a nicer experience

so the NC browser also provides the

ability to create media from within this

model so we've got this is the dropzone

j/s widget drop zone as a well-known

JavaScript library for uploading media

images mostly and from there you

actually can drag files right in the box

or you can select them to be normal

dialog and it will show up here you've

got the ability that edits and feels on

and would not create it right in this

modal and selected for use to populate

your reference field some additional

stuff that's included here is the video

on that field that's what we're using to

integrate the YouTube Vimeo so the line

you take URL I reference a video on

YouTube or Vimeo duple then treat it as

media there's some module that provides

the source functionality not media also

utilizes monopoly images which has a

standard set of presets that are used

throughout media handling for instance

the preview you upload an image and get

it in here the dropzone upload you have

the ability to see that the preview of

thumbnail

in there and then the binoculars Ely is

not technically a dependency canonical

media but that's the actual WYSIWYG

embedded functionality that also makes

diplomat media usage useful so not

technically dependency with it's got

configuration that sets up your text

formats and your ckeditor to have once

again just to get this going

just a module fold on Drupal a Borg just

get it installed like a normal modules

got appendices that will have to be met

we use a composer based installation it

will pull that it for you otherwise you

have to click up open yourself to go

along with this and then it technique

configuration of

[Music]

all right so who's ready for demo

all right so to start off are there any

requests

just do the media do you need okay so we

saw the media library on one of the

slides earlier so if we jump into our

content administration screen you'll

notice there is a as soon as it's done

here

[Music]

our caches are clear

[Music]

all right so what is it going anybody

have any questions away I think we've

discussed Eric I'm just curious how this

not only to be compared

I'm not used lightning you used a day so

they were doing media before the core

media stuff was there I don't know if

they've transitioned to the core media

now but I imagine it's very very similar

so though the Lightning media in Drupal

so I'd imagine that Drupal 8 was similar

at this point I'm not sure

thank you thank you my friend I know I

just walked through this this is a

little bit is

so Eric I know we're discussing now some

media a little bit earlier today about

non core media or media 1.0 I'm not sure

exactly what right terminology is to go

but this is essentially just a core

media based solution it's if you want to

use this you have to be a Drupal 8

before or iron

[Music]

mommy

[Music]

oops

[Music]

[Music]

[Music]

there perhaps another environment just

as soon as we're back and give up on

this one here goes so the media library

once again what we saw earlier is under

the content administration menu media

got some various pieces of media

existing media in here videos files

images

[Music]

got the ability to come in here and edit

these this is a video typing idiot ass

got the name it's got a through RL to

the media description the kunafa media

comes with tags also to tag media we'd

like to utilize that functionality

system here we can actually come in and

create some content you can see this in

an actual

so we were to create a news post

[Music]

right in here we can add a featured

image so this is our entity browser

functionality we've got this view let's

here to select our existing media we've

got the ability to upload images here

this is our drop zone plugin select a

new piece of media and actually create

thanks to krumitz so we drag it in there

and here it filled out our form with the

name we can add alt text and force to

add alt text same type of information

that you see on the media page this

particular form can be customized you

wanted to pare it down a little bit so

there's not so much for editors there

yes that's correct so I mean it's all

just the standard media entity type

stuff you can go in through the admin

screens and just the form just the field

it's just how it renders everything like

that but you don't have to if it this

stage this is just installed you have

some media without any other

configuration that's correct so this is

literally just a fresh install of Drupal

site with the knobbly media installed on

top of it

[Music]

so let our alt text select our media

we'll see it populates into featured

image field

and we can finish creating our games

you can see here's our newly created

node featured image so this is once

again just standard field rendering

there's a little crazy looking just that

dimensions of this image but you can use

image styles to format it however you

desire one of the big things we are

discussing little bit earlier it was the

WYSIWYG embedding so we'll come in here

we'll hit this I'll show you how that

works this would be once again the

WYSIWYG it's not technically included in

this you'll have to setup your input

format and your CK editor to use the

embedded widget so here this is

implemented this image icon you see we

can use this existing media just like

the other one or we can use images files

or videos here as well one thing that's

probably kind of common is putting

videos inside of your content

[Music]

[Music]

so we've got the video entity in there

now this dialogue actually gives us a

few options to do more things with it we

can align it and give it a caption -

I'll just leave it at none for now and

more little better and everybody is a

little blown out for this field you can

see we've got the YouTube video embedded

right in the WYSIWYG what about doing

media files like mp3 so that's

definitely doable maybe most people

choose not to host things like that on

the Drupal site just for dealing with

large file sizes and streaming and

things like that

but it is doable and I know there's a

video there's a monologue that provides

a video source plugin for the media to

where you can upload a video file and it

will treat it as a locally hosted file

it immediately device so so it's videos

just like these videos except though

it's a file upload to the site they'll

be done outside right context such as

this you'd probably just want to install

that model that has that source you need

to set up the media entity itself and

then get it configured to work with Andy

browser where you use it in the context

of a student-athlete

handle or so just all the steps of your

snack talk through or like that's

automatically media really save you it

has all that already done for these

preset we can also see that once we save

the content the videos displayed right

in the content we haven't done anything

really to address the video itself

that's all part of the video embed field

module that has the field formatter that

displays the videos and a playable

format which I field formatter half size

size

settings you know I'm not positive

exactly what it has but feel for minors

are probably one of my favorite things

to write alright any any questions about

the demo anything else would like to see

what they're missing anything awesome

you're gonna show the IPTC stuff I

certainly can

well one thing we just developed into

this was the ability to extract some

metadata from the image itself the

format most people are probably familiar

with EXIF formats that's actually more

like technical information with photo

generally with the IPTC stuff we build a

solution for IPTC is more like human

information like a headline and

description title things like that so we

had a client that needed that done so we

built it into paneling media so out of

box you'll get that as well I'm going to

show you an example of that and just to

make this a little simpler I'm gonna

come into

[Music]

so they're just right into the ad screen

that have form for image media and let

me find the right file please don't be

anything embarrassing all right so this

is one of the files that has some date

on it so we can see we upload the image

file right off the bat it fills in the

name of a media entity the alt text and

additionally description that's all

information that was embedded literally

in the image file what the jpg file and

then the the Jane exosome was IPTC

that's the name of the standard or

protocol for a way understand the

photographers themselves enter it

through the camera some mechanism and

then take the pictures

yes it would not so that's a feature and

a limitation so if you like it if I were

to remove this image and upload a new

image that had data as well

the existing data would stay it was

essentially just a one shot in this

implementation if you wanted to out of a

fresh image with its own data pulled in

just to get a clear form and do the

upload

[Music]

all right yes

right now it's not really utilized at

all but in your implementation however

you render the media itself so it's an

entity with the fields and this is just

the field on the entity so if you've

when you embed it if you choose to use a

different display mode with it that has

the description with it also than that

show

captioning file

there's not okay that's next slide you

know I think like if you were uploading

it to YouTube that's where you would put

the you would give them the closed

captioning file and from the Drupal

perspective you're just embedding the

YouTube video you'd like you're thinking

about putting the transcript in the

description field kind of thing

never defections it becomes a closed

captioning option for the user

[Music]

it's also hearing issues that cannot

convenience

I don't know

yeah like cannot believe me there just

doesn't bedded video so you would be

uploading that to female or YouTube if

you were doing like a raw video file

that I don't know Drupal things like

that in some way or another I'm sure it

could support it

whether that already exists or how much

effort it would take to do that

can't careless a and so I just did this

works hand in hand with monopoly we said

that it's not dependent right it's not a

family at all I mean Dave's our family

experts

he's a formula a number of sites use all

sorts of these little sub modules of

kenapa leading without using the

distribution at all

[Music]

and it's Drupal 8 only do like a for not

okay

[Music]

right

it'll be worth showing that image

gallery well description field I don't

know do we do want to pull up an

existing user they cool with that I

think okay so I'm so they've just

suggested that we pull up some image

gallery functionality this is build as

part of the platform around earthen my

graph wizard has been working on but

we've got a client that's presenting

this media in an image gallery so they

there we will actually see description

as being used

[Music]

so you see they have an image gallery

and we can click into its and there are

a number of galleries here each one of

these is a gallery

it's a node a gallery type and then it's

it references these various pieces of

image media so here we can see this is a

this is the Fremantle women versus GWS

women's gallery node and then there are

a number of images attached to it

Fremantle vers GWS is the name of the

image media and steam and then we can

see it's got the description field down

below on it as well

and it's got an amazing color box

functionality I think that comes from

the description to the text I think

that's right so this is just an example

of how this media could be used outside

of just the stock standard Drupal

formatting that we saw on the

but dem all be empty safe

[Music]

all right

I noticed that when you were uploading

images there was a caption field on the

media if you filled in the caption and

you built in the description while

displaying it would you

a chance to decide which to display in

your view or with one override yeah

thank you

let me pull that up or do that wasn't

I'm sorry I believe what you're

referencing was when we embedded it into

the WYSIWYG images big or whatever

because people in that

[Music]

to make she added a video I'm not sure

how panels caption in that sense I'm

good it's more tend to be used for

images I think it was we were actually

creating logo okay remove this one we

can create it

[Music]

we've got the existing version or we

could select we're not presented with

that edit form at that time so what was

new one now you could edit the media

this will not validate that body field

condition to that there's a caption

that's utilized when you embed it in the

WYSIWYG so separate from the description

field on the image media there's a

caption field so it essentially get M

embedded with it

go sanic see we upload an image

[Music]

it's got the description field

doesn't want to do much for us in this

context if we go in here to the body

field

[Music]

please

sweetie cuts better image here and we

can select it we could choose to left

alignment for instance and here we could

add caption and this is just essentially

I'm a rapper and it is sent with with

the image media when it gets rendered in

in the body field

this is our main image and then down

below here you see

caption before the image

[Music]

[Music]

so we can see the caption that we typed

in just for that in bed

[Music]

good luck with the layout it's

all right so once again this is the kind

of singer solution that we're moving

forward with in terms of panoply one of

the sub modules it's kind of wrapped up

ready to go while the rest of monopolies

look I'm on hold

I'm a police whether used we'll see how

it gets you some drew blades these sub

modules I definitely fully functional

though and could be used so right along

with it

Dave and I definitely believe in this so

we're using it around earth platform so

it's got various pieces of media

handling built into its site we looked

at a little bit earlier with the

Australian football uses this that's

we've got a handful customers already

using this and then we plants are taking

out a fairly large scale with customers

using it a little ways down the road so

this is the media solution we've settled

on and should be fairly useful for

pretty much all pieces

and then that is it kind of a lot of

good questions interaction anybody's

still have any the routers platform the

round earth platform is a Drupal 8 City

CRM solution aimed for nonprofits I

think that what they mean for nonprofits

so right now it's a distribution we've

got a number of clients already on its

down the road we're trying to turn it

into a solution where I suppose come in

I spent their own utilize it oh there's

a talk tomorrow morning about Cindy CRM

in Drupal 8

they've Davis Davis driving the car me

and Elliot are riding shotgun and so

there's no be more information about the

city and blade and our rounders platform

so you're surrounded and faceless City

Sarah well it's it's based on Drupal 8

City CRM in Drupal 8 or not we think

it's it's pretty much the first and only

instance of it it's alright uh no that's

not true anymore they've been a couple

more we I think we probably launched the

first drupelets of his harem sites but

there's been a couple more now

no problem all right thanks