Adding Content

As we have discussed already, the template provides the placeholders for content to be entered. The type of content a placeholder may contain is defined by the placeholder's properties, which are set up by the template designers at the development stage.

NOTE: Information about the placeholder properties is one of the details stored in the template's TGI (you may want to refer to the CMS Templates sidebar earlier in this chapter for the definition of a TGI).

CMS provides three types of placeholders where the content authors can enter content, as follows:

• Multipurpose HTML placeholder

• Single image placeholder

• Single attachment placeholder

Template designers may create additional custom placeholders for example, a drop-down list or a specific placeholder for XML content.

NOTE: We will discuss custom placeholders in detail in Chapter 29.

An example of an empty multipurpose HTML placeholder is shown in Figure 5-16. The icons displayed on the top of a placeholder indicate the content that is allowed within this placeholder; they are listed in Table 5-4. The placeholder is referred to as "multipurpose" because it may contain different content; however, technically speaking, it generates HTML; therefore, it is formally called the HTML placeholder.

Figure 5-16. HTML placeholder

Table 5-4. HTML Placeholder Icons

Icon	What It Indicates
	Allow plain text
	Allow bold and italics formatting
	Allow fully formatted text
	Allow hyperlinks
	Allow multiple images
	Allow multiple attachments
	Allow HTML styles

Examples of content that an HTML placeholder may contain include the following:

• Text, either formatted or plain

• Text formatted with HTML styles

• Images

• Hyperlinks

• File attachments

It is worth mentioning that the content of a placeholder is validated against the placeholder properties before the page is saved; the content that is not allowed is deleted.

A single image placeholder is shown in Figure 5-17. It is currently empty; the default graphic displayed is provided for CMS to remind the page authors to insert the graphic into the placeholder. The icons on the top of the placeholder are clickable buttons. They allow us, from left to right, to add an image to the placeholder, edit image properties, and remove the image from the placeholder. When you work with the image placeholder, you can use only these buttons; the buttons on the CMS toolbar on top of the page, if present, will be disabled.

Figure 5-17. Default single image placeholder

A single attachment placeholder provides the same functionality for file attachments as the single image placeholder provides for images. A file attachment is a resource that is displayed in a page as a link; it cannot be displayed inline within a browser window. The default presentation of an empty single attachment placeholder in a page template is shown in Figure 5-18. As with the image placeholder, the icons on the top of an attachment placeholder are clickable buttons. These buttons, from left to right, allow us to add an attachment, edit the attachment's properties, and remove the attachment. When you work with the attachment placeholder, you can use only these buttons; the CMS toolbar buttons will be disabled if present.

Figure 5-18. Default single attachment placeholder

In the Web Author, content may be added to placeholders in a number of different ways, as follows:

• HTML placeholders:

  • Typing inside a placeholder

  • Copying and pasting text and images

  • Dragging and dropping images and file attachments from the desktop

  • Adding images and file attachments using buttons on the toolbar

• Single image and single attachment placeholders:

  • Adding single images and file attachments using buttons on the top of a placeholder

NOTE: Empty placeholders may contain the default elements that the designers incorporate in the template to help users when they need to add content to the placeholders. When you add your own content, you should delete these default elements.

Adding Text and Hyperlinks

The HTML placeholder provides a simple inline authoring environment for the content creators. When you are creating or editing a page, two new toolbars appear in the browser at the top of the page (Figure 5-19). These toolbars provide the ability to edit and insert content into the placeholders on the page.

Figure 5-19. CMS toolbars

Depending on the current placeholder properties set up at the template design stage, certain buttons on these toolbars are enabled or disabled. Figure 5-19 shows the toolbars with all buttons enabled; however, it may not be the case for the placeholders in your templates. When you add content to the placeholder, CMS creates HTML for this content.

The toolbars provide the following options:

