Building Our Content Model - Directories, Categories & Fields

<<Previous Lesson       Next Lesson>>

With ExpressionEngine installed and a clear idea of what we're going to build from our Content Model from Part 3, we can go ahead and start building out our Content Model in ExpressionEngine. This will be a pretty long but very practical installment to the tutorial that will walk you through step-by-step (and sub-steps!) how to create what we planned in Part 3. So let's get started!

In This Article:

Step 1 - Prepare the Upload Directories

As I mentioned before, it's way easier to set these up before creating the Fields where we want to force uploaded files to go to a certain place. Repeat the following steps 1-7 for each of our 4 directories we planned in Part 3.

REMINDER: In Part 3, the directories we planned were:

  • Hero Banners used for images only with one Manipulation
  • Work Images used for images only, but we'll setup two Manipulations
  • Page Images used for images only, but no pre-defined Manipulations* (we'll do them on-the-fly in the templates)
  • Documents, all file types to hold PDFs, etc
  1. Create the directory in the file system within your webroot where you want images to be stored, e.g./images/uploads/work - this can be wherever you want, but any files uploaded this directory will be accessible from that physical location, e.g.
  2. Log in to the Control Panel, then go to Files in the main menu, then click New next to the Upload Directories

    Files > New

  3. Add the name for the directory

    Directory name

  4. For the Upload directory field, use {base_url} plus the directory name, eg {base_url}images/uploads/work


    Directory URL

  5. Similarly, for the Upload path field, use {base_path} plus the directory name eg {base_path}images/uploads/work

    Directory path

  6. For directories used only for images, leave the allowed file types set to 'Images.' For our Documents directory, set it to allow 'All file types'

    Directory file types

  7. Add appropriate Manipulations - you can always come back later and add more Manipulations, but go ahead and set up the ones you know you want now
    • For Hero Banners, I'm creating a Crop named "large" with the width set to 1110 and height 500
    • For Work Images, I'm creating two again, this time one Crop which I'll use for thumbnails, and one Constrain which we'll link to for the full view
      • "large", Constrain, width 1800, height 1200
      • "thumbnail", Crop, width 300, height 200

        NOTE: Using Constrain and only supplying one value will only constrain the generated image against that value. Supplying both values will constrain against both, but in either case, the aspect ratio of the image will never change.

    • For Page Images, we won't create any fixed Manipulations, but instead, we'll use on-the-fly image manipulations, which is new in EE6.

Image manipulations example

Tip: Upload Directories are ordered alphabetically whenever they're listed, so if you want them in a specific order (say to group image vs document directories), start the names with numbers, e.g., 1. Hero Images, 2. Work Images, etc.

NOTE: The original image the editor uploads is always maintained, so it's also possible to go back to a File Upload Directory's Manipulations and change the configuration later, then synchronize the whole directory to re-create the different generated version from the original file. You do this by going to Files, editing an existing directory with the pencil icon that appears when you hover over a directory name, then using the 'refresh' icon button in the top-right.

Directory Sync

Step 2 - Create a Category Group for the Work Channel

You could do this simultaneously as creating the Channel itself, but given we've already planned for it, we'll go ahead and do this now, so it's ready to just assign when we come to create the Work Channel. It's useful to know because this is how you can manage Categories after launch too.

  1. In the Control Panel, go to Categories from the main menu and click Add New to add a Category Group

    Add category group

  2. Give the category group a name (in our case, "Work") and then Save

    NOTE: You'll see the Save button has a dropdown with additional ways to save something in EE but with additional actions:

    Save options

    The normal Save button will save what you're working on but leave you on the edit page so you can make additional changes after you save. Save & New will save whatever you're editing and open the screen to create a new one (regardless of what that is - it could be an entry, category, category group, etc.). Then Save & Close will save what you're editing but close that screen and typically take you back up a step depending on what you're editing. In this case, if you Save & Close instead of Save, it'll take you to the Categories main page, which because there's only one Category Group, will go ahead and select it for you.

  3. Click the "Work" label in the Category Groups sub-navigation to see the categories in that group (which there aren't any yet)
  4. Click New Category to add a category to the group, providing at least a category name, which will auto-generate the category's URL Title, which will be used in the URLs, e.g.

    Add category

  5. Create as many categories as needed, and of course, you can come back here to add more later - make sure to add 'Descriptions' to your categories too, as we'll pull these through on the Work landing page where a specific category is selected.

NOTE: You can re-order and nest categories by clicking and dragging the hamburger icon:

Reorder categories

Step 3 - Create Individual Fields

Particularly with new projects where you've done the planning and know what Fields you need, it's worth creating all the Fields before creating Channels, but of course, you can always create new Fields later and associate them with Field Groups or Channels directly later on. EE also allows you to create Fields and Field Groups on the fly as you're creating a Channel, and you may prefer to work this way, so for this tutorial, I'll use both methods. First, we'll create the majority of our Fields and Field Groups, but we'll deliberately skip the Homepage Fields so that in the next step, we can add those at the same time as creating the Homepage Channel. Similarly, with our two Field Groups (Work and Pages), we'll create Fields first for one and the group for the other. In both cases, which way you do it doesn't matter so long as everything is associated correctly.

Creating Fields

Go to the Developer from the main menu, then go to Developer > Fields :

Developer > Fields

and note we have no Fields or Field Groups yet. So first, we'll create some stand-alone fields that aren't in any groups. For each one, the process is:

  1. From Developer > Fields, click the blue New Field button in the top-right

    New Field button

  2. Choose the type of field, which determines the type of content. You should read up on the available fieldtypes in the documentation

    Field Type selection

  3. Add a 'Name' for your field - this is what the content editor will see as the field label when editing content. Also, note the short_name is automatically generated - this is what we use in the templates to access that field

    Field Name & Short Name

  4. Add any Instructions or settings you want:
    • Instructions show between the field label and the actual field on the Edit Entry screen and are used for giving additional information, for example, stating the ideal image size for images:

      Field Instructions

    • Some settings such as 'Require field?', 'Include in search?' and 'Hide field?' are default field settings that apply to any type of field:

      Field Settings

    • The rest of the settings available will vary depending on the type of field you're using, so look through those carefully for each field you create and set them appropriately
  5. Once done, click the Save button at the bottom - remember, using the dropdown and choosing Save and New will save the current Field and create a new one allowing you to quickly add several Fields in a row.

TIP: Even if the site you're building doesn't have a search function, pretend it does when building out the Fields and set the 'Include in search?' toggle accordingly right from the start - this way, when the client inevitably asks for a search function, you're already set. Make sure to set 'columns' inside Grid and File Grid fields to be searchable too.

For our specific example, use the same process above to create the following Fields. Unless otherwise specified, use the default settings/options. Remember, Grid and File Grid fields allow us to create sub-fields or 'columns,' so I've defined those below too:

Fields for the Page Builder

While we're creating individual fields, we'll also go ahead and create the fields that will be accessible to our Page Builder Fluid Field. Remember that a Fluid Field can be assigned to a channel and give the editor the ability to add different fields in whatever order they'd like. So go ahead and repeat the process above for the following Fields, but manually update the short_name to start with "ff_" so we can identify fields intended to be used inside a Fluid Field:

Create the Page Builder Fluid Field Itself

Now that we have our Fields created, which we want accessible to the Page Builder, we can create the Page Builder field itself. Following the same steps as before:

  1. Again, go to Developer > Fields then click the blue New Field button
  2. Select 'Fluid' from the Type dropdown
  3. Name the field "Page Builder"
  4. Turn on 'Include in search'
  5. Under 'Field Options', check the fields we just created above from the list, so all the Fields where the short name starts with "ff_" are selected:

    Page Builder fields applied

  6. Save & Close by using the dropdown next to the Save button

NOTE: A Fluid Field is just like any other field in that it must be assigned to a Channel (or a Field Group that is assigned to a Channel) before it can actually be used.

Step 4 - Field Groups

In our planning stage, we defined two Field Groups we would utilize, so we'll create those next. For our Pages Field Group, all the fields already exist, so it's just a matter of assigning all the fields while creating the group:

  1. In the Control Panel, go to Developer > Fields, then under the "Field Groups" heading in the left sidebar, click the blue New button:

    Create new field group

  2. Set the name to "Pages" and check the fields we planned to use here: Page Heading, Page Intro and Page Builder:

    Pages field group

  3. Save & Close - it's that simple!

For the Work Field Group, we deliberately didn't create the fields individually earlier to show you how EE lets you do this on the fly:

  1. Again, go to Developer > Fields and again, under the "Field Groups" heading in the left sidebar, click the blue New button
  2. Set the name to "Work" and this time click the grey Add Field button at the bottom of the list of existing fields:

    Add field on the fly

  3. Note the slide-in New Field form that looks exactly like what we used earlier via Developer > Fields > New Field - adding a Field here automatically creates the Field and includes it in the group we're creating.

Using this method, we'll go ahead and create all of our Work Channel Fields. Looking back at our Content Model plan though, we'll be using several of EE's Default Fields, so the Project Title, Entry Date, and Categories don't need to be created. Additionally, we will be re-using the Page Heading field we created earlier, so we only need to create the following:

Remember we also want to re-use the Page Heading field we created earlier, so once you're done adding new fields to the Work Field Group, go back to Developer > Fields and in the left sidebar you can see the two Field Groups we created. Clicking on the name allows you to see (and search if you need to) the fields that are assigned to that group, but the little pencil icon button that appears when you hover over the name is where you can go to edit the field assignments:

Edit field group assignments

So the final step here is to click the pencil icon next to the Work Field Group and make sure Page Heading is also checked in the list of Fields assigned to this group, then Save the Field Group changes:

Work Field Group fields

NOTE: Remember, I've deliberately not yet created the Field for the Homepage Hero Carousel simply so I can show you the alternative way of creating Fields while creating a Channel, which we'll do in the next chapter.

What's Next?

So now we have all of our Fields setup. In the next installment, we'll continue building our Content Model by setting up the Channels and actually adding content so we have something to output in our templates. We'll also take a look at "Publish Layouts," which are EE's way of letting you organize how the Fields in each Channel appear when editing an Entry.

Justin Alei's avatar
Justin Alei

Justin is an expert in ExpressionEngine and has created several award-winning sites for Consumer51 on the platform.