Drupal 8’s Field Layout is an Alternative to Display Suite
In Drupal 7 to create custom displays, you would probably use Display Suite.
Drupal 8 just added a potential alternative to the Display Suite in the core experimental modules. The Field Layout and Layout Discovery modules will allow you to assign a layout to specific content types.
In this tutorial you will learn how to customise the display of content on a content type level with the Field Layout and Layout Discovery modules.
- Enable the Field Layout module.
- You will be warned that the Layout Discovery module is also required. You’ll also see a message that experimental modules should only be used for testing.
- Now we need to assign a layout to our content. For this example, we will use the article content type that comes with Drupal core.
- Go to Structure > Content types > Manage Display
- Below the normal options, you will now see that ‘layout settings’ is available.
- Select your preferred layout. I have chosen the 3 column option.
- Click “Save”.
- You will now notice that under Field you see titles for the regions available from this layout as shown below.
- To change the display, simply drag and drop the item to the location you wish to use and save the layout. Normally images load on the left. For this demonstration I will move them to the right.
- Click “Save”.
- Now if we view an article, you should see that the changes.
This is a very fast and easy way to customise the display of content on a content type level. You can even add to it by making your own layouts.
It also works with the Paragraphs module allowing you to assign content to regions within the various paragraph types. Once officially a part of core, this will be a very powerful and fast way to apply layout changes to your Drupal content.
Thank you, Daniel.
I have one question about the module. How can I add custom layout template for Field Layout?
Can I do this in theme, or I must write custom module for this?
That is a good question the layout discovery module should detect any layouts you have in your theme so that would probably be the best place to do it. Or add them directly to the folder.
Thanks for this! My site broke when I updated it, since DS is changing to Layout Discovery and not everything was updated at the same time. Could not view user profiles (which is what I was using DS for in the first place), even though I deleted everything. When activating this module I was able to split it into three regions, and it was working again as well! Thanks a bunch! 🙂
I have one question, however. Is there any way that I can add css-classes to fields using Field Layout? I would like to increase the size of the font for some text fields, as well as a few other small changes.
That is more of a theming option. The layouts can be edited they are twig files with a little CSS you can find them in core/modules/layout_discovery/layouts
Thanks for the fast answer! For the time being I added CSS for the fields spesifically, but will look into the twig-files! 🙂
You are welcome Lars 🙂
I’d be interested to know how you get on with it.