• The style drop-down allows us to select a style from the predefined list of styles (Figure 5-20). Each style inserts different HTML tags and provides a different look and feel; these are summarized in Table 5-5, later in this section.

  Figure 5-20. Style selection

  

• Font and size drop-down lists allow us to select the font and the size for the text; the appropriate <FONT> tag is inserted in HTML.

• The next section of the toolbar contains three buttons that allow us to insert images, video, and file attachments into the page; we will look into these buttons and their functionality in the next section.

• The Insert Table button allows us to insert a table in the placeholder. If you click this button, a Table dialog appears (Figure 5-21) asking you to specify the number of columns and rows, and whether you'd like the table border to be shown. After you've set up the table options and clicked OK, the table is inserted into the placeholder, as shown in Figure 5-22. The following HTML tags are inserted: <TABLE> for the overall table, <TBODY> for the table body, <TR> for table rows, and <TD> for table cells.

  Figure 5-21. Table dialog

  

  Figure 5-22. Table within a placeholder

  

  When the table is inserted, each cell in an empty table has default text showing its position in the table for example, "[Col 2 Row 1]." You need to replace this text; otherwise, it will show in the page.

• The Edit Hyperlink button allows us to make part of the placeholder content a hyperlink. To create a hyperlink, select content you'd like to become a link such as text, an image, or a combination of both and click this button. The Edit Hyperlink dialog appears, as shown in Figure 5-23. This dialog provides the ability to either type in the URL for the link or browse to the channel or page on the CMS site you'd like to link to (Figure 5-24).

  Figure 5-23. Edit Hyperlink dialog

  

  Figure 5-24. Insert Hyperlink dialog

  

  Browsing to an internal CMS object, such as a page or channel, has the advantage that CMS will maintain a link if the object linked to is moved to another location. Internal links will use the object GUID rather than the URL. This ensures that the links are always valid, even if the original object is moved. If the link to an internal object is entered manually in the URL box using the hierarchical URL http://server/channel/page, the link will be broken when the page is moved.

  In the Edit Hyperlink dialog, you can also type in a tooltip for the link and define where you'd like the link to be opened.

  Depending on what you select, the target will be shown in the box next to the Open Link In drop-down list. The choices include:

  • Default window or frame.

  • Same window or frame; the target is _self.

  • Parent window or frame; the target is _parent.

  • Full browser window; the target is _top.

  • New unnamed window; the target is _blank.

  • Custom named window; you need to type the name for the target window yourself.

  If you'd like to create an internal anchor point so that you can link to it later on, type a name for an anchor in the Name field.

  When you click OK, the link is created; the <A HREF=…> tag for the link is inserted into the HTML. The link text is displayed as underlined and highlighted in blue. If you have created an internal anchor, then the <A NAME=…> tag is inserted in the HTML, and the text is displayed as before; it is neither highlighted nor underlined.

  If a linked-to CMS page is not available, then the links that are pointing to this page will automatically be converted into so-called sleepy links. For example, a page may be unavailable when the page content has been changed but hasn't yet been approved for publishing, In this case, CMS maintains the link, but will not display the link on the site. Sleepy links are rendered with the HREF attribute changed to ZHREF that is, <A ZHREF=…>. The only way to remove a sleepy link is to remove the original hyperlink that points to an unavailable object.

• The HTML button allows us to edit the HTML source code. When you click this button, the content of the current placeholder is displayed as HTML (Figure 5-25); you can type within the placeholder and edit the HTML by hand. Usually, the template designers don't enable this button on the toolbar so that nontechnical users cannot break the HTML within the placeholder.

  Figure 5-25. HTML source editing

  

