Chapter 6: Setting Up Content Structure

• Adding a Content Type
• Deleting a Content Type
• Adding Basic Fields to a Content Type
• Concept: Reference Fields
• Concept: Taxonomy
• Setting Up a Taxonomy
• Adding a Reference Field
• Concept: Forms and Widgets
• Changing Content Entry Forms
• Concept: View Modes and Formatters
• Changing Content Display
• Concept: Image Styles
• Setting Up an Image Style
• Concept: Responsive Image Styles
• Concept: Text Formats and Editors
• Configuring Text Formats and Editors

Adding a Content Type

Goal

Add and configure a new content type Vendor.

Prerequisite knowledge

Concept: Content Entities and Fields

Site prerequisites

You need to have a plan in place for your content structure. See Planning your Content Structure.

Steps

1. In the Manage administrative menu, navigate to Structure > Content types (admin/structure/types). The Content types page appears showing all the available types of content. Note that the names and descriptions of the content types that were provided by your installation profile are shown in English on this page; see Concept: User Interface, Configuration, and Content translation for an explanation.

2. Click Add content type. The Add content type page appears. Fill in the fields as shown below.

   Field name	Explanation	Example value
   Name	Name of the content type	Vendor
   Description	Explain the use of the content type	Information about a vendor

   

3. Under Submission form settings, configure the form that is used for creating and editing content of this type. Fill in the fields as shown below.

   Field name	Explanation	Example value
   Title field label	Label of the Title field that is shown when editing or creating content of this type.	Vendor name
   Preview before submitting	Option to choose whether you should preview the content before submitting.	Optional
   Explanation or submission guidelines	Instructions for creating or editing content.	(Leave blank)

   

4. Under Publishing options, decide on default options for new content of this type. Fill in the fields as shown below.

   Field name	Explanation	Example value
   Published	Make the content item published by default.	Checked
   Promoted to front page	In a default website, this setting can be used to show content on the homepage.	Unchecked
   Sticky at top of lists	In a default website, this setting can be used to keep content on top of a list.	Unchecked
   Create new revision	Create a new revision each time the vendor is being edited.	Checked

   Changing these settings does not affect the content items that have already been created.

5. Under Display settings, decide if the author and publication date will be visible in the content item. Fill in the fields as shown below.

   Field name	Explanation	Example value
   Display author and date information	Display the author username and publication date on each vendor page.	Unchecked

   

6. Under Menu settings, fill in the fields as shown below.

   Field name	Explanation	Example value
   Available menus	Menus that this type of content can be added to. Vendors do not need to appear in menus, so uncheck all menu options.	Unchecked

   

7. Click Save and manage fields to save the content type. The Manage fields page appears that allows you to add fields to the content type. See Adding Basic Fields to a Content Type

8. Follow the same steps to create a content type for recipes. Example values for the fields in the forms, where they are different from the steps above:

   Field name	Example value
   Name	Recipe
   Description	A recipe submitted by a vendor
   Submission form settings - Title	Recipe name

Expand your understanding

• Adding Basic Fields to a Content Type
• Install and configure the contributed Pathauto module so that content items get automatically generated URLs/path aliases. See Concept: Paths, Aliases, and URLs for more on URLs within your site, Finding Modules for instructions on finding contributed modules, and Downloading and Installing a Module from Drupal.org for instructions on downloading and installing contributed modules.

Videos

Adding a Content Type

Deleting a Content Type

Goal

Delete the unneeded content type Article.

Prerequisite knowledge

Concept: Administrative Overview

Site prerequisites

The Article content type must exist. It is created on your site when you install with the core Standard installation profile.

Steps

1. In the Manage administrative menu, navigate to Structure > Content types (admin/structure/types). The Content types page appears.
2. Click Delete in the Operations dropdown button for the Article content type. Note that the name of this content type is in English on this page; see Concept: User Interface, Configuration, and Content translation for an explanation.
3. A confirmation page is displayed. Click Delete.
4. The Content types page appears with a confirmation message saying that the content type has been deleted:

