View/Download PDF

Table of Contents

• The Sandbox Page
• Drupal's Web Page Structure
• Web Page Title
• Optional Feature Image
• The Drupal Text Editor
• Adding and Removing Images in the Body Block
• Clearing the Site Cache

The Sandbox Page

As noted earlier, when you are signed into Drupal as a site owner, a gray menu stripe appears above the red stripe across the top of each web page in the site. In addition, View, Edit, Revisions and Log tabs appear beneath the title of each page. To edit the contents of any page in the site, you simply click the Edit tab on that page, as shown below.

The page shown above is the Sandbox Page, located in the private section of the GPS Lab website, accessible only to logged-in site owners. This Sandbox Page provides you a private space for learning about and experimenting with Drupal’s editing tools. Because this page is located in the private site owner’s section of the GPS Lab website, you can feel free to experiment with the contents of this page as much as you like without fear of inadvertently altering any of the site’s public pages. Throughout this chapter, we will use this page to demonstrate Drupal’s content editing features.

To open the Sandbox Page for editing:

1. Click the Internal Login button at the right end of the footer on any page in the site.
2. Select Sandbox Page at the bottom of the sub-menu in the left sidebar.
3. Click the Edit tab beneath the Sandbox Page title.

Drupal's Web Page Structure

The screen image below shows the basic sections of the Sandbox page.

Notice that all basic pages in the GPS Lab website have the following editable sections:

• Page Title — Appears in large type at the top of the page
• Optional Featured Image—If present, always appears in the upper right corner of the Body block and is automatically scaled to fit the size of the body block.
• Body Block — The main content of the page; text, images, links, tables, etc.

When you click the Edit button on any basic page or landing page in the site, a Drupal page editing form appears, as shown in the labeled screen image below.

Web Page Title

Each Drupal web page must have a unique, identifying title. The title appears in large text, beneath the header section of the page.

Simply type the title you want into the Title box at the top of the Drupal page editing form.

Note: If the page you are editing will be accessible from a menu, then Drupal will use the words you enter in the Title box, separated by hyphens, in the menu—unless you specify otherwise. Drupal will also use the words from the title in the URL for this page—unless you specify otherwise.

Optional Featured Image

The Drupal layout features of the GPS Lab website have been configured so that each standard page in the site can display an optional “featured image” in the upper right corner of the page’s Body Block.

By default, the Featured Image section of the editing form is closed. If you wish to add a featured image to the page, simply click the Add/Edit Image button to open the Feature Image selection and captioning section of the form.

The screen image below shows the open Feature Image selection section of the editing form.

In the top section, click the Browse button to select the feature image file from your computer’s hard drive. Once you have selected the image, click the Upload button to upload the image into Drupal’s image database for the site.

Once you have selected and uploaded an image file, its thumbnail and file name appear in the Image section, and the Browse and Upload buttons are replaced with a Remove button.

Note: It is a good practice to enter an image description in the Alternate Text box for use by visually impaired visitors to the site.

The remaining blocks in the Featured Image section are optional:

• If you enter image credits, they will be displayed beneath the image caption.
• You can enter caption text that will be displayed beneath the image. You can style the caption text using the editing tools at the top of the caption box. These tools are described in detail in the next section of this chapter.
• You can enter image source information for record keeping purposes. Image source information is not displayed on the web page.

Below is an example of the featured image on the Sandbox web page. Notice that the image is automatically surrounded by a frame to indicate that it is “featured.”

The Drupal Text Editor

Every standard Drupal web page contains a Body block, which in addition to an optional featured image typically includes one or more paragraphs of text and optional images that can be located anywhere in the text area. The text may or may not include links to other pages or even other websites. Links are displayed in red text. Images can also serve as links. However, the only indication that an image is also a link is that the cursor turns into a pointing finger when you move the cursor over it.

Note: On touch-sensitive devices, such as tablets and smart phones, there is no indication that an image is also a “link button,” so the image itself must convey the visual message that it is a button to be tapped.

Selecting a Text Editor Format

The Body block section of every standard Drupal web page comprises an editing “box,” with an editor Text Format drop-down selector beneath it. This Text Format selector controls the appearance of the editing box and the features available for entering/editing the text contents in the editing box—that is, the text contents that appear on the web page.

The Text Format selector provides four options, only two of which—shown above—should be used:

• Text Format—Essentially a WYSIWYG (What-You-See-Is-What-You-Get) editor that displays the contents of the Body block as you would see it in a typical word processing application, such as Microsoft Word. If you are typing text into the Body block or editing existing text in the block, this is the easiest format to use. Also, you can paste text into this box that you copied from a text editor or word processing application. If the Body block contains only text and images, without any special HTML coding, you can save the page with this format selected for the editor.
• Filtered HTML—Ignore this option; it is not useful for general text entry/editing purposes.
• Full HTML—In this mode, the editor accepts only valid HTML code for the entire contents of the Body block. Full HTML mode essentially gives you full control over the styling of the text and image contents on the page. If you are familiar with HTML coding, you can enter coded text directly into the editor box in this mode. Alternatively, you can paste HTML code, copied from an HTML editor such as Adobe Dreamweaver, directly into the editor box in this mode.

Note 1: If you enter text into the editor in Full HTML mode, you must save the page with the editor in Full HTML mode to ensure that the page displays correctly in your browser.

Note 2: If you enter text content into the editor in Full HTML mode and then switch the editor to Text Format mode, your HTML code may get changed in the process, yielding undesired results. Thus, if you use Full HTML mode to create content, it is best not to switch the editor to Text Format mode before saving the page.

Note 3: If you entered the contents of the page in Text Format mode, the page will still display correctly if you switch the editor to Full HTML mode before saving the page. In other words, it is fine to use Text Format mode to enter text content and the switch the editor to Full HTML mode before saving the page, but the converse—entering text content in Full HTML mode and then switching the editor to Text Format may cause the page to display incorrectly.

• Plain Text— Ignore this option; it is not useful for general text entry/editing purposes.

Below is a screen image showing the top portion of the Sandbox web page with the editor set to Text Format mode. Notice the tool bar that appears along the top edge of the editor box in this mode. The HTML tags listed beneath the editor format selector are the tags that will display properly when the editor is set to Text Format mode.

The screen image below shows the same portion of the Sandbox web page with the editor switched to Full HTML mode. Notice that in Full HTML mode, the editor has no tool bar, nor any other editing aids. It is just a simple scrolling box for entering HTML code.

The Text Editor Tool Bar

When the Text Format selector is set to Full Text, a toolbar is displayed across the top border of the editor box. Similar to Microsoft Word and other word processing/text editing applications, the buttons on this toolbar provide shortcuts styling and performing various operations on selected text and/or objects in the editor box.

Below is a screen image of the toolbar, with brief descriptions of the functions of each button on the toolbar.

Following are a few notes about the functions of these buttons:

• Bold/Italics buttons—Select one or more words in the text and use these buttons to apply/remove boldface or italics to emphasis to the selected text
• Insert unordered/ordered lists buttons—Place the cursor between paragraphs in the text, and click the unordered list button to insert a bulleted list, or click the ordered list button to insert a numbered list. Clicking the Return/Enter key twice after entering the last list item closes the list entry.
• Outdent/Indent buttons—Place the cursor at the beginning of a paragraph and click the outdent button  to remove an existing indent (tab); click the indent button to insert an indent (tab) in front of the paragraph.
• Undo/Redo—Click one of these buttons to undo or redo your most recent text operation in the editor box.
• Add Link button—Select a text segment or an object (e.g. an image), and click the Add Link button to open the Link panel, shown below.


If the http://, https:// or other protocol prefix is included in the URL, you don’t need to select a protocol from the drop-down menu; simply paste the entire URL in the box.

• Remove link button—Select text or an object to which a link has already been applied and then click the Remove Link button to remove the link from that object.
• Add HTML Anchor button—Select any paragraph, list or other object in the text and click the Anchor button to add an HTML anchor to the selected object’s opening HTML tag. You can add links from somewhere else in the Body block to any anchored objects.
• Insert Horizontal Rule button—Place the cursor between paragraphs or objects in the editor box and click the Insert Horizontal Rule button to insert a thin line across the width of the Body block at that point.
• Cut and Paste buttons—Select any text segment and click the Cut button to remove that segment from the text. You can then use the Paste button to paste the cut text at a different location.
• Paste from MS Word button—This button appears to be inactive.
• Remove Formatting button—Place the cursor in a paragraph to which style formatting has been applied, and click the Remove Formatting button to remove the style. (see Style Text menu below).
• Insert Special Character button—Place the cursor at the point in a text paragraph where you want to insert a special character, and click the Insert Special Character button to open the Special Character panel where you can select the special character to insert.


Whatever character you click will be inserted at the cursor position in the text.

• Paragraph Formatting menu—Place the cursor anywhere in a paragraph and click the Paragraph Formatting drop-down menu button to select a heading level (h2, h3, or h4) for that paragraph.


If the paragraph has already been assigned a heading level, you can click the Normal option at the top of the menu to return the paragraph format to normal text.

• Styles Text menu—The GPS Lab website includes seven pre-defined CSS styles (HTML classes) that can be applied to selected text paragraphs for various purposes.


