 All right, just sort this out. Hi there everyone. How's it going? Great to see you all here my name is Murray woodman and The talk today is better tools for content creators paragraphs parallax scroller and friends First off, I'd like to say it's a great privilege to be able to speak to you today at Drupal con and Thanks for coming along. I know there's a lot of Sorry the mic the mic, okay Can the people up the back here? Yes, okay, sorry about that Welcome everyone to our better tools for content creators. Okay, so what are we going to see today? Well first off We're going to have a very quick look at the paragraphs module And then we're going to go through a bunch of contrib modules that I've been working on With my team and we're basically going to see a suite of tools that augment The paragraphs module which allows you to do some cool things Including you know doing sort of effects such as parallax scroller and another number of other sort of JavaScript libraries and things like that I must say that The work I'm going to show you today is not just my effort. It's the result of a lot of hard work Put together by the the team of people I work with as well. So that includes Ivan Chloe, Dally Ball, Radium and Peter The eight sort of contrary modules we're going to see is a result of a lot of their hard work and inspiration as well But as you can see we've put a lot of effort into this we we caught the paragraphs bug probably about six months ago or maybe a little bit more and As we started using it we started liking it more and more and basically, you know decided to Put a number of sort of resources into it. Yeah, just to see how far we could actually take the model As we go through the presentation today, we're going to have a look at a Demonstration site that we've built so we built this site Basically to show off the contrary modules that we've done but also to you know, obviously to show you guys What's possible with paragraphs? So I'll just jump across To that now. So this is the the the demo site that we'll be having a look at and I encourage you all just to take a look at it in your own sort of free time Just having a quick look at the homepage here We can see that What we have here is sort of like a chunked out design where you can see you know You have these different sections that are on the homepage and each one of these Has been implemented as a paragraph So yeah, basically the suite of tools we've done sort of allows you to put together these kinds of designs Possibly the best way to to give you sort of an immediate understanding of how paragraphs work It's just to jump into the the edit screen here and we can just have a little look at What's going on behind the scenes We can see the you know the trusty old sort of body field there But then coming down we can see we have some other fields for various paragraph types. So for example Here we have You know a paragraph here called a content paragraph type That's a paragraph bundle and we have a number of different fields Where you can configure the actual sort of content or data that is going into that individual bundle On this particular site, we've implemented a number of different bundles I'll just come down here so you can see The different bundles that we've got going here So, you know, we have our carousels a content paragraph galleries content lists that kind of thing so You know one of the the sort of benefits of the paragraph module is it's very easy for editors just to come along and You know click that they you know want to create a Paragraph and then you know that paragraph will open up and then they can edit the details In that paragraph and then save that out So I won't go into that in too much more detail But you know we'll be seeing lots more sort of demos of how the paragraph module actually works Okay So I actually haven't had anything to do with the actual creation of the the paragraphs module But all the other sort of modules we'll see after this point is stuff that we've been working on How how is how can we best describe what the paragraphs module is? I think you know possibly the the name of it is a little bit misleading basically, you might want to think of it as like chunks of Information or possibly widgets or whatever other phrase you want to come along come up with But basically it allows content creators to place widgets of varying kinds Onto the page and they are able to decide the order in which they want those widgets to appear And the really good thing is that actually all occurs in the node edit form There's no need for them to sort of jump out into sort of some panels kind of configuration screen it all happens on the node edit form and This is one of the main advantages because it gives editors, you know a single interface By through which they can add their own content okay I'm about to take you guys through a number of scenarios a number of Conversations that we've had with clients along the way and you know going through some of the Requests that they have had for us to deliver features for them These three designs you see on the screen here are pretty typical of you know the designs you see on the web these days You have designs that go edge to edge You have really sort of luscious rich looking graphics in the background and those graphics also go edge to edge and of course You know you have all this stuff that's actually been entered by content creators. It's not some Thema sort of working in the background sort of targeting different elements with CSS. This is stuff that content creators have to do So you can probably see that you know the typical sort of Drupal website that may come to your mind is is something whether you know you have this sort of content Region sort of stuck in the middle of the page in its own container With sort of blank space on the side and you know, there's no ability to for editors to control what's going on the side It's all sort of stuck in the middle So these kinds of designs really do sort of throw up a challenge for you know Sort of typical patterns you might see on a Drupal website Okay, so the first question we were asked You know by a client was how can they control the ordering and positioning of widgets? I mean as as we know when we're as site builders when we're building out a site We will generally use something such as context or panels to place You know blocks or other widgets on the page This is a decision that the site builder is actually making all the information architect They know what they want to achieve They lay it out and then they capture it in features and then it's locked away It's not really possible for you know content creators to come in and easily You know move things around Sure, you have the the block system which they could probably play with as as well You know you do have sort of you know panelizer and in-place editing interfaces But nothing that's really happening on the the node edit form So paragraphs offers away sort of out of this sort of scenario so just have a Quick look here at the demo site. So I'm calling this a normal page what we're looking at here We have the sort of a body field, but we also have a few paragraphs on this page So down the bottom here in gray. It's like I'm a classy content paragraph That's just a simple paragraph. We've put on the page We've also got a few different paragraphs over here on the on the right-hand side so if we just go and have a look at the the edit screen here and We'll just have a look at how they these paragraphs have been implemented. They're pretty simple Pretty simple paragraphs What I've actually done with these paragraphs is sort of grouped out the fields It kind of keeps things a little bit sort of simpler for the user interface and and keeps things compact But we can see that we have you know a number of different Sort of paragraphs here and you know the editor can can just sort of click and move them around and change the order as they like So that's that's quite a handy thing for yeah editors to be able to control the positioning of things and so often Editors do want to just you know place things on a page and have them appear as they desire okay, so Another thing the editors that a client was asking was these how do we do these edge-to-edge designs? They they wanted to be able to control the layout From you know the full left-hand side of the screen all the way across the right-hand side They didn't want their content to be you know stuck in the middle so We we solve this problem by sort of working on a module that we've called edgy and edgy allows you to Basically have different layouts that work in harmony when you drop a paragraph in so we've just seen a normal design With like left and right columns here. We have what we call an edge-to-edge design or an edgy design It's probably a little bit hard to see unfortunately on The screen here, but that that gray box you see at the bottom is an edge-to-edge design So what we have is we have a panel is a layout here Where the design has been say it says this is edgy We could have another sort of panels layout where the content is in the middle and the beauty of this sort of edgy Module that we've built is that that context is understood by the paragraph and the paragraph then sort of gets its own container and sort of understands Sort of what context it's in so that makes it possible just to drop paragraphs in in on different kinds of layouts and You the site builder or theme it you don't have to worry about it. It's all been sort of handled for you So yeah, there we go the the contrary module edgy there Just basically allows paragraphs to to handle their their own container and basically center themselves on the page If it's an edge-to-edge design There's a few sort of dependencies in here You got to sort of juggle a few things to get this working But basically if you have a look at the the edgy module, you'll see that there's a panel's layout called edgy boxedon A C tool style plug-in as well as some tweaks in hook preprocess page and some stuff in page Temp tipple fit if you get all that stuff sorted Basically all these edgy designs that we're going to be seeing now are just going to work Naturally for you Okay, so the next question is you know, how can I change the background colors? It was it was fine for the the editors to be able to drop the paragraphs in but they also then wanted to start controlling the the backgrounds on these various Paragraphs that they were dropping in so, you know as every good sort of site builder would naturally conclude That's probably time to drop a class onto The paragraph and this functionality didn't exist in the the paragraphs module out of the box So we've just you know put basically put a simple sort of class that can wrap onto the the div So here we see a couple of edgy paragraphs with sort of classes so the blue one is a primary lighter class and the the second paragraph there is Is a secondary lighter class just having a Little look see how we've implemented that So we come down we have a look at the paragraph in this particular case This stuff is sort of all in the the settings thing But we can see we've we've done a formal to here and we've just basically got a number of classes that we can drop on So yeah, this is a pretty simple functionality But kind of pretty crucial and it does allow you to do you know a whole lot of you know special things Okay, so if you want to check that one out, that's the classy paragraphs module that will allow you to Put classes onto your paragraphs How does that work it's it's done with a hook where you basically define a list of options It's it's pretty common Drupal pattern So at the moment this module is just doing it through code Although we are currently looking at providing a UI and allowing you to put different classes on on difference Paragraph types. I think that will make it a lot more Handy, but yeah, this is certainly enough to to get you started now Okay, how can I get kick started? One of the beauties of paragraphs is that they are pluggable entities, right? It's a pluggable sort of system that we have once you define that field On an on a content type and you're pulling in those paragraphs You can put any kind of paragraph type you like in there and this makes it very very easy Just to you know implement new functionality and to expose that to your users So as a way to demonstrate this we've just released a Sort of little group of modules called paragraphs pack that basically, you know shows off a few of the the things that you Can do with paragraphs really easily out of the box and you know as Drupal site builders this stuff is is fairly trivial It's it's basically, you know creating a paragraph type and you know Just basically defining the defaults sort of view mode for it and I'm rendering That out, but but nonetheless, this is a you know a great way just to show off the kinds of things That you can do just hang on a tick Okay, so here's paragraphs pack This is a very very simple paragraph this one. It's the the content paragraph We've kind of tricked this out and kind of put a few grids into the the CK editor just to sort of make it a bit more Sort of sort of a bit more utility for the the editors, but yeah, that's a very simple content paragraph Here's another very simple content paragraph using the grids with some video This is an interesting one a content list So often when when dealing with clients they will say hey, I just want to put a list of things on the page You know, there's no necessarily sort of strong data model that's attached to this stuff It's not really a see also or or you know a more info or a related kind of Semantic link. It's just like I just want to put a few items on the page and have them look good And this is a perfect use case for something such as the content list and here we have the situation where An editor can just go in and pick out a few different Sort of entities in this case nodes with an entity reference and put them on the page The actual paragraph itself Allows the editor to pick the view mode and that will just render out so so long as you have the The view modes done for each one of your content types You know, you're going to be right All the editor has to do is just bang bang bang pick the nodes that they want and they're going to display in a really beautiful way And you know once you have this basic pattern down you can really open up a lot of sort of sort of opportunities for editors Yeah, the juice box gallery This is this is a really nice gallery that works sort of out of the box. It's fairly sort of design agnostic It works in in most themes. So we just thought we'd done We'd sort of put that one in there just to show you, you know, what you can do with it Okay, so that's That's basically the paragraphs pack and You can check that out there at the the paragraphs pack sort of project Just grab a drink So much talking hey us developers don't usually talk this much, right? Okay So When we when we were building out paragraphs pack we really want it to be developer friendly So we haven't implemented any of this stuff as as features so basically when you turn these modules on the fields are created programatically and The paragraph bundle is just there for you to use and you're free to go in and you know Edits up the you know change the config as you like and capture that and features So we really wanted to make that as easy as possible for you Okay, this is a cool one right the rest of this stuff to this point has been it's been nice But maybe not amazing, but this is one aspect that I'm pretty stoked about How can I filter and display items? We all know views views I don't think any of us would argue against is is probably one of the reasons for Drupal being so successful It you know opens up the power of you know doing sequel queries for Site builders, but that power is not really available to content creators or to editors You know if an editor wants to get sort of hold of that power, maybe they could use You know one of those sort of views Pains that sort of exposes The view where they can you know, maybe type in a node ID or something like that to filter it But apart from that it's pretty difficult to expose the power of use to editors So let's think about that for a while. How can we solve that problem with paragraphs? Well, we've seen that paragraphs are fieldable and that they can collect information Why don't we take that paragraph and that information that we've collected and tie that into a view and then allow Editors to basically define what content they're going to pull back It's pretty powerful this as an idea. So Just just show you a quick demo For the cryptically named views filter object, okay, so here we have our demo site again and We've got three nodes so these are three recent demo nodes with a tile display and And please excuse me for the thank you that just doesn't have an image But what we're seeing here, this is the output of a view and this view is a has been filtered by three We want three items coming back We want to have demo nodes. That's a content type and we want to use a special display on that view called It's tile display and we have those three results coming back And this has been done with what I've called a filter paragraph, but you're free to make any old Sort of paragraph you like so long as you can sort of define the bridge between it and views This next paragraph we see is our six recent landing pages with stack display So we've just got another view mode called stack a view with a display called stack display and This time where we want six items back for landing pages What we are seeing here is the exact same paragraph using the exact same view But just collecting different information from the editor so We just Go edit And we'll just have a little look It's not really too spectacular the edit form here, but You can have a look so this is the node filter. This is the first one And we can just see here very simple, you know the editor comes in They selected the demo the type of node they want They select the count and they suspect the you know, select the display Behind the scenes, there's of course an array that is basically mapping this paragraph into the view And as a site builder if you define that you will enable sort of this stuff just to work magically for editors We've we've implemented this kind of thing for two clients a media company that uses it it's really heavily and And another sort of content site where they wanted editors wanted the ability to to get different result sets back And they absolutely love it and you know This is I think a really a massively powerful thing that you can do with paragraphs So, you know one of the clients we've been talking to they've got all these crazy designs They've got a solar index search API View and the the information we collect we can collect, you know queries tags categories You know different sort of layouts and all that stuff collect all that get this amazing result set back put it on the page boom So imagine, you know content editor writing an article on oh here is an article on category X and tag Y They write their article and here's a you know the late latest 10 items for that You know, so it's a way for editors to really augment the content that they're putting on the page So yes the views filter objects are still a sandbox I've still got to get that up as a Contrib probably needs a little bit more documentation, but basically the codes there and ready to go Okay Finally we get to the the title of the talk right can it do parallax or custom backgrounds It didn't take us very long to realize that once we had this edgy stuff all sorted out that we could start doing some really cool things with that It's not just putting classes on and you know, maybe doing changing the color by class But actually we could get dudes parallax effects. We could do different image backgrounds We could choose custom colors. We could even put video behind it, right? So there's a lot of stuff that you can do once you sort of have got these edgy sort of paragraphs working so I'll just show you Man, I just always got a control click control click. Okay Alright, so the entity background module. This is the one that does the magic here So I'm just going to scroll through here and we can just sort of see a little bit of parallax action So here we have in a paragraph. This is just an ordinary old content paragraph And we've put an image on the background a parallax image. It's a little bit subtle But you can see that bicycle is moving at a different speed We've got another backgrounds that we've implemented just color. I know that's fairly run of the mill But it's very handy in some circumstances and we've also got an image background happening there as well So basically we've come up with a pluggable system to put different backgrounds onto paragraphs We'll have a look at the interface This has been implemented by sort of C tools plugins and the the config is actually stored on a field collection. So there's a little bit of Magic going on in the background here. Just have a look at the settings And you can see here. We've got this background section and We've decided to use a parallax background here We could have used image or color. So it's just a media field We've uploaded the image and that's basically the way that one works As you can probably guess with With the background image, it's a very similar case. We've got an image and we've uploaded the image with a media field and Where did that color one go? There's the color one Yep similar thing with color So I mean this is a pluggable system if you can invent different sort of backgrounds that you want to implement Go ahead So that's what I didn't want to happen. Okay What happened to that control click? Hey Sorry about this guys. So yeah, when we were implementing this this we didn't want to actually go away and Sort of build a parallax sort of paragraph. We did want to do it in a In a pluggable way and that's the beauty of this entity background Is that you can put any one of these backgrounds on any paragraph that you've defined? So it is a very flexible way to to basically augment the standard paragraph How does it work? Well, I just said it was a C tools plug-in Basically, yeah, you just sort of define your plug-in and that plug-in receives a selector, which is a CSS selector and The field collection and as I said before the field collection is actually containing that background configuration In order to get this selector working We had to we've got another little module called I think it's like paragraphs ID or something like that Which injects, you know a class onto the paragraph just so we can target that in the CSS So basically these are C tool plugins. All they really know about is the selector and the configuration They're not writing any content back onto the page They're really just setting JavaScript and and CSS and targeting in on that selector Okay, next question. Can I alter the behavior of paragraphs now to be fair? No client ever really said that it was said between me and Ivan and I Standing standing round the whiteboard sort of shooting the breeze on this kind of stuff But yeah, basically we realize, okay, we've got the paragraphs now Let's do some, you know some, you know interesting things and get these paragraphs to do some stuff So basically we just sort of took a cruise around the web and try to find some cool JavaScript libraries to you know to do some interesting things So Here we have entity behaviors and this is where like the the scroller stuff comes in So before I start scrolling on this page I'll just say the scroller module is a JavaScript library that takes The position the scroll position of a page and basically sort of maps that into, you know attributes That are applied to elements and then then sort of various effects take place according to the scroll position of the page So Here we just scrolling down the page. We have a few paragraphs here. You can see we're just doing a few simple effects Doing changing the colors Making the images appear mucking around with sort of alpha channels If I just go slowly on this one and see get a nice little effect there with an image fading in over the other there is a little bit of sort of Sort of trickery not trickery, but you know, there's a few things you've got to do to get this to work But basically what we're doing here is is opening up You know a lot of possibility for editors to be able to to tell their story in a simple way We've got another behavior here height that's pretty boring, but basically you can set the height to for different paragraphs for presentational means So yeah, there's a lot of power that's that's sort of opened up here We can have a look at the the edit interface for this It's very similar to the the background one that we've we've already seen So we'll come down Let's go into the settings for this one This is pretty hardcore, right? You'd have to you'd have to really know what you're doing If if you're using the scroll or thing, but basically you're setting different sort of data attributes on the on the the paragraph div there and Yeah, then those sort of transitions are taking place according to the scroll position So there's probably a whole stack of other stuff you can do with these entity behaviors as well It's really up to your imagination and really what the client wants Yeah, so there's a project for that one as well the entity behaviors module and It works in a very similar way a C tools plug-in that takes a selector and the the field collection as well To to configure it. Okay. How can I provide navigation between paragraphs? once once we're in this sort of this world of you know having these edgy paragraphs and You kind of start thinking well, this is pretty good model for doing single page websites, you know like we could possibly you know open up a whole sort of world of possibilities here where you know Editors content creators can just come along and add paragraphs as they like How are we going to handle the the navigation for these guys? So, you know, we decided just to make a simple little module that will basically create a block for the for each each paragraph item that's on the page and you know this kind of Replicates a little bit the you know the the normal sort of menu or Menu block kind of thing that you would typically do. This is basically the way you could do it with paragraphs This page doesn't actually have a Menu on it, but I'll just show you This particular demo page here This is very subtle this this one here, but you can see over on the right-hand side. We've got you know Sort of the menu there. So it's a very simple sort of list element The design for this is basically ripped off the Apple website. We just wanted to sort of You know show something similar to those lines. So there's another JavaScript library called scroll it That's operating in conjunction with this just to do this kind of navigation Of course, you are free to put your own CSS into this stuff to get this stuff Working the way you like, but yeah, you could also put this block up the top of the page as well and have a more familiar sort of menu bar kind of thing working as well So yeah, that's basically another little tool we can do that to build out single page websites if you so desire and That particular module it's still in sandbox radium is working on that but yeah That one's working pretty well at the moment Okay, bringing it all together. Let's let's have a look at this kind of stuff and And just a couple of the demo pages that we've done just to give you guys an idea of some of the stories you're able to tell With this toolkit. So here we are on the demos page This is a sort of a demo page put together by Chloe Just once again, it's got the carousel they're the edgy design with with basically the grids in the WYSIWYG and You know, just a few other sort of content paragraphs here. That's a fairly simple kind of Approach, but you know, this really tells you know, I think a nice story and in a pleasant way You can see this this content is actually like chunked out content And if anyone went to Jeff Eaton's talk today, you probably would have heard Jeff talking about The narrative and the body field and the narrative that exists inside it in and I do agree with him paragraphs do kind of break up that narrative a little bit but if If your content is kind of chunkable in this kind of way, it certainly is, you know, a good way to tell That particular story We'll just have a look at another demo we've done This one's been put together by Peter Peter actually went away and did all the cooking the photography and put this sort of page together So he went above and beyond For this one. So yeah, we can see, you know backgrounds edgy sort of background stuff there Got a little bit of parallax thing there. I laughed the first time I saw that I thought that was that was quite sweet All these interfaces that this just delighting me We got yes, just just another sort of content one here a little bit of kind of scroll or action there that like the before and afters That might be, you know, I'm not really showing on the screen terribly well, but yeah, that's that's quite a sweet effect and You know just a little bit more stuff and a parallax with a like a negative image on there So, you know, I was really surprised when I saw that I thought yeah, that's a pretty cool page You know and you know that was put together just by you know coming up with a few ideas an editor that knew what they were doing and Just putting it on so, you know, there was no theme or involved in in building this page the site builder and themeer had done the work up front and then the editor just comes along and drops this stuff into the into the page and Have a look at the last one. This is just a little bit going over the top But just showing some some crazy sort of scroller effects that you can do just mucking around with alpha channels Doing sort of some rudimentary animation there He eats all our precious blocks just doing a bit of sort of Text sizes there and stuff, you know, so you can play around with that stuff as you like So, you know, you probably don't want to go overboard on that But yeah, it's just some of the the possibilities you've got there So yeah, just before I move on from that slide I'd really like to emphasize that what we're giving editors here is the ability to tell stories That's that's primarily what I wanted to do when we were you know setting out with this stuff Like I really wanted content creators, you know artists Marketers these kinds of people to be able to get a Drupal page and just do some cool stuff with it Putting up, you know images and graphics and you know really trying to tell a rich story to communicate to the to their audience Alright time for a few reflections still got still got a bit of time to talk about this kind of stuff. Ah Okay, how can I best tell the story? Well, I just spoke about that But I think when when we started out on this journey We were really trying to solve some technical problems on how to achieve, you know Some layouts for various clients and you know what we've ended up with is you know a bunch of modules that are working together really nicely to To you know allow editors To tell their story to give them more freedom and more creativity So I think you know Drupal is great at sort of data modeling with you know fields and entities But a lot of the time, you know, that's that data model is defined by an information architect or the site builder What we're trying to do here with paragraphs is to give editors a few tools for them to sort of break out of that Those confines and to basically put stuff on the page as they like where they like and hopefully do that in an interesting way Now, of course, I do sound like a paragraph fanboy. I think I'm kind of known for it wherever I go people say Paragraphs that's all they want to talk to to me about but there are some downsides and it is worth mentioning them This presentation that you're seeing today is actually all done as a single page website in Drupal with paragraphs I kind of wanted to do the presentation this way just to basically push the envelope and see how far I could take it I think the the outcome has been it's good. You know, it looks good on screen However, I think it's fair to say that I did run into a few issues with dealing with paragraphs And I'll just go through a couple of those Firstly the node edit performance can suffer when you have a lot of paragraphs on a page So, for example, this particular presentation has 30 paragraphs Every time you add a new paragraph Drupal will basically do an Ajax core off into Drupal and that form will be built out again These forms are very complex things and it takes a lot of CPU to to build that form and then to send it back to Drupal So basically your server is getting hammered At least as far as I can see when these big forms are being sent back And I think I've seen people you know in issue queues with field collection have similar problems And I think it's it's something that's you know paragraphs will run into as well So I think if you're dealing with you know five six seven paragraphs on a page It's not really going to hurt you But if you are dealing with a large number then you know, it's probably not the best thing in the world Secondly, when that big chunk of data comes back, I think the client gets hammered as well I'm not sure if it was just you know the amount of memory or the DOM being manipulated or maybe it was all the the ck editors on the page But basically yeah Drupal has the the client has a bit of a tough time rendering out these massive forms as well Also in terms of the editing experience you can see when I've been building these Sort of paragraph bundles out. I've been using the field group just to group them and make them a little bit more compact If you don't use that kind of approach, you will get kind of you know, quite big forms Going down the page that can be difficult to understand where you are or difficult to drag around So that's a little concession I've had to make to try to get that user interface looking sort of nicer But you know at the end of the day, I think it's working quite well You can still sort of see nicely where you are and move those things around There is no preview when you're doing this stuff. There's no sort of graphical sort of concept of what you're doing when you're dropping this stuff on the page So I think you know That panels in place editor has a much better experience in sort of that kind of realm And finally, I do want to say panels is much more powerful I think a lot of the stuff we're doing here is We're kind of taking paragraphs and trying to trick it up to do some cool stuff and we have But if you go into the panel's world, you have an insanely, you know Much larger amount of sort of flexibility and power available to you now The panels world I think that's great, you know for site builders at least that's the way I see it and I think if I was going to build this presentation again I probably would do it as just one massive panels page Because you know, I'm a site builder and I can understand that kind of stuff Nonetheless, I think that paragraphs really does, you know have a very important place for giving editors that flexibility and that power So I would I would just argue that you know Different different audiences different approaches and I think that the paragraphs approach is still worthwhile But if you want some super powerful interface, then you know, the panel's world Would still be preferable Um, Jeff Eaton gave a really really good Presentation this morning and hopefully you guys caught it. It's definitely in the the same realm as as what I've been talking about today Um, Jeff's been talking about this thing this kind of stuff for a number of years You may be aware of like the blobs versus chunks sort of conversations that have been going on Um, and Jeff made a few remarks about paragraphs saying that, uh, you know, they can be good in certain Use cases but not so great where you want to have that narrative going down the body field and you know, I do agree with him with that But I think that uh, yeah paragraphs do perform really well when you're wanting to Add either chunks of information or maybe just, you know, adding stuff to the bottom of the body field such as You know a query or a gallery or or something like that as as we've seen So yeah, I think paragraphs does still have a role to play in this world What I've shown you today has been largely presentational. It's really been uh, sort of a presentation where I haven't really sort of Spoken about fields or sort of semantic stuff So much and I don't want you to think that I'm kind of dissing Sort of traditional data modeling with Drupal That's why I came to Drupal was cck and of course I love sort of fields and that structure that you can build So as site builders and information architects, of course, I encourage you to still model your data as best you can But just think about using paragraphs to augment that Structure so that you give some power back to the editors So you can kind of see it as a little bit of a power struggle, you know, you have You know site builders defining structure, but the editors want to do sort of crazy things This is a way to allow editors to do those crazy things Uh, yeah, so the the point here content creators have the freedom to augment the structures of the information architect And I think that's a really important point and it does give the the client often the power that they're looking for Also with distributions, you know, these are famous for crystallizing You know data structures in features and if you try to, you know, change anything you're going to be getting overrides Introducing paragraphs into that kind of world is a way to really, you know, sort of free up that distro To do some cool things in a pluggable way But without breaking that sort of underlying structure that that you've got going on there What we've seen today is is also a combination of approaches So I've shown you paragraphs, but you've also seen some tricked out whizzy wig fields where we've had the grids Um, we've also had some little counters and see, you know, some other special effects That was yeah, basically stuff going on in the uh, in the whizzy wig So it's not just paragraphs that's doing this stuff It's it's just sort of, you know, the ck editor with different sort of plugins doing some cool stuff as well I would also like to Mention atoms and and scold. I don't really have that much experience or zero experience with it, but I can see that um Allowing people to embed Entities into the whizzy wig with something like scold is going to be, you know A pattern that is going to be very powerful in the future And I really see kind of paragraphs and scold sort of sitting, uh, you know In pretty much the same thing fieldable entities with structure One's living in the whizzy wig one's living outside the whizzy wig, you know So I can see these two ideas working in in conjunction A lot in the future All right, well, that's um, that's pretty much the the end of it before I finish up though. I would say Um that this presentation Is available on the web. It is a Drupal website made with paragraphs Um, and I would also encourage you, you know after the presentation today just to to check out this the session Um and and rate it and and to leave some comments and some feedback for me that'd be really much appreciated And finally there is a boff on this stuff, um on thursday So if you guys want to you know come along and chat about it and talk about the possibilities And maybe find out a little bit more about what's going on in the back end Or if you've got a few suggestions, you know, I'd love to to see you there And yeah, this is a youtube video background that's um being implemented on on a paragraph Okay, everyone. Thank you very much So, uh, this sexy little counter you can see when I was building this page out a month or so It's been counting down all that time. So It's really been stressing me out actually I've only got 12 minutes to go and you've got 12 minutes to ask some questions. So please Step up to the mic there if you'd like to ask any questions I had a comment more than a question, but just like in the most recent version of paragraphs I know it lets you actually collapse the paragraph items Which I think will solve some of the problems that you were trying to solve with the The sections within it And it actually it gives you a view mode that you can define for what the item will look like When it's collapsed, which is pretty cool. Yeah. Yeah, that's cool. Yeah, I knew that was sort of going on But yeah, I didn't know that that had actually landed Cheers two questions one was about A load time. Do you guys do anything with lazy loading or kind of dynamic loading with any of the content? No, basically that stuff is Yeah, it's just built, you know in yeah on the server and and served out So, I mean you probably could add lazy loading for the images if you liked, but yeah, we haven't done anything With the paragraphs one of the ideas I've kind of been flirting with is is having a lazy loaded paragraph That does work off state that is stored in the client, you know So I have been trying to think of ways to do personalization or something like that based on Sort of uh, cookie information or something like that I've kind of been thinking about it But I haven't really come up with a you know a way to do do that But I think that could really yeah open up a lot of possibilities And then the other question is that mobile is uh, how does this stuff react on different size screens? Yeah, so all of the stuff you've seen here, you know is responsive You know it does work on on mobile stuff But that's that's really comes down to totally the the theming layer and how you've implemented your grids and your your theme So, you know, if you've got that stuff sorted with your theme and your view modes, then you're sweet But yeah, it doesn't really come into the paragraph stuff itself Thank you. Cool. Hi there. Hi. I have a question about the edit interface for paragraphs I spent a lot of time about a year ago Experimenting with paragraphs got it all set up And I ran into some of the same exact stuff that you described in terms of the drawbacks And one of the main ones was that Once you started adding some number of paragraphs the the edit form page is like, you know So tall for scrolling purposes and when you want to add more paragraphs very often I mean depending on how you've got nesting setup or whatnot. Maybe they're showing up where you want them to Maybe they're not you've got the drag and drop interface and that gets kind of squirrely So I'm curious to know if you've Worked on any solutions with that then experimenting, you know, you see stuff out there like Squarespace or whatever you can just hover over something and click and it goes exactly where you want to and I thought Well, what if you could do something like that with paragraphs and a little menu pops up And it's the paragraph that you want to add or I don't know. There's all kinds of things that one could do So have you spent any time working on anything like that? No, we haven't so I mean as you've seen we we try to do the the field group thing just to keep it compact and A former question of they did mention that it's now possible to collapse paragraphs and to to have a To have a view mode showing a preview. So I mean, yeah work has obviously been done to uh, yeah to help out with that But I do agree. Yeah, if you've got a page with 30 paragraphs on it. It is unwieldy and it's difficult, right? So, you know, I think so long as the content editors are not going too crazy with it It will you know remain you can handle it. But yeah, you don't want to push it too far. I don't think Good work on all the sub modules man looking great, man. Thanks, man How would you do like apis and things with paragraphs? Would you just put it out as a separate item or Somehow attached to the body field or have you have you come across that? How how are paragraphs? Yeah, does it can act like as the body field for Like a restful api output or something like that or even on an xml feed? Uh, well, I haven't I haven't looked at any of that but you know, obviously it's an entity, you know It's it's on of on a field. So there is that kind of nested data structure there that you would have to Traverse down if you're going to output that stuff. So okay, so you just have to handle it kind of as a separate field from body Yes, that's right. Yeah, you got your body field again. This is like a separate sort of field. So Yeah, thanks cool, mate Hi, uh, just really appreciate this module. We actually just developed something very similar to this We didn't find this contra module before we developed this. So this is very exciting Interested to know if you've integrated entity queue Or node queue into this Well, I mean interestingly enough, I don't think you we didn't really feel the need for that because if if you're using entity reference You know on unlimited you can basically drag those up and down So that that is an effect kind of queuing stuff in a in a way The the thing with paragraphs though is it is attached to the node like the state that you it's like content That belongs to that node. It's not really content. That's reusable Across different Nodes, I mean you could you could probably implement and we have done this so pulling in beans and stuff like that But it's it really is belongs to the node. So you're not really getting that reuse a node queue Of course, you could reuse across the site, but yeah, I if I was doing it I would just be hard baking it in as a entity reference unlimited on the the paragraph Yeah, our use case was if we wanted to Have one list that we wanted to reuse and be maintained from one area That's where that benefit would come. But yeah, that makes sense Yeah, that's right And you know for for some of those things we could go Oh, let's go away and implement that and then you go, oh man This is I'm just re-implementing like panels or something like that You just you kind of you kind of got to raise a red flag at that that kind of thing But yeah, I mean if you really wanted to do that, of course, you could kind of build that if you wanted to Yeah Hi there. Thank you for the presentation I just a one comment because colleagues of mine they They did a similar approach Like it works like you would expect from the paragraph thing But they build it with just The really most used or a lot of most used Drupal modules like entity reference and and view modes and and custom entities and They achieve the the the same functionality and the nice thing about it, you know, it's not Better or anything, but it's nice thing nice thing about it is it's almost Drupal 8 ready because those entity reference and view modes and entities Come all on board with Drupal and they just had some Tiny modules to show the the view mode selection on the on the entity reference field They call the thing fancy and there's a fancy kickstart Distribution if you want to try it out on simply test me or so It's it's kind of nice and it opens up for a more, you know Builder experience to to that, you know Because it's just plugging together some modules and so you have more Possibilities if you want to do some custom stuff there Okay, so that was the fancy distribution. Yeah fancy kickstart fancy kickstart distribution and there's the fancy something But you know you'll find it on Drupal.org Yeah, but I don't really think that's an issue for paragraphs. It's an entity with fields I that should upgrade pretty well, you know, the paragraph module is Being prepared for Drupal 8 so I don't think you should have too many troubles there. Yeah I was wondering if you have any experience or With using Views like is there is it pretty straightforward that you can like say filter based on a field That's on a paragraph. I could imagine that being a challenge Yeah, well, so that that was that views filter object module that I was I was showing you that's kind of the way We've we've tied it in no, I mean I'm the other way around say that you wanted to create a view that was Um filtering nodes That based on a node that had a paragraph with a certain field value. Yeah, right I've I've never actually done that and I would say yeah, this is a weaker. It's much weaker data model Obviously, you want to have the field on the node. That's kind of much more reliable than then searching through a list of paragraphs looking for a certain bundle and then trying to get get that value out So yeah, if you if you want to do queries like that, it's probably not so great. There's a guy over here says you can do it Yes Yeah Yeah, yeah, I'm so I'm sure you you can do it, but it's I was just imagining that since each of the paragraphs are different Entities essentially that it might be complicated to get the sql to To match up correctly, but I guess someone figured it out. So that's cool Cool. All right, anyone else three minutes All right, thank you so much everyone. It's been an absolute pleasure. Thank you So Mike Morris came over to Sydney and we we had a chat to him. We had a yeah, we had a beer with him I've been out Had a barbecue with a few of the other phase two guys. That was about a year ago Yeah, yeah, we never did any work for you, but we're kind of talking to Mike about it a little bit, but uh, Yeah, I'll definitely come by and have a chat. Yeah Cool She was somebody who's managing that and they may say, oh, well, there's there's this new recipe that I want to add in there and have that show But right now they'd have to go into like a separate part of the You know, I think so I have his break within the paragraph thing for that block to just have a fun that says Yeah, and that's what that inline attitude But you could kind of rebuild that functionality by having But they see that module at the corner so you can actually create but sounds like what I'm talking about Yeah Okay, man. All right. Look at this man. I gotta wait for my 10 seconds. I give him my 10 seconds I want to see this baby go to zero Okay, that's all right, man, I didn't expect that either So I'll just unplug yeah, there we go, man. Sorry about that