Videos

Deleting a Content Type

Adding Basic Fields to a Content Type

Goal

Add a link field and an image field to the Vendor content type.

Prerequisite knowledge

Concept: Content Entities and Fields

Site prerequisites

The Vendor content type must exist. See Adding a Content Type.

Steps

Add the fields Vendor URL and Main image to the Vendor content type.

1. In the Manage administrative menu, navigate to Structure > Content types (admin/structure/types). Then click Manage fields in the dropdown button for the Vendor content type. The Manage fields page appears. From here you can either create a new field for the content type or re-use an existing field. Note that the names and descriptions of the content types and fields that were provided by your installation profile are shown in English on these pages; see Concept: User Interface, Configuration, and Content translation for an explanation.

2. Click Create a new field. The Add field page appears.

3. Choose the Link field type from the Choose a field type options. Click Continue. The Add field page appears with a form to configure the field label.

4. Fill in the fields as shown below.

   Field name	Explanation	Value
   Label	Label that is visible in administration pages	Vendor URL
   Choose a type of field	Field type	Link

   A machine name is automatically generated, based on the Label value. Click Edit if you want to override the default name.

5. Click _Continue. The page Vendor URL settings for Vendor appears which allows you to configure the field. Fill in the fields as shown below.

   Field name	Explanation	Value
   Label	Label that is visible in the content form	Vendor URL
   Allowed number of values	The number of values that can be entered	Limited, 1
   Help text	The instruction that is shown below the field	(leave blank)
   Required field	Whether the field is required or not	Unchecked
   Allowed link type	The kind of links that can be entered	External links only
   Allow link text	Whether a link text can be entered	Disabled

   

6. Click Save settings. The Vendor URL has been added to the content type. Continue creating the Main image field.

7. Click Create a new field. The Add field page appears.

8. Choose the File upload field type from the Choose a field type options. Click Continue. The Add field page appears with a form to configure the field label.

9. Some field types require the selection of a sub-type. Fill in the fields as shown below.

   Field name	Explanation	Value
   Label	Label that is visible in administration pages	Main image
   Choose an option below	Field sub-type	Image

10. Click Continue. The page Main image settings for Vendor appears. Fill in the fields as shown below.

    Field name	Explanation	Value
    Label	Label that is visible in the content form	Main image
    Allowed number of values	The number of values that can be entered	Limited, 1
    Default image	You can set a default image here. This will be used when you do not provide an image when creating a Vendor content item.	(leave blank)	Help text	The instruction that is shown below the field	(leave blank)
    Required field	Whether the field is required or not	Checked
    Allowed file extensions	The type of images that can be uploaded	png, gif, jpg, jpeg
    File directory	The directory where the files will be stored. By providing a file directory value, you ensure that all images uploaded via the Main image field will be located in the same directory.	vendors
    Minimum image dimensions	The minimum dimensions of the uploaded image	600 x 600
    Maximum upload size	The maximum file size of the uploaded image	5 MB
    Enable Alt field	Whether an alternative text can be entered	Checked
    Alt field required	Whether an alternative text is required	Checked

    

11. Click Save settings. Main image has been added to the content type.

12. Add a Main image field to the Recipe content type, using similar steps. Start by navigating to the Recipe content type's Manage Fields page. Then use the Re-use an existing field button to open the modal dialog and press the Re-use button that corresponds with the Main image field in the table. Then skip to step 7 and follow the remaining steps.

13. Create two Vendor content items (see Creating a Content Item) called "Happy Farm" and "Sweet Honey". Make sure that they include images and URLs.

Expand your understanding

• Concept: Image Styles
• Changing Content Display
• Changing Content Entry Forms

Videos

Adding Basic Fields to a Content Type

Additional resources

Drupal.org community documentation page "Add a field to a content type"

Concept: Reference Fields

Prerequisite knowledge

Concept: Content Entities and Fields

What is a reference field?

A reference field is a field that represents a relationship between an entity and one or more other entities, which may belong to the same or different entity type. The three most commonly-used reference fields are:

• Content reference: A reference to a content item. For example, you might want to connect recipes to the vendors who submitted them. You would set up a content reference field called Submitted by referencing Vendor content items on the Recipe content type.
• Taxonomy term reference: A reference to a taxonomy term. For example, you might want to connect recipes to their ingredients. You would set up a taxonomy term reference field called Ingredients on the Recipe content type. This reference field will point to the vocabulary Ingredients.
• User reference: A reference to a user account. For example, you might want to connect recipes with their chefs. You would set up a user reference field called Chefs on the Recipe content type.

Related topics

Concept: Taxonomy

Concept: Taxonomy

Prerequisite knowledge

• Concept: Content Entities and Fields
• Concept: Reference Fields

What is Taxonomy?

Taxonomy is used to classify website content. One common example of taxonomy is the tags used to classify or categorize posts in a blog website; the farmers market website could use an ingredients taxonomy to classify recipes. Individual taxonomy entities are known as terms (the blog tags or recipe ingredients in these examples); and a set of terms is known as a vocabulary (the set of all blog post tags, or the set of all recipe ingredients in these examples). Technically, taxonomy terms are an entity type and the entity subtypes are the vocabularies. Like other entities, taxonomy terms can have fields attached; for instance, you could set up an image field to contain an icon for each term.

An individual vocabulary can organize its terms in a hierarchy, or it could be flat. For example, blog tags normally have a flat structure, while a recipe ingredients vocabulary could be hierarchical (for example, tomatoes could be a sub-term of vegetables, and under tomatoes, you could have green and red tomatoes).

Taxonomy terms are normally attached as reference fields to other content entities, which is how you can use them to classify content. When you set up a taxonomy reference field, you can let users enter terms in two ways:

• Free tagging: New terms can be created right on the content editing form.
• Fixed list of terms: The list of terms is curated and managed outside the content editing form, and users can only choose from the existing list when editing content.

Taxonomy reference fields can be added to any entity, such as user accounts, custom blocks, or regular content items. If you use them to classify regular content items, your site will automatically be set up with taxonomy listing pages for each term; each of these pages lists all of the content items that are classified with that term. For example, if you created several recipes that all had carrots as an ingredient, you might see something like this on the Carrots taxonomy listing page:

Related topics

• Setting Up a Taxonomy.
• The listing pages are views, which are covered in Drupal User Guide.

Setting Up a Taxonomy

Goal

Create an Ingredients vocabulary and add it to the Recipe content type as a field that can contain an unlimited number of values and that allows adding new terms to the vocabulary.

Prerequisite knowledge

• Concept: Content Entities and Fields
• Concept: Taxonomy
• Adding Basic Fields to a Content Type

Site prerequisites

The Recipe content type must exist. See Adding a Content Type.

Steps

1. In the Manage administrative menu, navigate to Structure > Taxonomy (admin/structure/taxonomy). You will see the Tags vocabulary that was created with the core Standard installation profile. (Note that the name and description of this vocabulary are shown in English on this page; see Concept: User Interface, Configuration, and Content translation for an explanation.)

2. Click Add vocabulary, and fill in the values below.

   Field name	Explanation	Example value
   Name	The name of the vocabulary	Ingredients
   Description	A brief note about the vocabulary	(Leave blank)

   

3. Click Save. You will be taken to the Ingredients page, which shows a list of all the terms in this vocabulary.

4. Click Add term. Enter "Butter" in the Name field. Click Save.

5. You will receive a confirmation about the term you created. Add more terms. For example, "Eggs" and "Milk".

6. In the Manage administrative menu, navigate to Structure > Content Types (admin/structure/types). Click Manage fields for your Recipe content type.

7. Click Create a new field. The Add field page appears. Choose the Reference field type from the Choose a field type options. Click Continue. The Add field page appears with a form to configure the field.

8. Enter values from the table below. Click Continue.

   Field name	Explanation	Value
   Label	The title to give the field	Ingredients
   Choose an option below:	Type of content to reference	Taxonomy term

   

