Creating Resources

Before we can add content and use it in our site’s front-end, we need to define the management tools for it. This process is done entirely within the control panel—no coding is required to create new content types!

Our content outline included an About page and a place to keep global site information—we’ll circle back and work on those after we see the blog through.

# Creating a Section

Our first order of business is to create a section for our blog posts.

tutorial.ddev.site/admin/settings/sections/new
Screenshot of new section fields
A
B
C
D
E
Settings for the new blog section.
  1. In the control panel, choose Settings from the main navigation.
  2. Choose Sections from the “Content” row.
  3. Choose + New section.
  4. Enter “Blog” in the Name field.
  5. Leave the rest of the default settings as they are, ensuring Section Type is set to Channel.
  6. Click Save and edit entry types.

Craft will automatically generate values for the Handle , Entry URI Format , and Template fields. These will come into play in a moment!

You’ll be dropped into the Entry Types tab of your new section’s edit screen, and should see one entry type, named “Default.” We’ll come back to this screen once we’ve created some fields.

# Supporting Features

We’ve addressed the first item in our content model inventory by creating a section for blog posts… but the content model we decided on requires some other supporting features.

Let’s walk through creating each of those components:

  • A volume for storing images;
  • An assets field to attach a primary image;
  • A plain text field for post summaries;
  • A categories field to organize posts;
  • A matrix field for posts’ main content;

# Create an Asset Volume

First, let’s create a place to upload the files we’ll use for our feature and post images.

Assets are organized into volumes, which sit on top of a filesystem. Filesystems are how Craft talks to different storage providers, while keeping the user interface consistent. For now, we’ll be using your local hard drive—but it could be a remote service like Amazon S3 or Google Cloud Storage.

tutorial.ddev.site/admin/settings/assets/volumes/new
Screenshot of the asset volume creation screen in Craft’s control panel
A
B
C
D
E
F
G
H
Creating an asset volume and filesystem.

We’ll create a local Asset Volume within the web root for blog post images:

  1. In the control panel, navigate to SettingsAssets;

  2. Click + New volume;

  3. Enter “Images” in the Name field ;

  4. Click the Asset Filesystem menu and select Create a new filesystem…;

    Within the slideout that opens, provide these settings:

    • Name : “Hard Disk”
    • Files in this filesystem have public URLs : On/Enabled
    • Base URL : @web/uploads/images
    • Base Path : @webroot/uploads/images

    Save the filesystem, and ensure it has populated the Asset Filesystem menu.

  5. Save the Asset Volume.

The @web and @webroot aliases are automatically defined by Craft, and point to the base site URL and document root (web/ in your project folder), respectively.

# Create a Category Group

The second resource we need to create is a group for our blog’s categories.

tutorial.ddev.site/admin/settings/categories/new
Screenshot of new category group fields
A
B
C
D
E
F
Settings for a new blog category group.
  1. Navigate to Settings and choose Categories;
  2. Choose + New category group;
  3. In the Name field, enter “Topics”;
  4. In the Max Levels field, enter 1;
  5. Set the Category URI Format to blog/topic/{slug};
  6. Set the Template to blog/_topic;
  7. Save the category group.

# Custom Fields

Now that we’ve set up all the underlying resources (a section, an asset volume, and a category group), let’s create the fields for our blog posts.

Custom fields are reusable, so we’ll define them in a global space, then add them to the field layouts where they’re needed. Each of the resources we’ve created so far can have their own field layouts.

The first thing we’ll do is create a field group to keep our fields organized.

  1. Navigate to SettingsFields.
  2. Choose + New group in the sidebar, and give it a name like “Blog.”

The following fields will all be created within this new Blog field group. Clicking + New Field while viewing a group will automatically select it—but you can always move a field between groups using the Group option on its edit screen.

# Summary

The post summary will be entered in a plain text field.

  1. Click + New Field;
  2. Enter “Summary” into the Name field;
  3. Enter “Summaries should be one or two sentences.” in the Default Instructions field to give authors a hint about the field’s intended usage;
  4. Enable Allow line breaks;
  5. Set the revealed Initial Rows field to 1;
  6. Save the field.

# Feature Image

Posts’ primary images will be added to an asset field.

tutorial.ddev.site/admin/settings/fields/new
Screenshot of new asset field settings
A
B
C
D
E
F
G
H
I
Settings for a new asset field.
  1. Click + New Field;
  2. Enter “Feature Image” into the Name field (and note that Craft automatically generates a Handle of featureImage);
  3. Select Assets from the Field Type menu—the rest of the page will be updated with options specific to asset fields;
  4. Tick Restrict assets to a single location? ;
  5. Select the Images volume from the revealed Asset Location menu;
  6. Tick Allow subfolders ;
  7. Leave both path inputs ( + ) empty;
  8. Tick Restrict allowed file types , then tick Image from the revealed options;
  9. Set Max Relations to 1;
  10. Save the field.

# Categories/Topics