• The buttons on the second toolbar are similar to the buttons in Microsoft Word. Starting from the left, these buttons are Cut, Copy, and Paste; Undo and Redo (one action only); Spell Check; Bold, Italic, and Underline; Foreground and Background color; Left, Center, and Right alignment; Numbered and Bulleted lists; Decrease Indent and Increase Indent.

  The Foreground and Background buttons allow us to select the foreground and background colors from the dialog shown in Figure 5-26. The Foreground color button changes the color of the selected text; the chosen color is inserted in HTML as a color attribute of the FONT tag for example, <FONT color=#ff69b4>. The Background color button changes the background of the selected text; a chosen color is inserted in HTML as an inline style in the FONT tag for example, <FONT style="BACKGROUND-COLOR: #eee8aa">.

  Figure 5-26. Select Color dialog

  

Table 5-5. HTML Placeholder Styles

Style	What It Does
Normal	<P> tags are inserted into the HTML that is created for the placeholder.
Formatted	<PRE> tags are inserted; the text is displayed using a fixed font such as Courier.
Address	<ADDRESS> tags are inserted; the text is displayed in italics.
Headings 1 6	<H1> <H6> tags are inserted for different levels of headings; in IE the text is made boldface, with sizes of 24, 18, 14, 12, 10, and 8, respectively.
Numbered List	<OL> tags are inserted for the list, and <LI> tags are inserted for the list items; the text is displayed as a numbered list with Arabic numbers starting at 1.
Bulleted List	<UL> tags are inserted for the list, and <LI> tags are inserted for the list items; the text is displayed as a bulleted list with a small round black bullet.
Directory List	<DIR> tags are inserted for the list, and <LI> tags are inserted for the list items; the text is displayed as a bulleted list with a small round black bullet.
Menu List	<MENU> tags are inserted for the list, and <LI> tags are inserted for the list items; the text is displayed as a bulleted list with a small round black bullet.
Definition Term and Definition	<DL> tags are inserted for the list, and <DT> and <DD> tags are inserted for the list items, respectively; the definitions are indented.
Paragraph	<P> tags are inserted around selected text.

Adding Images and File Attachments

Any file that can be inserted in or attached to a page is known as a site resource. Examples include images, audio and video files, Adobe PDF files, and other files that are required on the CMS site. A file of any type can be a resource. Resources can be shared between multiple pages using resource galleries. A resource gallery provides virtual storage space for the site resources. The resource gallery can contain individual resources and other resource galleries. The resource gallery hierarchy is created and maintained by site administrators and resource managers.

NOTE: We will look into management of resource galleries and resources in Chapter 16.

Resource types that can be rendered inline and viewed in a browser are images and video files in the following formats:

• Image formats: GIF, JPEG, PNG, BMP

• Video formats: ASF/ASX, AVI, MPEG/MPG, MOV/QT

All other resources are rendered not inline, but as links pointing to a resource; therefore, they are called file attachments. File attachments can be of any type; a file attachment may be displayed with an icon showing the file type. How the linked file is viewed is determined by a client's browser and the applications available on the client computer. For example, Adobe PDF files require an additional viewer (Acrobat Reader) to be installed on the client machine.

NOTE: By default, Flash animations will display as an attachment rather than an embedded inline page element. It is possible to change this behavior programmatically using the Publishing API. For example, the content authors add the Flash animation as an attachment, but the code in the template dynamically accesses the attachment's URL and displays the content inline. Another approach is to create a custom placeholder control for Flash resources. Custom placeholders are discussed in Chapter 29.

Images and attachments can be added to placeholders from the resource galleries and from a local or network file system. The template designer may restrict this choice for a particular placeholder to resource galleries only.

Images can be added to HTML placeholders and single image placeholders. Attachments can be added to HTML placeholders and single attachment placeholders. Images and attachments are added to the multipurpose HTML placeholders using the buttons on the CMS toolbar on the top of the screen. Single image and single attachment placeholders provide clickable buttons at the top of the placeholder for adding images and attachments.