9. On the following configuration screen, enter the values from the table below. Click Save settings.

   Field name	Explanation	Value
   Help text	Help shown to users creating content	Enter ingredients that site visitors might want to search for
   Type of item to reference	The type of entity that is referenced by the field	Taxonomy term
   Allowed number of values	The number of values a user can enter	Unlimited
   Reference type > Reference method	Select the method used to choose allowed values	Default
   Reference type > Vocabulary	Select the vocabulary to choose allowed values from	Ingredients
   Reference type > Create referenced entities if they don't already exist	Whether new ingredient terms can be created from the content editing form	Checked

   

10. Click Save settings. You will be taken back to the Manage Fields page. A message will be displayed saying that the configuration for Ingredients is complete.

Videos

Setting up a Taxonomy

Adding a Reference Field

Goal

Add a reference field so that recipes can be linked to the vendor that has submitted it.

Prerequisite knowledge

• Adding Basic Fields to a Content Type
• Concept: Reference Fields
• Adding a Content Type

Site prerequisites

The Recipe and Vendor content types must exist. See Adding a Content Type.

Steps

1. In the Manage administrative menu, navigate to Structure > Content types (admin/structure/types). Then click Manage fields in the dropdown button for the Recipe content type. The Manage fields page appears.

2. Click Create a new field. The Add field page appears. Choose the Reference field type from the Choose a field type options. Click Continue. The Add field page appears with a form to configure the field label.

3. Fill in the fields as shown below. Click Save and continue.

   Field name	Explanation	Value
   Label	The title you want to give the field	Submitted by
   Choose an option below:	Type of content to reference	Content

   

4. The page Submitted by appears which lets you set the allowed number of values. Fill in the fields as shown below. Click Save settings.

   Field name	Explanation	Value
   Type of item to reference	Option to select the type of referenced entity	Content
   Allowed number of values	Specify the count of values associated with the field	Limited, 1

   

5. The page Submitted by settings for Recipe appears which allows you to configure the field. Fill in the fields as shown below. Click Save settings.

   Field name	Explanation	Value
   Label	Title shown for this field on the page	Submitted by
   Help text	Brief text aiding the person creating content	Choose the vendor that submitted this recipe
   Required field	Whether a value has to be provided or not	Checked
   Reference type > Reference method	Option to select reference method	Default
   Reference type > Content type	Specify the content type	Vendor
   Reference type > Sort by	Sorting field	Vendor name
   Reference type > Sort direction	Sorting order	Ascending

   

6. The Submitted by field has been added to the content type.

Videos

Adding a Reference Field

Concept: Forms and Widgets

Prerequisite knowledge

Concept: Content Entities and Fields

What are forms and widgets?

The content management system software that your site is running allows administrators to edit content and configure settings online, using various web forms. In particular, content editing forms are used to edit your site's content entities, and they are configurable by administrators; settings configuration forms are provided by modules and cannot themselves be configured.

The data in your site's content entities is stored in one or more fields that are attached to the entity type and/or subtype. When you configure the content editing form for each entity subtype, you can:

• Select a widget for each field. A widget defines the method used to enter the data for the field. For example, a taxonomy term can be chosen using an autocomplete field, a select list, or a tags-style field that lets editors add new tags automatically.
• Configure widget settings. For example, you can choose the size of a plain-text entry field.
• Hide one or more fields from the editing form.
• Reorder the fields.

In principle, you can also have multiple content editing forms available for each entity subtype. This feature is rarely used, however; the only exception in common use is for the user profile fields: you can use different forms for user registration and user editing. For example, you might have a limited set of fields shown when users first register on the site, and more fields shown later on when they edit their profiles.

Related topics

• Changing Content Entry Forms
• Concept: View Modes and Formatters

Changing Content Entry Forms

Goal

Change the Recipe form to use a different widget to enter terms in the Ingredients field.

Prerequisite knowledge

• Adding a Content Type
• Adding Basic Fields to a Content Type
• Concept: Taxonomy
• Concept: Forms and Widgets