Our topics field only needs a couple of options:

  1. Click + New Field;
  2. Enter “Post Categories” into the Name field (and note that Craft automatically generates a Handle of postCategories);
  3. Choose “Categories” from the Field Type menu—the rest of the page will be updated with options specific to categories fields;
  4. Choose “Topics” from the Source menu (it will probably be selected, already);
  5. Save the field.

Previously, we only created the category group. This step creates a field that will allow us to select from the pool of content. Craft separates these concerns so that you may establish relationships to and from elements in different parts of your site, without needing to duplicate content.

For example, if we later added a Galleries section, you could create and assign another categories field to its field layout, but still have access to the same pool of topics!

# Post Content

Matrix fields are inherently a bit more complex than other field types, because they contain nested fields. The process of creating those nested fields should feel pretty familiar, though!

tutorial.ddev.site/admin/settings/fields/new
Screenshot of matrix field settings
A
B
C
D
E
Configuring a new matrix field with multiple block types.
  1. Click + New Field;

  2. Enter “Post Content” in the Name field (and note that Craft automatically generates a Handle of postContent);

  3. Choose “Matrix” from the Field Type menu—the rest of the page will be updated with options specific to matrix fields;

  4. Within the Configuration space, use the + New block type button to create two block types:

    # Text Block

    The first block will be used for text. When prompted for a block type Name, enter “Text.”

    1. In the Fields column of the configuration pane, click + New field;
    2. In the Field Settings column, enter these values…
      • Name: “Text”
      • Field Type: Plain Text
      • This field is required: Checked
      • Allow line breaks: Checked
      • Initial Rows: 12

    # Image Block

    The second block will be used for attaching images.

    1. Back in the Fields column of the configuration pane, click + New field.
    2. In the Field Settings column…
      • Set the Name field to “Image”;
      • Choose “Assets” from the Field Type menu;
      • Tick This field is required;
      • Copy the remainder of the settings from the Feature Image field we created a moment ago;
  5. Save the field.

With that, our fields are ready to be added to a field layout!

# Install the CKEditor plugin for rich text fields

If you would prefer to compose the text of your blog posts using a rich text editor (sometimes called a WYSIWYG), the first-party CKEditor (opens new window) can be substituted for the plain text field we created inside our matrix field’s Text block.

Plugins can be installed from the control panel (click Plugin Store in the main navigation and search for “CKEditor”), or via the command line:

  1. Run ddev composer require craftcms/ckeditor -w to add the package to your project;
  2. Install the plugin by running ddev php craft plugin/install ckeditor;

Once installed, you’ll need to update your field’s settings:

  1. Navigate to the Post Content matrix field’s settings, then the Text block type, then the Text field;
  2. Switch the Field Type to CKEditor;
  3. Define a reusable configuration;
  4. Save the field;

That’s it! Plain text fields can be migrated to CKEditor without losing data—but some field types are not compatible with one another! Craft puts a ⚠️ next to any options in the Field Type menu that can’t be automatically converted.

# Building a Field Layout

Craft’s assumption is that you will eventually have a variety of content types, and that each will use a subset of your fields. To connect our blog entries to the fields they need, we’ll create a field layout.

tutorial.ddev.site/admin/settings/sections/1/entrytypes/1
Screenshot of bare blog field layout
A
B
C
Post entry type field layout, prior to configuration.

Field layouts for entries are managed via entry types.

  1. Navigate to SettingsSections;
  2. Choose Edit entry types in the Blog row, and then choose the Default entry type that was created along with the section;
  3. Take the opportunity to give this entry type a more useful Name like “Post,” and ensure the Handle is updated;
  4. Drag each of the fields we created earlier to the Content tab in whatever order makes sense to you.
  5. Save the entry type.

All the fields nested within your Matrix field will come along with it, so they won’t appear in the field layout designer!

# Advanced Field Layout Customizations

The UI Elements tab in the right sidebar contains a few tools that can help spruce up field layouts. This one is relatively simple, but as you create richer authoring experiences, having ways to split up fields, add instructions, or output arbitrary HTML can make a profound difference to its usability.

Here are a few other features of field layouts worth experimenting with:

  • Widths: By default, fields occupy the full width of the element editor. Use the column selector UI next to the
    Gear icon
    to set the field as 1/4, 1/2, 3/4, or full-width.
  • Line breaks: If a row isn’t full, you can force a field onto the next row with a line break field layout element.
  • Field labels: Click the
    Gear icon
    to open a slideout and update a field’s Label. This is particularly useful for the Title field: say you were creating employee profiles, and needed a place for their names and position titles—the built-in Title field would make more sense being called “Full Name.”
  • Required fields: Also within a field’s setting slideout is an option to mark a field as Required.
  • Field conditions and : Fields can be conditionally included in layouts by setting up condition rules, within the settings slideout.

# Create a Post

Return to Entries in the main navigation, and click + New entry to create your first blog post. Check it out—all our fields are here, in a gorgeous editing interface!

tutorial.ddev.site/admin/entries/blog/2?draftId=1&fresh=1
Screenshot of new entry screen
A fresh blog post entry, populated with custom fields.

Feel free to play with the content editor on your own—then check back in so we can go over a couple features you’ll need to be aware of before building out the front-end.