Place the cursor anywhere in a paragraph and click the Paragraph Styles drop-down menu button to select a style to apply to that paragraph. As indicated above, you can return styled paragraphs to normal by placing the cursor in the paragraph and clicking the Remove Formatting button.

The screen image below from the Sandbox web page, shows examples of the seven styles available in the Styles Text menu.


• Insert Table button—Place the cursor after a paragraph or between two paragraphs, and click the Insert Table button to insert a table to open the Table PropertiesT Panel for inserting a table at that location in the Body block contents.


In this panel, you can specify the number of rows and columns the table will contain as well as the number of header rows, border size, and the spacing and padding between cells. You can also specify a caption that will appear above the table and a summary of the table contents that will not appear on the web page.

Below is an example of a two-row, two-column table with a single header row that appears as an example in the Sandbox web page.


• Check Spelling button—Clicking the Spell Check button opens the Spell Check panel, which contains not only a spelling checker, but also a  grammar checker and a thesaurus, as shown in the screen image below.

Adding and Removing Images in the Body Block

In addition to adding/editing text in Body block of a web page, you can browse for images on your computer—photos, drawings, charts, or other graphic images—and upload them into Drupal’s image database. Once an image has been uploaded, indicated by a thumbnail and file name of the image appearing in the File Information section of the Image Insert block, located beneath the Body block, you can insert that image anywhere in the Body block text. Likewise, you can remove images from the page and from Drupal’s site database.

The screen image below shows the Insert Image block with one image already uploaded with its thumbnail image and file name displayed in the File Image section.

Uploading and Inserting an Image Into the Body Block

To upload and insert an image into the Body block text, follow these steps:

1. In the Body block, place the cursor at the position where you want the image to appear. Typically, this will be between paragraphs, although there may be cases in which you wish to insert an image within a line of text.
2. Scroll down to the Image Insert block beneath the Body block. If other images have already been uploaded, locate the last section of the Image Insert block with the heading Add a new file, as shown below.

3. Click the Browse button to locate the image you want from your computer’s hard drive, and then click Upload to add that image to Drupal’s image database for the GPS Lab website.

When the image has been uploaded, a thumbnail, along with the image file name appear in the Image Insert block, which moves up beneath the previous Add New Image block in the File Information area of the Image Insert block.

4. Click the Style drop-down menu to choose the size to which you want the image scaled on the page.

If you choose “Original Image,” the image will not be scaled unless its width is greater than 1200 pixels. You can experiment with other scaling choices to find one that best suits the web page layout


5. Click the Insert button to insert the image into the Editor box at the current cursor position.
• If the Editor is set to “Text Format,” you’ll see the image the way it will appear on the page.
• If the Editor is set to “Full HTML,” the HTML code (<img> tag) for the image will appear correctly positioned in the page code.

The screen capture below shows the example image above as it appears on the live page.

Removing an Image from the Body Block

To remove an existing image from the Body block of a web page, first delete the image from the Editor box.

• If the Editor is set to Text Format, select the image itself in the Editor box and press the Delete key on your keyboard.
• If the Editor is set to Full HTML, locate and select the entire HTML image tag for the image—for example: <img alt="Real & Simulated cockpit views" height="419" src="/sites/default/files/waas-juneau-2-1200x420px_0.jpg" width="1200" />—then press Delete on your keyboard.

Once you have deleted the image from the Editor box, scroll down to the Image Insert area beneath the Editor box, locate the section containing the image there, and click the Remove button to remove the image from Drupal’s image database for this website.

Clearing the Site Cache

To expedite page loading times and improve general site performance, Drupal caches page content and settings. When you edit the content of a page in the site, Drupal sets up an editing space for your SUNet account outside the main site cache. Thus, when you save the changes you made to a page, you may not see the changes you made when Drupal closes the page editing form and switches back to Display mode for that page. Likewise, other people visiting the site will still see the cached version of the site pages, including the page you just finished editing.

Drupal periodically clears and rebuilds the site cache, so eventually, the changes you made to a given page will be cached and displayed. However, the best practice each time you save changes you made to a page is to then manually clear the site cache.

To manually clear the site cache, simply do the following:

1. Click on the Site Actionsdrop-down menu at the left end of the gray menu bar that runs across the top of each page when you are logged in as a site owner.
2. Click Clear Cache at the bottom of the menu. (It can take Drupal a minute or so to clear the cache, so be patient.)

Note: If you click on the Site Actions menu and release your mouse button without scrolling down to the Clear Site Cache, Drupal will open the Site Actions menu page, shown below. Clicking the Clear Site Cache link at the bottom of the Site Actions menu page achieves the same result.