Skip to content Skip to navigation

Getting Started on Sites: Adding New Fields to Your Content Type

Welcome back! This is the eighth blog post in a series on how to create a Drupal 7 personal website using Stanford Sites. Last time we learned how to create image styles to enhance your site's images. In this post we'll look at how to add custom fields to your content type.

By default, Drupal has two content types, Article and Basic page. What if you wanted an image field, a document attachment field, or a taxonomy field to be available on these content types? Let's walk through the steps to add a new field to an existing content type.

What Field types are available?

There are several field types to choose from.  Here's a brief overview of each field type.

  • Boolean: Allows users to choose one of two options, using either radio buttons or an on/off checkbox.
  • Date: Recommended for most installs. Stores the date in the database's native date format (YYYY-MM-DD HH:MM:SS).
  • Date (ISO Format): Stores the date in an ISO format (YYYY-MM-DDTHH:MM:SS).
  • Date (Unix Timestamp): Stores the date as an integer.
  • Decimal: Allows exact decimal values.
  • File: Allows users to upload a file (note that there's a separate field type for images). It's useful if you want to attach a document, such as a PDF.
  • Float: Allows floating-point values. Floating-point values represent approximate decimal values.
  • Image: Allows users to upload images and attach them to the node. These images could be displayed in their raw form, hidden and then inserted into the body using the Insert module, or hidden and called using a node template. This field is extremely flexible and can be tailored to your needs.
  • Integer: Allows users to enter whole numbers, such as years (e.g. 2012) or values (e.g. 1, 2, 5, 305). It does not allow decimals.
  • List (float): Allows floating-point values from a predefined list. Floating-point values represent approximate decimal values.
  • List (integer): Allows whole number values from a predefined list.
  • List (text): Allows text values from a predefined list.
  • Long text: Allows users to enter chunks of text in a textarea field with multiple rows, with no summary option (see below).
  • Long text and summary: Allows users to enter chunks of text in a textarea field with multiple rows, with an option to enter a summary, or brief excerpt that describes the text. This could be used if you were creating a blog with short excerpts on the index page - the post itself would be in the long text field, and the brief excerpt that displayed on the index page would be pulled from the summary field.
  • Term reference: Links the node to a vocabulary. After this is added, tags from this vocabulary can be selected on each node that uses this content type.
  • Text: Allows users to enter text in short, row-less fields. This is ideal for small phrases, since long sentences can't be seen in the small text field.

Adding a new field to your content type

In this blog post, I'll show you how to add an Image field to the Basic page Content type.

  1. From the admin menu bar, navigate to Structure > Content types > Basic page > Manage fields.
  2. In the Add new field section, give the field a label name (Image). Keep this simple and unique for the Content type.
  3. Then click on the Select a field type arrow and choose the appropriate field type (Image).

    Add new field

  4. After selecting your field type, a Widget type is automatically determined based on the field type.  Note: If you click on the arrow, you may see other options based on the field type you select.
  5. Press the Save button.
  6. On the Field Settings page, you can set a Default image. If no image is uploaded on the node edit form, this image will be shown on display.
  7. On the Basic page Settings page, additional field setting options are available based on the field type selected.
  8. Click the Save settings button.

Manage how the field displays on the node

  1. From the admin menu bar, navigate to Structure > Content types > Basic page > Manage display.
  2. Click the field Label arrow to change label position and whether or not to show a label on node display.
  3. Click the field Format arrow to choose a formatting option.
  4. Click on the gear button to change the default image size on node display.
  5. When finished, click the Save button.

Manage Image field display

Next time, I'll go over creating a new Content type.