Site prerequisites

The Recipe content type must exist, and it must have an Ingredients taxonomy term reference field. At least one Vendor content item must exist. See Adding a Content Type and Setting Up a Taxonomy.

Steps

1. In the Manage administrative menu, navigate to Content > Add content > Recipe (node/add/recipe) to look at the content entry form that is set up by default. Notice how you have to enter ingredients one by one, instead of having a more compact format.
2. In the Manage administrative menu, navigate to Structure > Content types (admin/structure/types). Then click Manage form display on the dropdown button for the Recipe content type. The Manage form display page appears.
3. For the Ingredients field, select Autocomplete (Tags style) in the Widget column.
4. Click Save.
5. In the Manage administrative menu, navigate to Content > Add content > Recipe (node/add/recipe) to verify the changed behavior of the content form. The Ingredients field is now a single text field that accepts multiple values.
6. Create two Recipe content items (see Creating a Content Item), such as recipes for "Green Salad" and "Fresh Carrots". Make sure all the fields have values, including images, ingredients, and submitted by (set this to one of the Vendor content items you created in Adding Basic Fields to a Content Type).

Expand your understanding

Change the main site Contact form by navigating in the Manage administrative menu to Structure > Contact forms. For instance, you may want to hide the Send yourself a copy or Language fields.

Videos

Changing Content Entry Forms

Concept: View Modes and Formatters

Prerequisite knowledge

Adding a Content Type

What is a View mode?

How an entity (such as content, a user or a comment) is displayed, depends on the context in which it is shown. This context is known as a view mode. Examples of view modes are:

• a full page of the content with all the field values
• a teaser of the content with a thumbnail image and a Read more link
• a full user profile with a zoomable portrait photo
• a user avatar with username and a link to the profile

Every view mode can be configured through the administration pages. To see the configuration options for the view modes of the Recipe content type, navigate in the Manage administrative menu to Structure > Content types (admin/structure/types) and click Manage display from the dropdown button. In each view mode, all fields can be hidden or displayed, and if they are displayed, you can choose and configure the field formatter.

What is a field formatter?

A field formatter is a setting for displaying the field values. For example, long text fields can be displayed trimmed or full-length, and taxonomy term reference fields can be displayed in plain text or linked to the taxonomy term page. Consult the Manage display page to see the field formatters for the fields of the Recipe content type.

Related topics

• Adding a Content Type
• Changing Content Display

Additional resources

Drupal.org community documentation page "View modes"

Changing Content Display

Goal

Make the content items more readable, accessible, and visibly attractive by reordering the fields, hiding labels, and tuning the output of the fields.

Prerequisite knowledge

• Concept: Content Entities and Fields
• Concept: View Modes and Formatters

Site prerequisites

The Vendor content type must exist, it must have Main Image and Vendor URL fields, and your site must have at least one Vendor content item. See Adding a Content Type, Adding Basic Fields to a Content Type, and Creating a Content Item.

Steps

1. Find and view a Vendor content item you created in Adding Basic Fields to a Content Type. Notice that there are several things that could be done to improve how the page looks:

   • The Main Image and Vendor URL fields should not have labels.
   • The order of the fields should be changed so that the image comes first.
   • The image should be smaller.

2. To fix the first two problems, and update some additional settings, in the Manage administrative menu, navigate to Structure > Content types (admin/structure/types). Then click Manage display in the dropdown button for the Vendor content type.

3. Under the Label column, select Hidden for Main image. Do the same for Vendor URL.

4. Click the gear wheel for the Vendor URL field, to open the configuration options.

5. Fill in the fields as shown below.

   Field name	Explanation	Example value
   Trim link text length	Maximum displayed length for link text	Blank (no trimming)
   Open link in new window	Whether links should open in a new window or the same window	Checked

   

6. Click Update.

7. Drag the cross bar handles of the fields to reorder as Main image, Body, Vendor URL, and Links. As an alternative to dragging, you can click the Show row weights link at the top of the table and enter numerical weights (fields with lower or more negative weights will be shown first).

