 All right, good day everybody and thanks for coming to our session. We are really excited to be here in Drupal Compiana and present our session about media and the media initiative and how it progressed and it will be mainly focused on the site building part. So as you've probably heard, there's a lot of going on around media recently and especially with Drupal Core situation and we're really excited about it. We'd like to start with asking you who has already used media in your new Drupal 8 projects. Can you raise your arms? Wow, that's quite impressive. Were you all satisfied with the progress? How was it? All good? So, so? All right, sure. We strongly believe that media is at the heart of every good website so we all love big images, big sliders, animations, videos, audio files and all these combined together brings a really good use case for the websites and for the life of the website for your end users. A huge, a really huge amount of time was invested in the last years on this topic and finally we have really flexible architecture and a powerful ecosystem for handling media in Drupal 8. In this talk we'd like to show what the fuss is all about and we'll first introduce ourselves. So I'm Sasha Nikolich and this is my co-speaker today, Basha. We both come from Slovenia, which is a really small country just out of Austria, if you don't know it. And now it's not Slovakia, it's Slovenia. And we both work for Amazinglabs Steric. We'd like to start by giving some context about the problems that we were facing in Drupal 7 because we think the media there was frankly bad, quite bad, and how this was addressed in Drupal 8 recently and how the media entity ecosystem brought all this to a whole new level. So basically we'll start from scratch and we'll progress through the examples. We'll first show the media entity and then step by step how we can easily improve the media handling in Drupal 8. We will take a look at a base media module and then what it provides and then we will talk about entity selection with the entity browser. We will focus on the site building part there, how we can properly configure it with all the views and stuff like that. And then we'll introduce Drop Zone JS for the bulk upload of images, which is a really cool feature. We'll explain the embedding functionality with it and finally show two of the main cropping solutions. There will also be some time for the questions at the end. For our presentation and for our demos, we will use these modules here. We expect that everybody here knows how to install and download modules from the Drupal.org and we strongly suggest that you use these modules when working with media in Drupal 8. And of course if you want to extend the functionality just add some more modules on top of that. All right, let's talk about Drupal 7 first. For me personally Drupal 7 was a real struggle when dealing with media and media entities. First of all, it was really badly handled out of the box. So if you ask me, you didn't really get much out of the box from Drupal 7. There were just image fields and file fields and they were not fieldable because they were fields and not entities. And this was really poorly addressed back then. So this also means that we could not add captions, metadata and copyright information, for example. And what is more, we couldn't even reuse images and videos and stuff that we upload. But of course, have no fear and contrib is here because of the Drupal 7 architecture. So the thing is that we have a really small core and more modules around it. So we as a really good Drupal community, we started building modules on top of Drupal core. And of course that's how the struggle continued because the main functionality just switched from core to contract modules and everybody was implementing their own custom features and functionality. So for example, we had the media module or the media OMBAT for remote resources. We had the media CK editor. We had the entity OMBAT. But it was okay because of course the modular architecture that we had at that time. Of course, we still have it though. Yeah, the main module that we were we were all using, it was the media entity, the media module. And other than that, we also had SCALD for example, which was a really new take on managing media in Drupal 7. Basically it was an extension of the WCVIC editor of the CK editor where you could click, drag and drop their so-called items which were their definition of an entity into the editor and it was highly recommended by the community. I didn't try it but yeah. And of course everybody knows probably IMCE. This is a simple image file uploader that lets you browse folders inside the Drupal's file directory. And if you know its limitations, it's quite good, but frankly I think it was brought in Drupal 7 around 2006 and for me it just looks something like brought in from DUMLA. But then the time came for Drupal 7 to move along and a couple of years ago Drupal 8 was introduced and we finally addressed the media topic in Drupal 8. And today we'll tell us more about the media initiative, how it came along and the new ecosystem that we are using now and what's new in Drupal 8 today. So yeah, after a really long development cycle and getting off the island and everything, this is what the editor experience looks like out of the box with the standard profile installed. So we are now adding an article, we can attach an image, add some alt text and then we can see how we can embed a simple image to the content of the post. We can set the alternative text and the alignment and also the caption. And yeah, that's practically it. After that if we save the post we can also go to the content and files where we can see a basic file listing of the used files with usage information. So are you impressed as this guy or a little bit disappointed like Mr. Downey here? So the situation with Drupal 8 out of the box was practically the same as in Drupal 7. It is true that we got CK editor and in-line editing but as far as media handling goes, we were at the same point. We are still limited to files, we cannot add metadata, we can only reference local files and no remote sources, we cannot reuse files meaning if you want to reuse an image you have to upload it twice and that's not really good. But plans to change that were underway well before Drupal 8 was released. At Drupal Comprague in 2013 Jan Azur Outs held a conversation titled let's fix file and media handling once and for all. And the ideas discussed their contraction and next year at New York camp 2014 a group of people got together and that's how the media initiative was formed. Their goal was to address all the shortcomings of Drupal core. So adding the ability to reuse content, adding the ability to reference remote sources, providing a media library and also support metadata handling and in general provide a solution for generic media handling with cropping and bedding and so on. So that's how the media entity module was born. But what is media entity? Media entity is a normal content entity just like the node and analogous to the node type on media entity we have the media type here. But what is special about the media type is that it takes, it makes use of media sources. Media sources are media type plugins that handle actual reference of media objects. They define how data is stored on the Drupal site. They provide metadata mapping and so at Drupalcon New Orleans the official media initiative was then announced by GRIS and another huge amount of work was made to bring media entity model into core and that resulted in a huge patch with got committed and it's now in Drupal 8.4 and what this brings us is an improved API based on media entity. We also have two basic media types image and document which provide parity for file and image fields and everything else is still left for contrib. So Drupal media is still a hidden module in Drupal 8 so you won't find it on the extend page and to enable it you either need to enable it via drash or by enabling a contrib module that depends on it. So in this case we'll enable the media entity Instagram module which allows us to link Instagram posts and after enabling the media module we have this media type screen where we can see the image and the file media types are the present. So now we'll add a new media type based on the media entity Instagram module and here we select the source and for now we'll leave this metadata mapping settings alone because we have to set up some other things first. We'll create two fields for the title and the caption metadata that media entity Instagram provides. You probably all know how to create fields so I'll just skip this. There we have two fields. Now we'll modify the form display a little bit. We can hide the newly created fields because media will take care of filling them out for us and we can also hide the media name fields which corresponds to the node title. We can do that because media takes care of filling that name field for us automatically if we hide it here on the form display. And we'll also take care of the display modes. We'll hide the fields that we don't need and change the formatter on the Instagram URL field. So now we can take care of the mapping. We go back to the edit page and set how those metadata fields are mapped to our entity fields and that's it. Now let's add an Instagram post. We go to the media library and add a new media and item paste the URL and save. And Drupal will take care of retrieving the Instagram post and also storing the metadata into the fields. You can see the caption down below. So how do we link now this to our article post for example? We'll add a new entity reference field to our article referencing media types and we'll set it so we can reference unlimited amount of media items just for the sake of example because we're built upon on that later. We need to take care of the display. We'll just display the rendered entity. We're side builders, we're not front-enders so let's let them handle that. All right, so if we now go to the article form we'll see that down below we have an entity reference field with the autocomplete but yeah we can reference our previously created Instagram post and there you go. Voila. So while that was okay the editor experience still leaves a lot to be desired. Imagine creating an image gallery of 20 images and going back and forth to media library adding images and then going back to the article node and filling out the autocomplete field that's not really nice. So we'll now take a look at how we can use the entity browser module to improve that. What is entity browser? Entity browser provides a powerful UI component for selecting entities. We can use it for selecting items from a library, we can use it for creating new items, we can use it even for more complex workflows where we can we add new items, edit them, rearrange them and so on. So this is a schematics of an entity browser. This middle part is called the widget. This is where the main entity selection takes place. This can be a view or a form or a form connected to some external system and so on. There on top we have the widget selection plugin. This controls how we switch between different widgets because inside the single entity browser we can have a view and an entity form for example. So this defines how we can switch between it. It can be for example tabs or drop down or buttons or whatever. And down below we have so-called selection display and this is like a tray. It holds the media items that are currently being selected. So where can we use the entity browser? We can use it as a replacement for example for file and image fields and actually get some kind of usability there already. But we can also use it as a widget for the entity reference fields. We can use it when we embed content in the wizarding editor or if we're developers, we can use it in a custom form. So let's now see how we can create a new image, a new entity browser. First we want to be able to select already present items from a library. So we create a view and what's important here is that we add a media browser bulk upload form field because that takes care of the actual selection of items. We'll also add the thumbnail field just to see the preview of what we're selecting. And we also have to add a new display of type entity browser. So the entity browser module knows which views contain this displays and can be used in entity browsers. Okay, so now we're adding a new entity browser. We go to a configuration entity browser and here we're just creating a simple entity browser just with the view that we just created. So we leave that all the basic settings just as they are with the defaults and we are only concerned with the last step of this configuration where we add the view widget. So here we're adding the view widget with the view that we just created before. One last step, we need to replace the autocomplete field on the article content type so that it uses the entity browser widget instead of autocomplete. And we have to set it so that it uses the entity browser to just create it. Okay, now let's see it in action. If we go to the article form again, you can see that down below we have this entity browser widget and if we click the select entities, a pop-up appears with the view that we just created and from there we can select the entities. There you go. So hopefully that was okay. We can improve upon that. So let's now see how we can create an image gallery with bulk uploads, how we can edit those items that we just created and how we can modify the selection display. So first, we just enabled inline entity form and drops on GA's models. I skipped that part because it's too boring. Now we're editing the entity browser configuration and we just added the selection display widget and we need to configure that so it displays the rendered item and here in the last step we'll add the drops on widget with inline entity form and it will create image items and we also add a form for creating videos. So these are all widgets that come with inline entity form. There you go. So if we now go back to the article form and click select entities, the same entity browser appears but now on top we have the widget selection and we're now bulk uploading three images and when those are uploaded the entity form appears below so we can modify the values and then for the sake of example we'll also add a video from YouTube. We just paste the URL there just like we did with the Instagram before and down below you can see the entity selection and there we can remove or shuffle the selection. There you go. Well, maybe that's exaggerated. Sasha will now continue with embedding. That was great, right? But we can still improve that. So Drupal 8 has made a big step from Drupal 7 and included the CK Editor with a big library in core. It also comes with an easy to use tool to embed local images in your text but that is only limited to images. What if we want to embed for example tweets or videos or Facebook posts? We can't really do that in core. I'm sure you already have seen something like that. Maybe it's from a really famous U.S. newspaper site or maybe something like this. So a Twitter post, a Twitter tweet. Well, to do that we need to enable a new module called entity embed. So basically what it does it just extends the functionality established by Drupal core and this module has become a standardized solution in Drupal 8 now to embed any remote resource or into the into directly the visibility editor in Drupal 8. So for example, this module doesn't really care what you need to embed and as long as this piece is a content, is a standard entity in Drupal, we can embed it. So for example, we can do it, we can embed videos, related articles, also commerce products for example and every kind of media entity is basically. So let's see it in action. We first need to go to content authoring and text editor. Here we will add a new embed button and we saw that there is already one pre-configured button for reference for embedding nodes but we want to create a new one for media. So we call it media, we select the media entities that you want to embed and we strongly suggest that you create a new icon for every embed button that you want to create. So for example, if you want one for media, one for files, you should create for each embed button a separate icon because by default it will take the E and it might be really confusing for the end users. So in the next step, we can navigate to the text editor screen and we can drag and drop our newly created embed button into the media group and then we need to configure some extra settings. So we need to check the embed the display embedded entities and we need to make sure that in the allowed HTML tags we have the entity displayed there. If you want to add articles and titles to images, we need to also add that to the attributes up there and as an extra tip, I'm not sure why but we get some extra errors if we don't shuffle or place the display embedded entities below the restrict images on the side so make sure you do that. And as a final step, we can just go to the node now which uses a basic HTML format and we can embed a media with a preconfigured entity browser that we did before and in this example we are just embedding a video and there we go. It's already in the seek editor. We can save it and we can watch it. All this comes preconfigured so we didn't style anything. That's why the video is really small. All right, we are getting there. That looks quite exciting, right? Just one more thing to show from us and it's how we handle image cropping in Drupal. So Crop API provides a storage for hopefully all cropping solutions in Drupal 8 for media and it can handle two types of crops. So one type is by region and the second one is by reference point and we strongly suggest to use the image widget crop for region cropping solutions but it has its downsides so everything has to be done manually and for each image style that you want to create some predefined crops you need to do it manually for each image style and that might take quite some time if you have a lot of image styles. The second one is the focal point and with the focal point you want to say that this is the main part of the image that you want to focus on and it will automatically try to crop the area around that and that part that is really easy to use, right? You just select your main point and that's it. Let's see a quick demo of the region cropping. So here we first create a new crop type and set soft and hard limits. So if you're not familiar with that soft limits are when the user is setting a region that he wants to crop he will just be warned about that and he cannot, I mean he can still go lower than the region that he's selecting but the hard limits are the real limits that the region cannot be saved at. So as we have seen in the examples we just reached the soft limits and we were still able to save the image style and in the next step we need to add the manual crop effect to the image style so we need to edit an image style, edit from the drop effect drop down and we recommend that you rearrange those too so that the cropping is before the scaling. It makes sense and as a last step we need to add the crop widget to the media type and I think that's it. So finally we can add a cropped image to an article and see that in action. So we are creating a gallery we select our image we upload it and we can edit it and here we see crop selection. We can enlarge and select our cropping area so let's just focus on the mouth of the cat that's the most important part. Save that and there we go. Let's see that node and this is the cropped image. All right back to today he will tell us more about where to get the resources. So if you liked what we showed you today and if you're a developer and you would like to help developing the media solutions you can contact the media team on IRC they're on Drupal Media on FreeNode. There's a Drupal there's a page about the Drupal Media Initiative at DrupalMedia.org. If you get stuck and you need help there's a Drupal there's a GitHub book about media and Marcus Kano and Ivan Juget created really great tutorials so you can watch those. The solution that we use today for the demos is on my GitHub account and if you install the media starter profile you'll get what we just showed you. If you like to see how the media entity ecosystem works in production there are already two distributions using it one is standard and the other one is lightning so yeah check those out and let's not forget all this wouldn't be possible but these amazing people that contributed thousands of hours for implementing the media handling. So let's give them a big applause please where we're up for discussion now. Thanks for the presentation. We're currently having about five search sites using media in Drupal 8.3 and we're currently wondering about the upgrade pass from 8.3 to 8.4 because I've just checked out the project page on media and they are saying all media sub modules have to provide the upgrade pass to the new 8.4 then and I have just checked out those modules but they mostly don't have. Yeah the upgrade path is not complete yet but it will be provided with media entity 2.x. Okay so once this this is stable it will the 2.0 release will be ready and you can run it. Okay but Drupal 8.4 is coming out on October 4th I think. Can I upgrade my site to 8.4 or better not? I think better not. All right another question to cropping is it possible to crop media entity or a media image let's say for two nodes with different croppings or is the cropping safe to the media entity? Yeah the cropping is safe per image per usage so not per usage sorry per media media item so no. Okay all right cool thank you. Anything else? Hi I often observe clients and text no a content creators to upload the same file several times because they might not be aware of the fact that you can reuse files. Is there maybe a mechanism to detect duplicated files and probably merge them automatically or something? Not with the dime aware of not not with the media entity ecosystem now. But that could be like a contribute contribute module I guess. Yes okay more? What is the expected time or at least like any kind of idea when it will be ready what you expect to test so it will be ready. What are the main issues that you deal with? What are we waiting for? Yeah so I attended the buff that was held by the media initiative guys and actually the main problem right now is funding. Most of this was done in volunteer time so developers are now working on projects and there's nothing we can do about it unless we find either money or people that are able to do this. You didn't mention the URL embed module because I can see a lot of cases where you don't want to store like Twitter and database if you use it a lot. I think Sasha researched that a bit. Maybe you can answer that. Yeah basically we didn't we didn't include that one because we can just use the embedding with the URLs like we did before in the examples. So I think it's quite a similar solution to that one. Thank you. One regular question that I get from potential clients is like can we organize the media library in folders like on the drive you know like what would you suggest to tell them? So as media items are normal content items you could probably create folders by some kind of taxonomy system I guess that we didn't show that I personally didn't actually create it yet. So okay thanks. I can give you a solution right now but I'm sure it can be done. Okay anything more? Okay then if you want to contribute join the sprints. The media team is probably still here and yeah please rate our session. Thanks.