 Okay, hello and welcome to this presentation on understanding the field system in Drupal. I think it is time to go, or just might as well get this party started. A lot of empty seats here, but hopefully this makes it a bit more intimate. Yes. So just a bit about myself. My name is Ivan Zhugets, and I've been a web developer, but specializing in Drupal for about 14 years. My first version was Drupal 4.6, and I only chose Drupal because Drupal offered clean aliases out of the box, whereas other CMSs like Joomla, I think you have to pay for it. And then it's been a great journey ever since. Last couple of years, I've been doing other things, but Drupal's the number one. And in this photo, I still have hair, which is the good old days. So what are we going to talk about in this session? Well, we are going to discuss the field system, which is, in my opinion, the most important and powerful system in Drupal, because trust me, I've looked at other CMSs out there, all the fancy ones now, but the ability to create content types and fields and build out your content model in a standardized way is actually very powerful. So we'll first look at how content is stored. Then we'll look at the three parts of a field. Then after that, we'll do a bit of a demo, a live demo, so hopefully nothing goes wrong where we actually build out a content type and chuck a few fields on it. And then we'll finish things off by looking at a few modules that are focused around fields. And I couldn't fit everything in there because I've only got half an hour, but let's try and get through this. So the first question is, how is content stored in Drupal? Nine times out of 10, content is stored in a field. Yes, you can write a custom table and write your, you know, an insert and update in code, but nine times out of 10 on most Drupal sites, all your content is stored in Drupal. So if you log into a Drupal site and go to admin, what is it? Content add content, you will see these content types. Now these are just the two out of the box. Of course, on a decent size Drupal site, you're going to probably have, I don't know, 10, 12. And when you go into these pages, here we have basic page on the left. You have title, body, and also a published checkbox. Then for article, you have a title, image, body, and also tags. Now, one thing to be aware of is that content types are just used to contextually group the fields. The content is itself is still controlled by the field. So if you want to create a page, what you can do is go to basic page, put in a title, put in the body, publish it. And then on the front end, you get a basic page, essentially. But as I mentioned, the content itself is still stored in the field. Now fields can be attached to many things, not just content types. Now in Drupal, I think this was, when it was a fieldable entity, it was probably like Drupal 8. So taxonomy terms can have fields attached to it. Comments also uses as well. Contact form. And if you install any other module, like I think Drupal commas, that you can also attach fields to it. Now the best thing about the field system is that the way you add fields to a content type is the same for taxonomy or for users. The UI is the same. And this is why I like Drupal because fields are supported by core, which means there's a standard UI across all of these platforms. Now in other CMSs, they kind of implement their own, every plugin or module implements their own type of system. But in Drupal, it is standardized. So now let's talk about the three parts of a field. So we have a type, the field type, the widgets, and also the formatter. Let's take a look at type. Now a field type defines the behavior of a field. And this often focuses around the data type, what you want to store in the database. So here you can see all of the available fields on a standard vanilla Drupal site. Of course, if you install a whole bunch of custom modules, contrib modules, you will get more of a selection. Now, if you want to handle number values, you would select something from the number section, which can be integer, float, decimal, also a list as well. If you want to handle a text field, if you want to attach a text field, you would select something from, can you guess it, the text section. That's probably too low. Well, there goes all that. It's right behind me. But yeah, so that can be a formatted long, which is an editor. It would be just a plain text field. But fields can also add in a brand new functionality. So if we take the comments field, for example, if you want your content type or your vocabulary or any type of fieldable entity to handle comments, all you need to do is add in the comments field on the bundle. And then straight away, you get commenting functionality. So fields can be as basic as a Boolean field, which is just a checkbox, or it can chuck in a whole bunch of new functionality. Then we have widgets. Now, widgets are the configurable elements that are used to enter data into a field. So that could be a input field for, say, title. It can be an upload field for an image. It can be an editor for the body field. It can also be a custom auto-complete widget for tags. And then finally down at the bottom, hope you can see it, we have published, which is the most important checkbox. Then we have the formatters. Again, these formatters are configurable elements that are used to render the data to the end user. And this is where you spend most of your site building, implementing custom designs, moving things around. So title could be an H1, H2, H3, whatever you want. You could also use the thumbnail formatter to automatically resize your feature image. Then, of course, the body field, you will display just your renderer all out. And then finally, with your tags, you will render out a list of terms. So let's say, for example, you want to add this editor, this editor field, to your content type. What you'll need to do is select text formatted long. Oh, there we go, perfect. You can, you'll select text formatted long with summary. Now the difference between with summary and without is just that you can specify a summary. But this will give you the actual CK editor where you can write in long form content. And then it'll give you the editor right there. You can adjust the widget whichever way you want. And then on the front end, it'll simply display the whatever has been entered into the editor. All right, now it's time for a demo. So let me switch over and make sure, what, not that, switch over, no, not that. There we go. And I should have started from here. All right, perfect. Now I do have my notes here because there's a bunch of stuff I want to get through. So what we're going to do now is create a, create a basic content type called product. And we're just going to attach a bunch of fields to it. Let me just jiggle this around to stop the flashing. The screen's flashing, right? It is, isn't it? These HDMI sometimes just get a bit finicky. Okay, stop. All right, great. So what we're going to do is just, yeah, create a content type called product and attach a bunch of fields to it. So to create your content type, you first go to structure, content types, and then here you can manage all of your available content types. We have basic page and article. These are the standard ones, but you can then go ahead and click on add content, add content type. I'll add in product as the label. You can change the machine name if you want. And then I'll give it something original such as used for products. And then below you can adjust a few options such as the title and adjust the title. The preview settings, the publishing options, if you want it default to published or not. And then you can also have the ability to attach products to the menu system. But let's turn that off because it's not really necessary. Then click on add and manage fields. Now, from the manage field section, you manage your actual field. So you add and create them. And this is where I was mentioning that the UI for managing fields, widgets and formatters is the same across all other entity types. So here we have a manage fields where you attach your fields, manage form display where you attach your widgets, manage display where you attach your formatters and sort that type of stuff out. And then in Drupal 10, I noticed that you get managed permissions where you can manage your actual permissions but that's a whole other presentation. But it's good to see. So, and then also, yeah, you do have the body field. Now this body field was automatically attached. I didn't enter it in. So Drupal has a bit of code that just chucks in a body field. Now you can go ahead and delete it if you want. It's up to you, but we'll keep it in there. So what we need to do is create a bunch of fields. So the first one we're gonna do, seeing that this is a product, is adding in a price field. So you click on add field, select add a new field and then let's choose number float. I'll add in a price. I can adjust the machine name and but I'll just leave it as it is. And then click on save and continue. Save field settings. Let's make it required and then give it a dollar sign and because we're in New Zealand, New Zealand dollars and then click on save settings. Okay, that is the first field. Now let's add in a tags field so that editors can tag content. But instead of creating a brand new field, we're gonna reuse an existing one. So Drupal allows you to reuse existing fields from other content types. Now the standard installation profile creates article, which then creates a tags field. So we are going to use a standard. We're just gonna reuse the tags field. Now, when you are doing your side building process or you're mapping out your whole content model, do think about what fields you wanna share and what fields you can actually reuse. So we select tags. Then you need to let's create reference entity so that we can create tags from the get go and then we will select tags as our vocabulary. Then click on save settings. Then the next field is going to be category. So we're just gonna add the ability to categorize content. And for this, I will use the list text and I'll type in category. And then here in allowed values list, we define our options. So we first, let's first put in our key, which will be Drupal, then put in a pipe. It's probably hard to see. Where is it? That little bit over there is a little pipe and then put in Drupal. And I'll make another one, call this one React. And then last but not least, let's put in WordPress, why not? And then click on save field settings. Let's also make it required and then save it. Now the last field we're gonna add in is a featured image field. Click on add field and what I'm gonna do is select not image, but media. Now, you will only see this media option if you have media, if you have the media module installed. But if you are going to have the media module installed, make sure you have media library because that gives you a nice interface for managing reusable assets. So I'll call this one featured image. And let me make sure it's not only one space because my space bar is not working on this. All right, there we go. And then click on that. And here we selected which media top we wanna handle, which is image. And then instead of getting a upload, you get this nice little pop-up where you can select your items. And I think nowadays, you should really be using the media, the, you should be using a media field no matter what. Only media types should be using the image field because you can reuse media assets. All right, now that we have added in our fields, let's take a look and see what this all looks like. So let me use this tab and I'll go to here, add content. And then we have our product, which is great. And now we can see all of our widgets. You can see all the fields are kind of mishmashed together. So what we're gonna do is reorder the widgets using the managed form display. So let me jump over here to manage form display. And what I'll do is all I need to do is click and drag. So I'll move featured image to the top under title. You can also, if you click on this show row weights, you can adjust things accordingly as well. But I prefer to just click and drag. So what have I got featured? I'll put price just below featured image. I'll put in tags up the top as well. And we'll also move body. And then finally, let's move category as well. Yeah, these track pads are the greatest when it comes to these. Moving things around. And the only change we'll do here is change this from order complete to order complete tag style. It just handles things a little different. And then also for your media fields, you wanna make sure media is selected. Media library, sorry, is selected so you get the nice little pop up. All right, click on save, refresh. And we now have a product edit form which is a little bit better organized. Now the widgets here on the right in this sidebar, a lot of them are hard coded. So they are hard coded to the right hand side. So if we come down here, you will see that we have authored on, authored by, sticky up top of lists and so on and so forth. All of those are hard coded. And then this published one is just at the bottom as well down here. So let's enter in a product. So just chuck a product in and then give it a price, select the category, give it a few tags. Let me scroll down so you can all see. Now I'm just chucking some dumb text and click on save. Now this is what our product looks like on the front end. All of these fields are rendered through the formatter. And you can see that the fields are kind of mishmashed together. Oh, I did not actually add in a featured image. Terrible. Let me click on add. And then here you get this nice little pop up. We can upload a new image or we can select something from our media library which I'll use. Insert that in, click on save again. And now we can see all of our formatters. You can see everything's kind of mishmashed. So let's now fix up the formatters and the way you manage them is the same as managing widgets. So move back up, go to manage display. And what I'll do is I'll move featured to the top, price, body, everything's looking good. I'll move links down to the bottom. I will remove the label for fewer of them and add the label for tags, price, and categories in line. And then let's resize the featured image so that you can upload any size image. But then when it gets rendered on the front end it will be resized because trust me editors will upload, what is it, three, four meg tiff files and then wonder why the page is actually slow. So you always, always wanna resize your images. Click on that. So no matter what, it's always gonna be resized down to 200 by 200. Click on save, come here refresh and we have a better looking product page. Of course, if this was a proper Drupal site you'll fix it up, style it, make it a little bit prettier but it gets the job done. Okay, now the other, the final part around formatters that I do wanna mention is that you do have these things up the top here, default and teaser. And what these are, is that these are view modes. So view modes allow you to contextually group formatters. So if you scroll down and click on custom, let me try and scroll a bit further down. Where's that? Oh, that's right. Here you can see all of the hard coded, well, the view modes that come with Drupal and only teaser is enabled. So here you have full content which is used on the actual full content page. And then you have RSS, search index, search index results. And when these view modes aren't enabled it actually defaults to this default option up the top here. So if we wanna adjust the teaser view mode which is displayed on the home page, we can easily just come along in here and let's move featured image above there. Add the price in. Well, not the things. Add the price in. Where's the price? Move that up top there. Let me adjust the cable a bit. Hopefully that will stop flashing a little polarized for that. No, it's still flashing, isn't it? And let's change the thumbnail so that again let's resize it, but this time we'll set it to 100 by 100. Yeah, everything's looking good. Oh, let's also trim it. So the long text formatters do have a few options. So we can always trim it, well, not 1500, add 150 characters and then we save that. And then if we wanna see what this teaser version of a product looks like, we go to the home page because I know that this view is displaying content using a teaser view mode. So when you're building out your Drupal site, think about all of the different view modes. Think about how your content will be displayed. Is it going to be displayed in a sidebar region? Well, then you may wanna create a block view mode or a grid view mode. Trust me, naming these view modes is one of the hardest things you'll ever do and also naming fields, but just trying to come up with a standardized way of displaying content can also help you a lot further down the track because then all you need to do is create a view, list out all your products using a teaser view mode and you're done. And then of course, when you're styling it, you wanna style it and target the CSS correctly. Now, the last thing we're gonna look at in regards to the demo is the ability to change the number of values. So let's go into our product. Right now, we can only select one category. Let's change this so that we can select multiple categories. Now, the way you do this is by editing any field and then go into field settings and right down at the bottom, you'll see this allowed number of values. Now, a field can have multiple values, okay? It's still a single field, but it can have multiple values and right now it is only limited to one so we can only select a single value. But if I was to change this to say two, you can change it to whatever you want or you can set it to unlimited, then we can go ahead and select multiple values right here. So you can have now three categories. So if I select three categories and click on save, we now have selected all of our categories. Oh no, the bottom part's black, that's why it's not. That's why I thought it wasn't showing. Okay, so now one thing to be aware of, okay? If you have changed the field to unlimited and you wanna change it back to a single value, you have to update your content because if I come along in here and then change this to limited to one, what's gonna happen is Drupal is gonna give us a nice message saying that there is one entity or it could be a hundred entities or a thousand entities with two or more values. So what you then need to do is go through all of your content and you could probably script this as well. Go through all of your content and then select a single value. Come along in here, select a single value and then just hit save and then it will allow you to change it. And then from then on, everything is then just a single value. All right, so that is the demo. I hope now you have a better understanding of just content types and fields and we're just gonna finish things off by quickly going through a bunch of recommended modules that you can use. So the first module that I would recommend is paragraphs. Now paragraphs allows you to create components and it is a great way to just group fields. And I've been using paragraphs for the last 10 years on pretty much every project that I've worked on and I've got a little video here that will just go through the process where you can, where here I've got two paragraph types, one called gallery, other one called I think content and you can see that each component. So if you think of each paragraph type as a component that you then attach to a field, you can have any number of fields. So you can see, let me just play that again. Click on, you add a gallery in, add a title, you can attach a media and you can do whatever you want. And so on projects that I've worked on we've had sometimes like 30 odd paragraph types. Then you have layout builder, which is the new and fancy way of managing your formatters. So instead of going to the manage form, manage display page, sorry, you, well you still go to the manage display page and then there's a big button saying editing layout builder. And that gives you a whole new interface for managing layouts and also the field widgets. Now here it does say block. Now don't get confused with like the block system, the block layout system. You can still, you can still attach fields to it, but fields are just implemented via a block. And then you add in a section, which is technically a layout. So your content types can have multiple sections with multiple layouts and then within those layouts you have regions and then within the region you have the block. Then we have field group. This is one module that I use for absolutely every project and field group allows you to organize your widgets because I've worked on some content types where we have 20, 30 fields, maybe even more. And often you want to organize them in a nice clean way. So using field group you can add in accordions, tabs, vertical tabs, horizontal tabs, whatever you want. And here you can see what the tabs look like. Managing, managing the field groups are easy. You just go to the managed form display and you can also, and then you just add in your tabs over there. Now this field is great for managing addresses. So the address field gives you three field types. So address, country and zone. And what it does is when you have attached the field you first select your country because every single country has their own standard for addresses and then it adjusts the ISO, the actual available fields for each country because I do believe each address, like the pattern of it is an ISO standard. And then finally you have order complete deluxe. This actually makes the order complete a widget much better. And it gives you a nice little, what are they called? Peels that you can just search for things and you can drag and move things around and it's just a better experience. So yeah, this is one of the modules that I always use because you can just chuck it in your Drupal site because chances are you will have an order complete. All right, thank you. That is it. Now questions, you don't want to have any pressing questions about the field system or they want to give me their real opinions about paragraphs. There's still, I've had many discussions about paragraphs where some people say it's a bit heavy but I like it. For the recording. So the question was getting data in and out of Drupal and the use of magic methods. It's the alternatives of getting data into and out of a field in a code. Wow, what are the alternatives of getting data in and out of a field? Are you referring to the actual field API when you're writing code like the get set? Yeah, so yeah, Drupal has a few ways of doing it. I know that you can use, what is it, the set method but you can also have a property because when you load up an entity, each field has its own property. It's hard to show it without an example but yeah, there are a few ways of doing that. So if you want to, I do know if you want to attach a bunch of entity references using an entity reference field, you can just grab an array of Drupal entities and just pass it to one of the fields and nine times out of 10, it will work but yeah, there are a few ways of doing it. You just have to see which one works best for you. But yeah, it can be a bit unnerving when you're first trying to learn all this stuff and seeing one module does it this way and another module does it that way but yeah, there are a few ways.