8. Click Save.

9. Find the Vendor content item from step 1 again, and verify that the updates have been made.

10. Repeat similar steps to manage the display of the Recipe content type fields.

Expand your understanding

• Make the main image smaller. See Setting Up an Image Style.
• If you do not see the effect of these changes in your site, you might need to clear the cache. See Clearing the Cache.

Related concepts

Concept: Image Styles

Videos

Changing Content Display

Additional resources

• Drupal.org community documentation page "Specify how fields are displayed"
• Drupal.org community documentation page "Rearrange the order of fields"
• Drupal.org community documentation page "View modes"

Concept: Image Styles

Prerequisite knowledge

Adding Basic Fields to a Content Type

What are image styles?

Image styles allow you to upload a single image but display it in several ways; each display variation, or image style, is the result of applying one or more effects to the original image.

As an example, you might upload a high-resolution image with a 4:3 aspect ratio, and display it scaled down, square cropped, or black-and-white (or any combination of these effects). The core software provides a way to do this efficiently:

1. Configure an image style with the desired effects on the Image styles page (admin/config/media/image-styles).

2. The effects will be applied the first time a particular image is requested in that style.

3. The resulting image is saved.

4. The next time that same style is requested, the saved image is retrieved without the need to recalculate the effects.

   The core software provides several effects that you can use to define styles; others may be provided by contributed modules.

   Visit the Image styles page via the Manage administrative menu, navigate to Configuration > Media > Image styles (admin/config/media/image-styles) to see the image styles that are defined by default.

Related topics

• Setting Up an Image Style
• Concept: Responsive Image Styles
• Adding Basic Fields to a Content Type

Additional resources

Drupal.org community documentation page "Working with images"

Setting Up an Image Style

Goal

Add an image style and use it to display images on Vendor pages.

Prerequisite knowledge

• Adding Basic Fields to a Content Type
• Changing Content Display
• Concept: Image Styles

Site prerequisites

• Vendor and Recipe content types must exist. See Adding a Content Type.
• Main image fields must exist for both content types. See Adding Basic Fields to a Content Type.
• Content items must exist for both content types. See Adding a Content Type, Adding Basic Fields to a Content Type, and Creating a Content Item.

Steps

1. In the Manage administrative menu, navigate to Configuration > Media > Image styles (admin/config/media/image-styles).

2. Click Add image style.

3. Enter the name Extra medium (300x200)

4. Click Create new style. The page Edit style Extra medium (300x200) appears.

5. In the Effect table, select Scale and crop. Click Add.

6. Fill in the fields as shown below.

   Field name	Value
   Width	300
   Height	200

7. Click Add effect. The image style is saved with the chosen effects.

8. In the Manage administrative menu, navigate to Structure > Content types (admin/structure/types).

9. Click Manage display in the Operations dropdown for the Vendor content type. The Manage display page (admin/structure/types/manage/vendor/display) appears.

10. Ensure that the secondary tab Default is selected.

11. Click the gear wheel for the Main image field, to open the configuration options.

12. Fill in the fields as shown below.

    Field name	Explanation	Example value
    Image style	Which image style to use	Extra medium (300x200)
    Link image to	Page to visit if image is clicked	Nothing

    

13. Click Update.

14. Click Save. The new image style will be used while displaying Vendor content.

15. Open a Vendor content item and verify that it now shows up with the scaled-down image. See Editing a Content Item for information on how to locate an existing content item.

16. Repeat steps 8-15 for the Recipe content type.

Related concepts

• Adding Basic Fields to a Content Type
• Concept: Image Styles
• Concept: Responsive Image Styles

Videos

Setting up an Image Style

Additional resources

Drupal.org community documentation page "Working with images"

Concept: Responsive Image Styles

Prerequisite knowledge

• Concept: Themes
• Changing Content Display
• Concept: Image Styles

What are responsive image styles?