To add an image to an HTML placeholder, click the Insert Image button on the CMS toolbar; to add an image to a single image placeholder, click the Add Image button on the top of the placeholder. If the placeholder allows images from the file system and shared images from resource galleries, the dialog shown in Figure 5-27 is displayed. This dialog allows us to select images from resource galleries and local or network files. If the placeholder in the template doesn't allow the file system images, then the dialog shown in Figure 5-28 is displayed. This dialog only allows us to insert shared images from a resource gallery.

Figure 5-27. Insert Image Select Source dialog, with local files permitted

Figure 5-28. Insert Image Select Source dialog, with local files not permitted

Let's insert an image from a resource gallery; we will click the Insert Shared Image link. The Web Author displays the list of resource galleries set up on the CMS site that the current user has permissions to access (Figure 5-29).

Figure 5-29. Select Resource Gallery dialog

NOTE: As with the template galleries, it is possible to switch to the tree view in the Select Resource Gallery dialog. However, the same warning applies: If you don't have sufficient rights to view all galleries in the tree, you may not see the resource gallery you require.

The interface in the Select Resource Gallery dialog is organized in the same way as the interface in the Select Template Gallery dialog that we have discussed before. You can navigate to the resource gallery that stores the resource you need, and then click its name to open the Select Image dialog, as shown in Figure 5-30.

Figure 5-30. Select Image dialog

You can preview and then select the images by clicking the appropriate icon (refer to Table 5-4 for the icons and their functionality). After you've selected the image, the Insert Image dialog is displayed by the Web Author, asking you to provide optional properties for an image (Figure 5-31). If you want an image to become a hyperlink, then you need to provide a URL for the image to link to. You can either type the URL or use the Browse button to navigate to the page or channel you would like to link to using the Insert Hyperlink dialog (Figure 5-24). The alternate text for the image you specify becomes a value of the ALT attribute of the IMG tag for the image; some browsers display this text as a mouse tip. It is a good practice of Web design to provide all images on the site with the text for alternative representation. There are multiple uses for this text; for example, when the images are disabled in the browser, this text is displayed instead.

Figure 5-31. Insert Image dialog

After you've typed the text for alternative representation, click Insert, and the image is inserted into a placeholder. Figure 5-32 shows an image inserted into the single image placeholder; Figure 5-33 shows the same image inserted into the HTML placeholder.

Figure 5-32. Image inserted into a single image placeholder

Figure 5-33. Image inserted into an HTML placeholder

If you want to insert an image from local storage, you need to click the Insert Local Image link in the Select Source dialog (Figure 5-27), and the Web Author displays an Insert Image dialog for the local image source, as shown in Figure 5-34. This dialog provides the ability to browse to the required image; to preview the image; to select a file type from a list of GIF, JPEG, PNG, and BMP image types; and to type in alternate text for the image. After you've specified the necessary parameters, click Insert, and the image is inserted into a placeholder. You can also copy and paste, or drag and drop, images into an HTML placeholder, provided the local images are allowed in this particular placeholder.

Figure 5-34. Insert Image dialog for local image

NOTE: Local files aren't added to the CMS resource gallery. For example, if you want to use a file on multiple pages, it may be better to import it into a resource gallery first and then insert it into the page. In this case, there is only one copy of the resource in the CMS database that is shared between multiple pages.

Attachments are inserted in the placeholders in the same way as images. To add an attachment to an HTML placeholder, click the Insert Attachment button on the CMS toolbar; to add an attachment to a single attachment placeholder, click the Add Attachment button on the top of the placeholder. The Web Author displays the Insert Attachment Select Source dialog (Figure 5-35), which allows us to browse the resource galleries and the file system, if the latter is allowed by the placeholder's properties set up by the template designers.

Figure 5-35. Insert Attachment Select Source dialog

After the attachment has been selected, the Web Author displays the Insert Attachment dialog box (Figure 5-36), which allows us to set the text for the link to this attachment. An example of an attachment inserted into a single attachment placeholder is shown in Figure 5-37.

Figure 5-36. Insert Attachment dialog

Figure 5-37. Placeholder with inserted attachment