 So you know that there's a change of plan. I am the backup. So this is going to be about paragraphs and content editing. It's going to be about paragraphs. I'm going to allow everybody to walk out because I don't want to... So we need maybe somebody from the venue, right? I was going to say I'm not volunteering this year because I don't have WhatsApp on my phone. I have used these people because I used to volunteer. Oh no, there's also a teaching pod user guide. Wake up the pod. Do you want me to turn up some screen here? Power of the PC. Will there be no way to touch the codec? Yeah. Can somebody guess? And to the recording there was that. Yeah, I know. So maybe we try to get like somebody who is... There should be a moment. There must be an HDMI. At least we have got into this by the computer here. Good God! This is so old, you can barely see it now. It's coming back. And at least there's somebody who's no longer in. Do you need to know my adapter? No. Do you need an adapter? No. I don't know an adapter. Do you want one? At least that would be probably the only way. Yeah. Lightning. Oh yeah. Lightning or HDMI will do. If you can log onto the... Just sit here on the laptop. This is the benefit to me at first, right? Lightning or HDMI. We can see the router. Thank you. Yeah. It's all set down here. I said the worst case scenario. True. Hoping that there's internet here too. But the good thing is that the talk is not so long. So it's okay to be a little bit late. This is a replacement session. So it's not like what it says in here. So this is going to be about paragraphs, content editing. Feel free to leave if you were going to see... Browser Wars 2018. So you're not being rude. Thank you. Let's see. You're already in here. That doesn't seem... Is this working? No. I can also sleep, it's okay. I should pick up something. Is it keeping me? 11.35. Would you like to put yourself? Yes, perfect. Great. Again, this is a change. So we have the session about flexible content editing with paragraphs in Drupal 8. And we do not have the original what was planned for browser wars 2019. So feel free to leave. You're not... It's not this pretty. I will not look. But this is going to be about experience and how you can actually use paragraphs in a really smart way. And sometimes why is it not used paragraphs? Because paragraphs can sometimes be a pain in the ass. So this is the talk that you're attending. Okay. So maybe we're going to start off by very briefly that this morning I walked in, I got my first cup of coffee and then... We have like two people that can't come because of weather that could fill up the session. So that was basically half an hour ago. So that's me. I'm going to be talking again tomorrow. So please, like I did this talk last summer around about like in the Drupal camp in Germany. So maybe like I don't have exactly here up above my head, but I will do my best. But this is definitely like something that we are doing a lot and I'm very, you know, I care about this topic. This should not be so long. So let's just go through it. It's more about inspiration for you guys to think about the difference between using paragraphs and using CK editor and when to use what because probably most of you have experience with Drupal. So is anybody here who is a complete newbie all have experienced experience with Drupal 8 as well? Yeah. I see knocking. No? No. More Drupal 7? Yeah. So I've seen Drupal 7 three years ago to change over just to use paragraphs all the time that we can. So it's also, it's not only Drupal 8 here. The Drupal 8 part is just showing a little bit of extra stuff that you can do that you cannot do so easily in Drupal 7. But it should still apply to even though if you're not that familiar to Drupal 8. So let's start. We have these two kids and what they love the most about Drupal is that when we go to DrupalCon we get a t-shirt from Druid. And so every year, and actually I couldn't find on the spot like more pictures, but every year we always get the new kids t-shirts so they actually get cooler t-shirts than us. So we can follow up with these kids like how they are very good at Druid. But otherwise I started in this university in Reykjavik, computer science, and then I did my master's degree in engineering in 2008. And when we were starting, when I was studying in Vienna in the Technical University there, we actually got to know Drupal and we started to play with Drupal. It was like 4.7. We basically did everything wrong and we didn't understand really what this was about. And it was not until in 2012 that we really stepped into the community. But until then we were just using this awesome open source project in a couple of like products that we were working on. So these are the two kids that I have, Elva and Jakob. They are half German or they are actually one fourth Danish, one fourth German and one half Icelandic. So we call them Europeans. The company that I own in Germany so we have an office in Frankfurt, we have an office in Spain. Just open that up with Ruben if anybody knows him from the Druid community. We are 25 people around we are mostly just developers. So less focus on design and all that, more focus on development. We are probably supporting partners of the Drupal Association. We are also organizers of a lot of camps and a lot of user groups. And what we like to do and what we are part of in our company is to build distributions. And that would be another talk that I could have also put into that. If you are interested in any of these distributions like D, German government, OpenATU, both of those are built upon Atria-Latning. Both Drupal 8, OpenATU is for higher education. Then Thunder, which comes from the German PURTA publishing company and of course Drupal Commerce that we have been doing a lot of products with. So we believe in distributions because we believe in standardization. So we try to create something and then use that and not always every time try to reinvent the wheel. So this is what we have been focusing on now. In Germany, the DECOF distribution which is for the government has been chosen in one of the largest states in Germany. Sorry. To be the base for all the websites. So don't touch this. So I was actually getting to the good part now. So before I start because I need to do a little bit of advertisement for my talk tomorrow because I'm hoping that everybody will be here tomorrow and not leave. So I'm very passionate about football as being from Iceland but I'm going to go into that tomorrow to speak about how the Icelandic soccer team has been why they are getting so good and if that is luck or if that is hard work. So I hope that you will attend that talk tomorrow but actually in 2008 I was a European champion in robotic soccer. So parallel to the European championship in football like the Austrians I was playing for I was in the team of the technical university of Vienna and at that time Austrians were not so good in football but we were pretty good in robotic football like we were winning teams from Germany and that was for the Austrians really big so this is the biggest hope and we did not only create these robots I was more responsible of the software part of it but we also had the hardware team so we were a team of like 10 people and this is a project that has been going on for a long time and we did not it was not enough to let them just play football because we also allowed them to dance so I'm going to show you briefly sorry that Lidia is of course very bad we could dance 2 different types of dances and this is what we did before the games we would dress them up and of 200 women now 200 people that were participating in the European championship I was the only woman and we became European champions so think about that when you are standing in a team we have little golf balls we had computers cameras on the top that detect the colors so we had 4 different colors on the top and the ball is orange and then we created an algorithm to see where to hit and all that but basically the computer does it all the software we could only turn it on for the 5 minute game we could only turn it on and then there was halftime and then we could change our algorithm so we had like 5-6 different algorithms so we looked at what the other team was actually doing because we saw a pattern and then we switched the algorithm so and the referee was only there to help when the robots were in the corner and they couldn't do anything else and we were not allowed to do anything so we were sitting there and the other team was sitting on the other side anyhow this was like in 2008 so a lot of fun but let's not forget where we are here except anybody has questions so this is basically a show case I'm going to show you a case from a project that we did last year which is called OpenDoors and that's helping Christians being persecuted thank you I have only the German word for it so this is a very content rich site and the challenge here was that there are so many there are so many different types of content that we really had to think about in the beginning how can we make this possible for the editors because the editors are not that good at all and we have a team of very many people who are working on the site so we are thinking about the URL is and there is even in Poland as well so we spent a lot of time to think about how can we make them have a page that they can create landing pages really quickly but at the same time be able to create content really quickly which is a challenge often because creating landing pages you have to think how actually do you want to do that so if you see like there is all kinds of areas we are showing you the latest news there are these so called ads just for those like it has changed a little bit now like this project that we are just working on constantly it's basically to give you a little bit of an idea of how a front page looks like you see there an element you have here blocks and this can be solved in so many ways in Drupal and that's actually one of the ad things about Drupal is that we can do the things however we want to do it which makes it a little bit complicated so this could be built with blocks and layouts and we can think about all the different ways of how to do it so it is really important to choose something in the beginning and stick with it so just please feel free to go on the page so a couple of facts we started in May 2016 then Drupal was 8.1.0 so in the end of the summer which was pretty early on we had a stable version and then yeah today sorry I didn't update that of course it's not 8.3.7 I forgot this one what we also did in this this has a shop so in October 2016 just really quickly after Drupal con in Dublin we sat down with the commerce guys and we sat to them we need a shop up and running in the beginning of March April and they were like no it's not going to happen so what we did then we started to contribute to the commerce part 2 because we had to have that up and running and the product was lounge on the 1st of April 2017 with a completely fully blown commerce shop and of course in Drupal 8 which had challenges firstly there also a lot of web forms on this page and we of course started in the YAML and then that all of me had to change and now the latest problem here was of course all the media upgrade so going from 8.3 over to 8.4 was of course a big step and a difficult one that took a lot of time I don't know if you have any ideas with going there to develop these changes but basically if you go and you look at this website you will see that there are so many pages and they are so different but this is everything we have we have only 5 content types so we have the basic page which is the page that has basically one field and that's called, that's a paragraph field events and news and that was decided because we are importing that with REST or with the REST interface we are importing that from another source so therefore it was important to have events and news as a separate content type but with the option of being able to put in paragraphs as well in there then we have the country profile which we only use CK editor and I'm going to go into that why we did not use paragraphs there and then there's also imports of prayers and jobs so basically this is a very simple slim Drupal backend that creates a lot of complicated notes you can say that so that's why so we have 25 different paragraphs so I will give you all the access to all the slides so because I see that there's no way to read this but the 25 different paragraphs this is what we defined with the client we settled the client, okay please tell us what do you want luckily we did this project HR with the client so the client was really allowed to take his wishes and change them during the process because otherwise this would have been not possible but we created 25 different paragraphs so we said okay you have a landing page and you can basically put on a landing page whatever you want whatever order you want you have to go be really creative and if you think about okay what should I start with should I start with a header slider should I start with a text block should I start with a newsletter where should I start but that was a challenge that we discussed with the client beforehand we decided that you have to be aware of that you have to be able to imagine this in your head before you start writing it because otherwise this is going to be a very bad concept so that worked out really well we even have a we have a really nice one here it's called an empty paragraph so they said like sometimes we just want to have like an empty area in whatever color we want and we're like okay how do you do that and they said like but sometimes we want to have it like really small and sometimes a little bit bigger and sometimes a little bit bigger so we're like okay let's create an empty paragraph where you can choose the color of the paragraph or of the area you can choose it if it is small, medium or large so it's one pixel five pixels or ten pixel something like that and then they get their area and then they can basically put as many areas as they want but that's exactly you say like what you know and we also thought the same when we were working with them we were like you have the craziest ideas but in the end it really worked out well because they can basically do whatever they want and they are not unhappy with their triple bucket which is something that we too often hear that it is too complicated because we put a lot of effort in making this work so let's look at an example of a paragraph the hero image so it's not the hero slider, that's another paragraph but the hero image the paragraph that is how it looks like and let's think about this now this was a fixed project fixed project, fixed price, fixed scope client would say I want to have a hero image how should it be? I can put in text there is a link to somewhere and there is an image perfect, let's do that but the client actually wanted he wanted to be able to put in a picture he wanted to be able to put in a text and a subtext and a link but he also wanted to be able to control exactly what colors he uses on these elements he wanted to be able to say exactly where it should be on this image because obviously this guy here if he was here this would not work out so we had luckily, we had the chance then to do what he wanted because we gave him up, up, up left, middle left down left plus we allowed him just to put in the color that he wanted so here we see the paragraph so this is the first paragraph in there you go to edit so content background color in this case we gave them just fixed but we also have a color chooser for other paragraphs then you can say headline position set to left in this case you could also choose between it like it didn't show the draft times but basically you can in here then really choose how you want to do it so it will just repeat again because it's just a GIF so that's how they do it they call it P12 because it's a hero image and everything with hero images was P1 and then it is like 1, 1, 1, 2, 1, 3 so they have in their handbook a catalog of what is what and they show really nice pictures of that but that's how he can the client can completely choose how he should do it so let's then look at center text that's how a center text looks like looks like and again there's a couple of challenges that we have here he wants to have a photo in the background but of course also a color in the background and then you of course have the problem that if you have a light photo or light color then of course you have to have a different type of the font it has to then be dark or light so you can either detect that automatically so that's possible or what you do like we just did here we just told him that he just has to make the decision so here you can put a title he can then also say if he wants the title to be there or not and he can then put the background photo in it so the challenges that we have with this one is that responsiveness how it's going to work out with the photo there is time in the background because this also looks really light photos so in this case it's no problem but it's here but when it's on smaller of course it's going to be partly over the content it's going to be over it but this seems to be a simple paragraph which it is also if we look at how this is done center text and it is really simple but like there is also a lot of effort made in thinking about how this would be done so he can then use it so here he also wants to be able to to put in make it bold choose the background color choose the color and this is the color ticker you can then say transparent and then you always have the links and all that any questions so far yeah yeah the colors of the font oh yes bro no I think we disallowed that I think that would be too too dangerous but what we are there is a really I could share that somehow with you if anybody is interested in detecting the color and then switching the color of the font that is something that we just wrote now recently also for another client which is really helpful because that is something that the client they love that you know we are the editors because in the end it is about making them happy because then your product will become successful so we have the new slider so this is also just a normal new slider that shows the ladies news in that sense but this is a paragraph then that you can choose to put in anywhere so it is p5 1 the 25 of them and I think we are here just referencing so we created a view and we have a taxonomy which is countries and so they can really choose if they want to show all news or if they want to show all news for a certain like a term so how this was done the paragraph the only field that the paragraph has is a reference field it has nothing else to this taxonomy so there is nothing else for him to do he just gets the news slider and he puts in the the country or not and then it will automatically show the ladies news from this term or from everything if he doesn't choose anything so I think I have a display here from the views again very small to look at here but afterwards you can look at that in the details but basically there is a contextual filter there and this contextual we just had to write like a little hook that takes the field from the paragraph this only field and then that goes into the contextual filter and then the view gets displayed and so what we often see is when the client has to choose the blocks or something like that and he has to find in a really long list I don't know if you are familiar with that really long list with very many displays from views and he has to then put in contextual filter or something like that and this makes it just really easy I want to put in the news and either I put in everything or I say what country I want to head then comes actually the problem that we had and we didn't realize this back then we know that now luckily and I want to like at least share that information is that what about reusable stuff so paragraphs are not reusable so if you create a paragraph with content it's not like that you can create another node and just reuse this what you did before that would mean that for the client when he wants to create like an advertisement like there is an event next week that you would have to do that on every single page than he wants and this we are also experiencing in distributions that we are working with and how we just built it here is that we created a reusable paragraph which is very simple this is a reusable paragraph this is just an advertisement for something you can say it like that help out volunteer at a use day for the organization so we just created entities very simple entities and the entities just have photo text and title and link of course color and all that stuff left and left and up and down but these entities are then we call them banner list so what they do they create their little entities so they just go in and say I want to go to create an overview page with all your banners and then they can just look at them and they can edit them and change them then for every other like everywhere which is of course really helpful then if they want to add it in so look here we have the empty paragraph see what I spoke about earlier so basically p7 banner image reusable that just is a reference field so the only thing that this paragraph does is a reference to an entity very simple like the only thing that we need to do is just to make a display view display really correct so they just choose here but this is actually something that we didn't solve in this project which is I hope that we can you know and probably there's a module already for that where we can in the banner part here you know this auto-complete like content editors they hate this auto-complete stuff I don't know if you're familiar with that because you start to write like here and then you suddenly see like 10 banners and you have to think oh what was actually the title of it so how you could take this to the next level is of course just have a little little search where you can search and then see that and this is how we are building that today because we decided in the distributions that we are doing today not to do this with entities like the entity how it comes in Drupal we are doing it with media so we are using which is an entity of course media for everything that is re-usable so I can only like if anybody wants to check about that afterwards most of them are technically involved in these projects in that sense but if anybody wants to talk about that then what you cannot do we create like media for everything that is re-usable and should be re-usable and then you can also when you're selecting it you can create like views and everything so with the media browser or all kinds of other ways so that is another way how you could in a paragraph reference a media entity and that is definitely in open edu my D of distribution we completed with everything like that but that is another way to do it quest it and these are for example examples of like more re-usable where you have a banner block where you can put more re-usable things on there I think it is just like referencing then six does not go in there yeah so let's not go into that details but it's the same story here we reference here just six different types of entities so paragraph editing what very many really like the problem that very many have is that paragraph editing is really not so user friendly so what we want this to tell you that what you can do there if you look at this I don't know if you're familiar with paragraphs if you are have you seen it so nice before probably not except that because we never have time to make this look good for our clients we always just do what we need to do because we only have the budget for what we see but here you can really make this look however you want to look so the client can look here and he can read so he doesn't know exactly what paragraph to go into and that's done in managed display when you are in if you just go in managed display you go in custom display settings and you click the preview in the paragraph then you can put in the everything you want that you can even use image styles to make the photo there so this is so simple and this is you don't even have to put that into the budget you can just make it nice without a lot of effort so in the paragraph go to managed display go to the add the preview and then just make in there whatever you want ok so I asked about the red area on top like what is this so we are using the environment indicator module because that's also something that is really helpful that you can easily see whether you are on dev test in life and in this case we are in life and that's red it means like what's up whatever you're doing don't press anything because it's red except you really know what you're doing and that's also something that is so easy to set up briefly about ck editor because I'm almost over time I have 10 minutes how can an editor decide to create a page when he has 25 different ways of doing it there is no like he has to be very creative and therefore there has to be also other ways of doing it and there are certain content for example news and in this case where we were putting in basically they have a long report with information they go into work they copy it ctrl a ctrl c and they want to put it on the website that is with paragraphs not possible because you have to then start by taking the first half and add an image and you have to take the next one and then the next one so the client had the need in some cases to paste this into a ck editor but still he wants to make it nice so how can we still allow him to make that nice into ck editor and there are a couple of country modules plus there are also we created a small modules but they are very simple which is for example entity embed and entity browser we used like a mix of these two one of them was a little bit more advanced in the project so you can basically remember the reusable entities that I was speaking about before or the views for example insert view these if you have like a really long page with a lot of text you sometimes just want to place something in between and that could for example be I want to insert a view with like contextual filter to show in between news I want to say like I want to put some photos or something like that so this is a page that it's like a called a country profile where it's being talked about like where this country is standing in terms of the topic and there for example we have a table of content and that we just automatically we created a where's it called here the text format filter here created a new filter called table of content that means that it automatically automatically takes all the h2s and just renders a table of content yeah so like something that we are really used to when we use when we were working with viki for example but this just happens automatically this is a very simple thing that you just you could do that's what we're demonstrating here you just detect the h2s but then you have to also create the filter before so you say in the cga editor that this is the behavior that you want so another thing that comes probably here you see the news this is like inserting news and they wanted to have it like a little bit that comes a little bit in the middle and then comes also a like this one charts this is also taking then we just say like add a chart and then basically we just render the map from am chart based on the information that is in the country profile and we just make it look really nice so they do that in here so up here in the area this is the view so we go just there are buttons here this button the blue button that just allows you to insert the view that you want to insert wherever you want and then you can put the argument in there so this is just a really nice add-on for being able to pin pop your very long content and if you go and look there is we also did this with these tokens am map this is also just a token that references this note and we also did it like this that they have a list of a couple of tokens that they can then when they insert the content is also just put in like taste it in so they don't have to use all the buttons but this is really important for them to make that little bit nice so I was just taking a picture so this is like the content that table of content and here we are just using am maps an am chart basically this detail information is coming from the note itself like it's filled on the note this is also the same for the news so we allow in the news to just insert whatever you want to insert in there and that's just very important for for them to be able to because very often the the news is just long text that has to be there they need to paint that up and we allow them to in the news then also just tag a country and then we display all the information from the country so please just have a look at this website here we are also using am maps to generate this worldwide map here that shows which countries are the bad countries for them and and this is then updated regularly every year a lot of content a lot of information in very short time like always I say in Drupal camps and in such an events this is mainly for inspiration please feel free to to ask questions to come afterwards and just chat about something if you want to but if you have a question now or five minutes I was hoping that you would ask a question that there are some things not to do with paragraphs what that is basically to choose between when should I use a paragraph and when not that was mainly what I was meaning there so making that decision that I spoke about in the beginning of choosing the content types which then when because we did in the first week we did the mistake but we defined paragraphs in news like you can build up your news in a really nice way and then we just figured it out that the client just wants to paste information from somewhere else or in this case we are importing the rest so you have to make a decision really carefully and you have to discuss this with the client and you have to convince the client because the client is not necessarily going to understand this when you are discussing it in the beginning but please mock it up, prototype it rather to show him the difference in inserting news therefore we are allowing him to do all kinds of stuff instead here more questions? when you create paragraphs you ever use the icon do you know when you create a paragraph in structure it says add a icon so you can create a list with your icon and add a hymn and I can't see anywhere it's actually running news good question does anyone like this it would be it's a notice for the little drag and drop thing it's a notice for the little buttons well yeah but it would be nice to have a view of those buttons that have the icon so if you've got text on the left it would be nice to have a view of the right it has it all it has it I didn't the mystery continues and one more thing I forgot to mention with accessibility in SEO and all that like having paragraphs you're giving the editor a lot of freedom to mess up in terms with h1 and h2s so what we had to do we had to define these 25 paragraphs we had to define I think 5 paragraphs that we allow the editor to say is this the h1 or is this not the h1 because we need if it is on top and if it is the main title we need to be an h1 and we also allow him to turn that on and off so before I want to tell you about the little baby that is just coming to life there are stickers here I've been promising that online please like most of you probably know there will be no triple con in Europe organized by the triple association but the community a group of 15-20 people have been spreading weekly since September Vienna and we have been putting together this event that will take place in Darmstadt which is only 25 minutes away from Frankfurt airport we just started ticket sale and it's called an early supporter ticket because we are just a group of people that are trying to put this event together so we also need our community to help us to make this happen so the venue has been secured and everything has been secured but we need people to buy tickets to show support so if you want to come then buy it now because you will get the best price 380 euros it's going to be a great conference and if anybody wants to speak about that please do ask questions about triple Europe and get stickers you get stickers here because you attended this talk so thank you and I hope to have a good discussion with all of you regarding flexible comment editing just one more question perhaps relates to the first one I'm just wondering about how many paragraphs you end up with about the client's workflow because I think there is emphasis within Drupal on identified workflow can you comment on that at all are you then meaning the workflow from the editor perspective that he can put it on to review and all that yeah that sort of yeah so we are using that here and like because paragraphs in that sense are something that you are then creating for this note so the note itself will then just go into the workflow modus am I answering your question I'm just trying to figure out by paragraphs on one hand the requirement that somebody might have sort of think but no it is not like of course for the reusable paragraphs there is their own like you can then review that and put that into the status workflow and there is also of course a challenge than if that entity is then unpublished and you then have to make sure that you cannot add it you know there is all kinds of complications that you will have there so either you have to have fit editors or you have to make it good so they can only choose what is published or only choose what is in the mode like review mode or you know it's okay to go online I suppose what I'm wondering is if the workflow might nationalize the number of paragraphs of course and there is also been like and then on top of this the challenges with multilingual we have had them also here with the paragraphs in relation to that so there has been a couple of challenges but that's always getting better with every release now with Drupal 8 actually in this case we have this really good service and CDN and everything on it so for the user it's not affecting it at all for the editors I don't know how many 10 paragraphs so it's not so much okay so I think we have to stop the recording yeah it's okay we got one more problem if I want to copy it I know that much a lot of paragraphs what do you mean if I want to have a review for others we have five to six paragraphs I also want to copy it and then have a new note you have that and then the reusable ones if you want to or you just want to copy it you want to clone the notes and then the paragraphs they get cloned in the same ID you have to work on that that's the problem I don't know what the existence is but we did something here we lost so much content I know using Replicate we just at some point in the beginning I remember I was heavily involved and as I started the client we were going to take out this module but I don't know but it would be interesting to discuss it where are you working at a small company in Denmark so we'll have like a Scandinavian you mentioned also detecting the darkness of an image do you know me actually I would have to get back to you on that how we did it I could probably look it up in different ways to find the end of it it's like it's such a nice thing to be able to do if you can remind it's like thinking about it because I'm fairly new to Replicate it appears to me that we just sell for the fire also like image magic or something like that so so so so so so so so so so so so