The core Responsive Image module provides responsive image styles. This allows you to have images in your website that are specifically sized for different screen sizes. This is useful, for example, to make your site load faster on mobile devices because image sizes are optimized for smaller screens.

A responsive image style is a mapping between image styles and breakpoints. Breakpoints are the points where a responsive design needs to change in order to respond to different screen sizes. Responsive image styles can either work with breakpoints defined in your theme or with breakpoints defined in the responsive image style settings.

When a responsive image style is defined, it can be used in the display settings for Image fields. This allows the site to display responsive images using the HTML5 picture tag, or using the srcset and sizes attributes in an img tag, depending on how the responsive image style is set up.

Related topics

Adding Basic Fields to a Content Type

Additional resources

• Drupal.org community documentation page "Responsive web design"
• Drupal.org community documentation page "Responsive Images"
• Drupal.org community documentation page "Working with breakpoints in Drupal"
• Blog post "Responsive Images in Drupal 8 using 'srcset'"

Concept: Text Formats and Editors

What are text formats and filters?

Text formats change how HTML tags and other text are processed and displayed on your site. Text formats are composed of a series of filters, each of which transforms text. When users create content, a text format is associated with the content, and the full, original text is stored in the database. The content is then passed through the filters in the text format before it becomes output on the site.

The core Filter module provides text format functionality, and the core Standard installation profile sets up Basic HTML, Restricted HTML, and Full HTML text formats. Each text format has an associated permission, so that you can allow only trusted users to use permissive text formats. This restricts untrusted users to text formats like Basic HTML, which filters out dangerous HTML tags.

What are the editors associated with text formats?

Each text format can be associated with an editor, such as a visual WYSIWYG (What You See Is What You Get) HTML editor. The core Text Editor module provides the ability to associate editors with text formats, and to configure the editors (such as adding and removing buttons from their toolbars). The core CKEditor module provides the industry-standard editor known as CKEditor, so that it can be used to edit HTML content on your site.

What is cross-site scripting?

Cross-site scripting (XSS) is a security vulnerability typically found in websites. In a site that is not well protected, malicious users can enter script into web pages that are viewed by other users (for example, in a comment or in the body of a page). A cross-site scripting vulnerability may be used by attackers to login as another user. It is important to configure the text formats of your website to prevent such abuse.

Related topics

Concept: Security and Regular Updates

Additional resources

• Drupal.org community documentation page "Filter module overview"
• Wikipedia page "Cross-site scripting"

Configuring Text Formats and Editors

Goal

Add a horizontal rule tag to the Basic HTML text format, and a corresponding button to its editor configuration.

Prerequisite knowledge

Concept: Text Formats and Editors

Site prerequisites

• The core Filter, Editor, and CKEditor modules must be installed. They are installed on your site when you install with the core Standard installation profile.
• The Basic HTML text format must exist. This is created on your site when you install with the core Standard installation profile.

Steps

1. In the Manage administrative menu, navigate to Configuration > Content authoring > Text formats and editors (admin/config/content/formats). The Text formats and editors page appears. Note that the names of the text formats that came with your installation profile are shown in English on this page; see Concept: User Interface, Configuration, and Content translation for an explanation.
2. Click Configure for the Basic HTML text format. The Basic HTML page appears.
3. Note that CKEditor is selected in the Text editor field. This allows you to configure the editor's toolbar.
4. Drag the horizontal line button from Available buttons to the Active toolbar. Toolbar items can be visually grouped together using a vertical divider. As an alternative to dragging, you can tab to select buttons and then move them using keyboard arrow keys.
5. Note that you can change the Filter processing order.
6. Under Filter settings > Limit allowed HTML tags and correct faulty HTML, in the field Allowed HTML tags, verify that <hr> is present (adding its editor button will automatically update the allowed tags).
7. Click Save configuration. You will be taken back to the Text formats and editors page. A message will be displayed saying that the text format has been updated.

Expand your understanding

If you do not see the effect of these changes in your site, you might need to clear the cache. See Clearing the Cache.

Videos

Configuring Text Formats and Editors