content manager manual contentcafé 2contentcafe.net/uploads/content_2.0.pdf · contentcafe 2.0...

Content Manager Manual ContentCafé 2.0

http://www.contentcafe.net/ | [email protected]

Copyright 2006-2012 Net Innovations, LLC All Rights Reserved.

2

ContentCafe 2.0 Coldfusion Content Manager Manual

Table of Contents

Section 1: Welcome to ContentCafé! ............................................. 4 Supported Web Browsers .................................................... 4 Definitions......................................................................... 4

Section 2: Logging into Your ContentCafé Site ................................ 6

Section 3: Page Modes & The Interface.......................................... 8 Read Mode ........................................................................ 8 Edit Mode.......................................................................... 8 Preview Mode .................................................................... 9

Section 4: Element Menus ..........................................................10 Edit Content Data (or content element type specific text) .......10 Set Display Format ............................................................12 Content Options ................................................................12 Manage Cache ..................................................................14 View Versions ...................................................................16 Lock This Content..............................................................17 Save/Revert Content Changes.............................................17

Section 5: The Page Properties Tab..............................................21 Page Attributes .................................................................21 Optional Attributes ............................................................22 Page Security ...................................................................22 Template Settings for Pages ...............................................23 Template Attributes ...........................................................23 Template Settings for Templates .........................................24 Standard Content Element Options ......................................26 Create/Move/Delete Page ...................................................26 Show/Hide Control Panel ....................................................29 Manage Documents ...........................................................29 Logout .............................................................................34 Site Administration ............................................................34

Section 6: The Page Tab of the Control Panel ................................35 Save/Revert Options..........................................................35 Page Cache and Template Cache .........................................36 Past Versions....................................................................37

Section 7: The Site Tab of the Control Panel..................................38 Directory Management .......................................................38 Images ............................................................................39 Pages & Templates ............................................................40 Uploaded Documents .........................................................41 My Account.......................................................................46

3


Site Administration ............................................................46 Logout .............................................................................47

Appendix A: Content Element Data Forms.....................................48 Breadcrumb......................................................................48 ColdFusion Module.............................................................50 Container .........................................................................51 Embedded Object ..............................................................54 Formatted Text .................................................................56 Formatted Text and Image .................................................58 Google Analytics ...............................................................60 Google Search ..................................................................61 Image..............................................................................62 Image Group List ..............................................................64 List of Element Types.........................................................66 List of Images...................................................................70 List of Links ......................................................................73 Login ...............................................................................76 Logout .............................................................................77 News Item .......................................................................78 News List .........................................................................82 News List RSS Feed ...........................................................86 Page/Document List...........................................................88 Page/Document List RSS Feed ............................................92 Text ................................................................................93 Text Link..........................................................................95

Appendix B: Common Interfaces..................................................97 Formatted Text .................................................................97 Images ............................................................................98 Links ............................................................................. 101

4


Section 1: Welcome to ContentCafé! ContentCafé is a web site content management system that places the responsibility of creating and updating a web site’s content in the hands of the people who own the content. You can make changes to the content of your web site using a web browser and ContentCafé’s simple, intuitive interface. The end result is a web site with fresher content because the content is maintained directly by you. This manual describes how to maintain pages and templates within your site as well as resources used by those pages (e.g., images and uploaded documents). Instructions for installing ContentCafé are available in the Install Manual; for instructions on configuring your ContentCafé site (e.g., adding templates and style sheets) see the Administration Manual.

Supported Web Browsers ContentCafé supports a variety of web browsers. Below is a list of browsers that can be used with ContentCafé.

•Firefox 1.5 (or newer) – recommended •Internet Explorer 5.5 (or newer) •Netscape Navigator 7.2 (or newer) •Safari 3.0 (or newer) •Google Chrome 9.0 (or newer)

Your web browser must support JavaScript, sending/receiving cookies and pop-up windows from your ContentCafé site. See your web browser’s documentation for more information on enabling these features.

Definitions Definitions to common terms used in this manual are listed below.

Content Managers These are the people who will manage the web site’s content. Templates Templates are the building blocks for the web pages of your ContentCafé site. Each template provides a “shell” into which content managers can place their content.

5


Pages Pages hold the content that browsers will access from your site. Pages are based on a specific template that provides the “look” for the page. Content Elements Content elements are the web page components that content managers can manipulate on web pages (e.g., an image or a news item). These items are initially defined on the template used to derive the web page. Content Element Types Content element types are the available types of content in ContentCafé that can be used on templates and pages to define content. Types are identified by an “elementtype” attribute on templates (as described in the Administration Manual Section 2: Templates). A list of ContentCafé base “elementtype” values is listed in Appendix A of the Administration Manual. Data Forms Data forms are used in the ContentCafé interface to edit content elements. Each data form is specific to a content element type. Work in Progress When you change a content element’s data using a data form you create work in progress version of the content element. This is an unsaved version of the content element.

Content Displays Each content element has data components (text, links, etc). The HTML generated by these data components can be varied by selecting different content displays. Content displays take content element data and convert it to a specific HTML “look”. ContentCafé Site A ContentCafé site is a section of a web site with a distinct ContentCafé installation.

6


Section 2: Logging into Your ContentCafé Site To make changes to your ContentCafé site you need to log in using the account name and password assigned to you. Point your web browser to the “login.cfm” page for your site (e.g., http://www.mycompany.com/login.cfm or http://www.mycompany.com/hr/login.cfm). The login form for ContentCafé will be displayed, as shown in figure 2.1.

Figure 2.1: the login form

Enter your account name and password then click the “Login” button. If you successfully entered the account name and password, you will see a success message like the one shown in figure 2.2. The links listed on the page will vary depending on your permissions in the site. You will see a list of all of the pages on your site; clicking on a page name/url will take you to that web page in your site. If your account has permission, you may also see a link labeled “Site Administration” that takes you to the ContentCafé Site Administration page (see the Administration Manual for more information about the Site Administration page). You can now make changes within your ContentCafé site.

7


Figure 2.2: the login page after successfully logging in

8


Section 3: Page Modes & The Interface Every web page and template within ContentCafé includes a page mode indicator; if you navigate to a ContentCafé web page within your site after logging in you should see a page mode indicator like the one shown in figure 3.1.

Figure 3.1: the page mode indicator

The page mode indicator is used to switch between the different modes for viewing this web page, as described below.

Read Mode Read mode displays the page the way a non-authenticated account would view it (minus the page mode indicator). All content elements displayed are the saved versions.

Edit Mode Edit mode provides the ContentCafé interface that allows you to edit content elements on your pages/templates, create and manage pages and manage your site. When the page reloads in edit mode it shows tab-shaped content indicators above the content elements for this ContentCafé page/template with the content element name in the indicator. Moving the mouse over the tab indicator or selecting the tab indictor displays a drop down menu with the options available for modifying that content element. The colors of the content element tabs indicate the state of the content element. Green tabs are content elements that have not been changed since the last save; yellow tabs are content elements that have been modified but not saved (work in progress); blue tabs are past versions of content elements that have been replaced by newer versions. See figure 3.2 for an example of a web page in edit mode.

9


Figure 3.2: a ContentCafé page in edit mode

You may have only one page in edit mode at any time. Additionally, only one content manager account can be in edit mode on a specific page at one time.

Preview Mode Preview mode displays what the page changes made in edit mode would look like in read mode when those changes are saved; that is, the page is the edit mode version without the edit mode user interface displayed. Use this mode to verify your changes before saving those changes.

10


Section 4: Element Menus The tab indicators above content provide the options for changing individual content elements on a ContentCafé page or template. When you click on or move the mouse over the tab indicator, the options displayed are based on the state of the selected content element (e.g., the “Save/Revert” options are only available to content elements that have been modified but not saved). The drop down menu will look something like what is shown in figure 4.1. The bold text at the top of the menu (e.g. “Text Link”) indicates the content element type for this element. The links listed are options available for this content element. The “?” icons will display a popup help window with text relating to the option. This is an easy way to quickly get information about the functionality of ContentCafé.

Figure 4.1: the drop down menu for a content element

The possible options available under the tab indicator are listed below.

Edit Content Data (or content element type specific text) The information (data) for a content element can be stored locally (local content) or it can be content that is reusable across multiple pages (global) content. When the content element is set to use local content (the default) clicking on the “Edit Content Data” option will open a pop-up window that displays data forms for modifying the data components of the

11


selected content element. Most data forms are multiple tabs (e.g., “Text” and “Styles”), with similar data grouped under tabs. Each content element type has a distinct data form; all content elements derived from the same content element type use the same data form. That is, the data form for a breadcrumb is different from the data form for a news item; all news items will use the same data form – only the data in the form will be different. Appendix A of this manual provides detailed descriptions of the data forms for all of the base content element types that are included with ContentCafé. After making changes in the data form of a content element, you can click the “OK” button to submit the changes and close the data form window. The page/template will reload with your changes reflected (note the content indicator color will now be yellow) and the available options under the “Content” tab will change to reflect the update to this content element. Optionally, after making changes in the data form, you can click the “Apply” button to submit your changes. The page/template and control panel will reload behind the data form window; the data form window will remain opened. Clicking the “Cancel” button at this point closes the data form window; your applied changes still remain in effect. If the content element is set to use data from a global content element (see “Content Options” below) click on the “Edit Content Data” option opens a pop-up window (as shown in Figure 4.2) that lets the content manager select which global content element will be used as the data for this element. The “Show/Hide” button will display the content of the selected global content element. Clicking the “Select Content” button sets the currently selected content element to the selected global content element. The content element is set to a work in progress. See the Administration Manual, Section 10 to learn how to create a global content element.

12


Figure 4.2: the global content element selection form

Set Display Format When you click on the “Set Display Format” option, a popup window is shown with the possible displays for this content element type listed (see figure 4.3).

Figure 4.3: the content display form

The title and description of each content display is listed with the currently selected content display having a checkmark to the left and all other content displays having a “select” link to the right. Clicking the “select” link changes the content display for the content element to the selected display, closes the content display selection window and reloads the current web page. If the content element isn’t already a work in progress (has a yellow content indicator), it is made a work in progress (that is, content display changes must be saved to become active).

Content Options Content Options only appears when a currently published content element is selected (that is, an element with a green tab). When you click on this option a number of suboptions may appear.

13


The “Export Content” suboption allows a content manager to export the data for a content element and a specified display to an XML file that is downloaded to the content manager’s computer. This file can then be imported into another content element of the same content element type by using the “Import Content” suboption. When clicked, this suboption will open a pop-up where the content manager can either select the XML file to import or can paste the content of the XML file into a text box. Clicking on the “Import Data” button will attempt to import the data. The “Save as a Content Element Type” suboption lets a content manager save the current element, including all data, as a new content element type. For example, after a content manager defines a news item with some default styles they might want to save this element as a content element type named “My Site News”. Now the content manager can use the new content element and the styles, etc will be defaulted to the content element’s defaults. Clicking “Save as a Content Element Type” displays the form shown in Figure 4.4. The “Element name” and “Description” inputs provide feedback to other content managers as to the purpose of the element. The “Element type code” is used when defining content elements on a template (see the Administration Manual: Section 2): this must be a unique value for the site (the built-in element type codes are listed in the Administration Manual: Appendix A). Select the displays that will be applicable to the new content element type (at least one must be selected) and which display will be the default. Clicking the “Save Element Type” button will save the content element type. The element may now be used on templates and in containers. To edit the data for this content element type, use the “Content Element Types Management” option of the Site Administration page (see the Administration Manual: Section 8).

14


Figure 4.4: the form to define a global content element

The “Use Global Element Data” suboption appears if at least one global content element has been defined that is the same type as the currently selected element and the currently selected element is using local data. When clicked a pop-up window will display the form to select a global content element (shown in Figure 4.2). See “Edit Content Data” above for more information. The “Use Local Element Data” suboption appears if the currently selected content element is using global content data. When this suboption is clicked, the content element’s data is set to the last published “local element data” version of the content element. The content element is set to a work in progress.

Manage Cache ContentCafé uses cache files to improve page/template loading performance when in read mode. If a content manger accidentally removes a cache file (all are stored in the .htcache in the ContentCafé site) they can rebuild the cache file for a content element with this option. This option is only available for the saved version of a content element (a content element with a green content indicator).

15


Some content elements are considered static; they only change when a content manager saves a change to the content element. With these content elements, the only option under “Manage Cache” is to rebuild the static cache file, as shown in figure 4.5. Clicking the “Rebuild” option recreates the content element’s cache file.

Figure 4.5: the link to rebuilding a static cache

Other content elements are dynamic and, by default, their content is generated each time the page is requested. These content elements still have cache files but the cache files tell ContentCafé to always generate a fresh version of the content. You may override the default by specifying that a dynamic content element’s output should be cached for a certain number of minutes. This will reduce the amount of processing required to generate this content element. For example, if you have a content element that displays a list of news items and you only add news items a few times a week, you could set the news list item to cache for 60 minutes. The first request for the page that displays the news list would generate the content in the same manner as uncached dynamic content, but the content will also be cached for this content element. Subsequent requests for this content (in read mode) will used the cached content for the next 60 minutes. Figure 4.6 shows the Manage Cache form for a dynamic content element.

Figure 4.6: the cache form for dynamic content elements

Selecting a “Cache” option of “Never” and clicking the “Update settings/Rebuild cache” button will recreate the content element’s

16


cache file. This cache file tells ContentCafé to always generate the content element on each page request. Selecting a “Cache” option of “For X minutes” with a valid number of minutes and clicking the “Update settings/Rebuild cache” button will cache the output of the content element to a file. This cache file will be valid for the number of minutes entered. When the cache file expires, the next request for this content element will regenerate the content element and rebuild the cache file. The “Page” tab of the control panel has an option for rebuilding the cache files for all of the content elements on a page. See Section 6 for details.

View Versions The “View Versions” option allows content managers to view past versions of a content element. Clicking on this option displays a form below the “View Versions” option, as shown in figure 4.7.

Figure 4.7: the content versions form

The “Versions” drop down menu lists the comments and dates/times for each version of this content that has been saved. The most recently saved version includes the text “[active]”. Additionally, if the element has a work in progress version, the first element in the menu will be “Work in progress (unsaved changes)”. Select a version of the content element you wish to view and click on the “View Version” button. The page/template will reload with the selected version of the content element (all other content elements on the page/template will be their most recent versions). If this is not a work in progress version or the current saved version then the content indicator will be blue, indicating past content. You can make a past version of a content element a work in progress using the “Make this version a work in progress” link under the “Save/Revert Content Changes” option (see “Save/Revert Content Changes” below).

17


To view the current version of this page/template, select the first option in the “Versions” drop down menu and click the “View Versions” button.

Lock This Content This option is only available on templates. When you lock a content element on a template, pages that are derived from this template cannot change this content element. On a ContentCafé page, clicking on or moving the mouse over the content indicator for the locked content element will display a message, like the one shown in figure 4.8, in the “Content” tab.

Figure 4.8: text for an attempt to edit a locked content element

Clicking on the “edit the content on the template” link will take you to the template in edit mode. The “Lock This Content” option, when clicked, will display a form to lock/unlock the content element on the template (as shown in figure 4.9). Select the “Yes” or “No” option and click on the “Set Lock State” button.

Figure 4.9: the form to set the lock state of a content element on a template

Save/Revert Content Changes The “Save/Revert Content Changes” option will display a list of links based on the state of the content element currently selected. Figure 4.10 shows the options for a content element that is a work in progress.

18


Figure 4.10: options for a work in progress content element

A list of links that may be displayed for the “Save/Revert Content Changes” option:

Save this content’s changes – Prompts the content manager for comments for this content change. When the content manager clicks the “OK” button (or presses return), the changes are saved as the active version of the content element and the page/template reloads. Save all modified content on this page – If there is more than one modified content element on the current page, this option can be used to save all of the modified elements. Prompts the content manager for comments for this content change. When the content manager clicks the “OK” button (or presses return), the changes are saved as the active version for all modified content elements and the page/template reloads. Revert content to last saved version – The content manager is asked to verify that the content changes to this content element should be discarded. If the content manager verifies this, the page/template is reloaded with the content element reverted back to the last saved version. Notify a publisher – If the content manager cannot save changes (see the Administration Manual – Section 9: User Management), this option will be available instead of the “Save this content’s changes” option. When the “Notify a publisher” option is clicked a pop-up window opens with the form used to send email to a content manager who can publish (save) changes, as shown in figure 4.11. The “Publisher(s)” option lists the content managers who can publish content element changes on this site. The “Subject” is the subject for the email message while the “Message” is a comment on the content changes you wish to send to the selected publishers. The “Page” and “Content” fields are

19


informational; they show which page and content element has been changed. Clicking on the “Notify” button sends an email notification to the selected publishers and the results of the send are displayed. Click on the “Close” button to close the “Notify a publisher” pop-up window. Note that your ContentCafé site must have valid STMP settings for the email to be sent. See the Administration Manual Section 8: Site Settings.

Figure 4.11: the form to notify a publisher

Revert content to this published version – If you are viewing the last saved (active) version of this content element and the content element has a work in progress version, you can discard the work in progress. Clicking on this option reloads the page/template (you are not prompted to confirm this action). Make this version a work in progress – When viewing a past version of a content element, clicking this option will copy the past version to a work in progress. If the content element

20


already has a work in progress, you will be asked to confirm replacing that work in progress with the past version.

If you have multiple content element changes, you may want to save them all at the same time using the “Save/Revert Options” available under the “Page” tab (see Section 6).

21


Section 5: The Page Properties Tab Every page and template in ContentCafé has a “Page Properties” tab (see figure 5.1) that is used to update the properties of a page (title, description, security, etc) and to access other functionality of ContentCafé, such as creating new pages, managing uploaded documents and modifying your account.

Figure 5.1: the Page Properties tab and options

Page Attributes For pages, the Edit Content Data option displays a popup window with the form for modifying the properties of a page, as shown in figure 5.2. For pages this form is divided into 4 tabs. The first tab, “Page Attributes provides inputs for setting the title, description, keywords, page categories, if SSL is required to access the page and the page creation date/time. Additionally, there is a link to edit the template from which this page is derived.

22


Figure 5.2: the Page Properties form for a ContentCafé page

Optional Attributes The “Optional Attributes” tab provides inputs for setting the pages Activation and Expiration dates and optional image to associate with this page (used in some content displays of the Page/Document List element) and header tags (HTML tags that will be placed in the HEAD section of the web page). Note that the header tags defined on a page will override any header tags specified on the template.

Page Security To require user authentication to view this web page, click on the “Page Security” tab. The pop-up window that opens displays radio buttons that allow you to make the current page viewable without entering a password (“No authentication required”), by any user that

23


can enter a valid account name and password (“Any authenticated user”) or only certain valid account names (“Specific authenticated accounts”) – see figure 5.3.

Figure 5.3: the “Page Security” pop-up window

For more information on login and logout pages see the Administration Manual, “Section 13 – Customizing Login/Logout”.

Template Settings for Pages The template settings tab lets you choose values for setting options defined on the template used to derived the page. For example, a template might define a template setting used to signify if the page should display a sidebar. See “Template Settings for Templates” below for a description of how to define and use a template settings.

Template Attributes For templates, the Edit Content Data option displays a popup window with the form for modifying the properties of a page, as shown in figure 5.4. The “Template Attributes” tab allows you to change the title of the template and to specify any HTML tags that should appear in the HEAD section of the web page.

24


Figure 5.4: the Page Properties form for a ContentCafé template

Template Settings for Templates On templates, the “Template Settings” tab shows the interface for defining template variables (see figure 5.5). The “Template settings” menu lists all of the template settings currently defined for this template and the “Options” let you add, edit and delete settings. Clicking the “Add a New Setting” tab will display a form for adding a new template setting (see figure 5.6). The “Variable name” input is the name that will be displayed to content managers when they make a template setting selection on a page (see “Template Settings for Pages” above). It is also used in the CFM file for the template to perform the action you want to this variable to control (more details below). The “Variable type” is the presentation of the selectio interface for values for this template setting. The choices available are radio buttons, select menus or a text input. The “Default value” defines the value for this setting that will be applied by default.

25


Figure 5.5: the Template Settings interface for a ContentCafé template

Figure 5.6: the interface for adding a new template setting

Once you have added a template setting to a template and saved the changes to the Page Properties tab (see “Save/Revert Content Changes in Section 4) you can use the setting in the CFM file for the

26


template. These settings are exposed through the Coldfusion variable “request.page.settings[{variable-name}]”. For example:

<cfoutput> #request.page.settings['navbar-text-color']#

</cfoutput> could be used to output the selected value of the “navbar-text-color” template setting. As good coding practice you should make sure any template setting is defined before it is used in the template. The cfparam tag provides this functionality, e.g.:

<cfparam name="request.page.settings[‘navbar-text-color']" default="##46c"> The “Edit Selected Setting” button of the “Template Settings” form displays the same form shown in figure 5.6 but with the selected template setting’s values filled in the inputs. The “Delete Setting” button will delete the selected template setting after prompting you to confirm the deletion.

Standard Content Element Options The standard content element options (e.g. “Set Display Format”, “Manage Cache”, etc) behave exactly the same for the “Page Properties” tab as for any other content element. For example, after changing the title of a page you would have to save the change (using the “Save/Revert Content Change” option).

Create/Move/Delete Page When clicked, this option displays links to create a new ContentCafé web page, copy the current page to a new page, move the current page to a new file name or delete the current page (when viewing a template the create option is the only option available). The “Create a new page” link opens a pop-up window with the page creation form displayed, as shown in figure 5.7.

27


Figure 5.7: the create page form

The “Page Information” tab has the required fields for creating a page. The page title field is the value within the <TITLE> tags of the HTML document and identifies the page within ContentCafé. The file name is the name of the page within this ContentCafé site/directory without the file extension (e.g., use “index” rather than “index.cfm”). The “Template” field specifies which of your site’s ContentCafé templates will be used for this page. The “Directory” specifies which directory in your site this page should be created in. The “Optional Attributes” tab is shown in figure 5.8. All of the fields in this tab are not required to create a ContentCafé page. The “Keywords” and “Description” inputs are used for <META> tags in your document. The categories are the previously defined page categories (see the Administration Manual Section 4: Category Management). The activation can be set so the page is immediately available or available after a certain date and time. By selecting the “Activate at:” option and clicking the calendar icon you can specify the date and time the page will be available; enter the time first at the bottom of the pop-up window then click on the date to select a date and time.

28


Figure 5.8: the optional attributes for a new page

The expiration can be set so the page is always available (never expires) or available up to a certain date and time. By selecting the “Expire on” option and clicking on the calendar icon you can specify the date and time the page expires. The “Image” option lets you assign an image for this page. These images may be used by content displays of the Page/Document List element to provide a thumbnail of the page.

29


Once you have filled out the form, click on the “Create Page” button. Your page will be created and your browser will load the new page in edit mode. You may now modify the page as described in Section 4. The “Copy this page to a new page” and “Move this page” options open a pop-up window that contains the “Create Page” form with the fields defaulted to the values for the current page. Change the fields for the new file (noting that the page title and file name must be unique within the selected directory) and click the “Copy Page” or “Move Page” button. The new page is created and your browser loads the new page in edit mode. The content elements on the new page are copies of the content elements on the original page. The “Delete this page” option asks you to confirm deletion of this page. If you confirm, the components for this page (content element database entries, content element cache files, page data entries, etc.) are deleted.

Show/Hide Control Panel The “Show Control Panel” option will display the ContentCafé control panel for managing site assets (directories, images, etc) and page level controls (page cache, page versions, etc). The control panel appears to the left of the page and consists of two tabs: “Site” and “Page”. The “Hide Control Panel” option removes the control panel from the left of the page. See Section 6 of this manual for more information about the Page tab and Section 7 for more information about the Site tab.

Manage Documents In ContentCafé uploaded documents are non-HTML documents, such as PDFs and Microsoft Word documents, which are added to a site. Clicking the “Uploaded Documents” option displays the document management options, as shown in figure 5.9.

30


Figure 5.9: the document management options.

The “Manage uploaded documents” option is used to add, update and delete uploaded documents. Clicking on this link opens a pop-up window for managing uploaded documents, as shown in figure 5.10.

Figure 5.10: the page for managing uploaded documents

The window contains two tabs: “Existing Documents” and “Add a Document”.

Adding a Document When you select this tab, the form for adding a new document is displayed, as shown in figure 5.11.

31


Figure 5.11: the form to add a new uploaded document

The “Document title” is the title that ContentCafé will display for this document and the “Description” is a brief description of the document. The “Categories” list lets you select the uploaded document categories for this document; click on the “Manage document categories” link to add, update and delete uploaded document categories (see the Administration Manual – Section 4: Category Management for information on managing categories). The “Document to add” options let you either upload the document directly from your computer or select a document that has been previously FTP’d to the “uploads/temp” directory of

32


your ContentCafé site. This document must be one of the allowed uploaded document types assigned to this ContentCafé site (see the “Allowed uploaded document types” option below). The “Image” and “URL” fields let you associate an image and URL to this document. Some content displays use this information when displaying the document. See Appendix B: Common Interfaces for information on how to select images and URLs in ContentCafé. When you click the “Add Document” button ContentCafé will attempt to add your document to the “uploads” directory of your ContentCafé site. ContentCafé will display a success message or an error message indicating that the document could not be uploaded.

Updating a Document

Selecting a document in the “Existing Documents” tab of the uploaded documents management window and clicking on the “Edit Selected Document” button opens a pop-up window with a form to update the selected uploaded document. This form is exactly like the “Add a Document” tab with all of the fields pre-filled with values from the selected uploaded document.

Deleting a Document

Selecting a document in the “Existing Documents” tab of the uploaded documents management window and clicking the “Delete Selected Document” button will prompt you to confirm deleting this document. If confirmed, the document is deleted from the ContentCafé site.

The “Uploaded document categories” option, when clicked, opens a new pop-up window that allows the content manager to edit uploaded document categories. See the Administration Manual Section 4: Category Management for more information on adding, updating and deleting uploaded document categories. The “Allowed uploaded document types” option controls which types of documents can be uploaded to this ContentCafé site. Clicking on this option opens a new pop-up window for managing uploaded document types, as shown in figure 5.12.

33


Figure 5.12: the “Existing Types” tab for Uploaded Document Types

Editing an Uploaded Document Type Selected an uploaded document type from the “Document types” menu and clicking the “Edit Selected Type” button opens the form to edit the document type below the “Edit Selected Type” button (see figure 5.13).

Figure 5.13: the form to edit an uploaded document type

The “Document description” describes the uploaded document type. The “MIME type” identifies the type of uploaded document for ContentCafé. Official MIME types for documents are listed at http://www.iana.org/assignments/media-types/. The “File extensions” field is a comma-separated list of document extensions for this uploaded document type (without the ‘.’). Clicking on the “Update Document Type” will update this uploaded document type in ContentCafé.

34


Deleting an Uploaded Document Type Selecting an uploaded document type and clicking the “Delete Selected Type” button will delete the uploaded document type (you are not prompted to confirm this deletion).

The “Add a New Type” tab lets you add a new uploaded document type. The form for adding a new uploaded document contains the same fields described in the “Editing an Uploaded Document Type” documentation above.

Logout The “Logout” option will log you out of your ContentCafé web site and reload the current page. Note that after logging out the page mode indicator will be hidden. It is important to log out ContentCafé before quitting your web browser. This will free any page locks you may have for your current editing session.

Site Administration This option only appears under the Page Properties tab if your ContentCafé account has been given access to the Site Administration page (see the Administration Manual – Section 11: Account Management). Clicking on this option takes you to the Site Administration page. See the Administration Manual for more information.

35


Section 6: The Page Tab of the Control Panel The “Page” tab of the control panel displays page/template level options when this tab is selected (the tab is labeled “Template” when editing a template but the functionality is the same). The options in the Page tab, listed below, vary depending upon the state of the current page/template.

Save/Revert Options Clicking on “Save/Revert Options” displays a list of options depending on the state of the page being edited. The possible options are:

Save all modified content - Prompts the content manager for comments for these content changes. When the content manager clicks the “OK” button or presses return, all of the changed content elements are saved and the page/template reloads. All of the content element changes will be stamped with the same time stamp and comments.

Notify a publisher - If the content manager cannot save changes (see the Administration Manual – Section 9: User Management), this option will be available instead of the “Save all modified content” option. When the “Notify a publisher” option is clicked, a pop-up window opens with the form used to send email to content managers who can publish (save) changes, as shown in figure 6.1. The “Publisher(s)” option lists the content managers who can publish content element changes on this site. The “Subject” is the subject for the email message while the “Message” is a comment on the content changes you wish to send to the selected publishers. The “Page” field is informational; it shows which page has been changed. Clicking on the “Notify” button sends an email notification to the selected publishers and the results of the send are displayed. Click on the “Close” button to close the “Notify a publisher” pop-up window. Note that your ContentCafé site must have valid STMP settings for the email to be sent. See the Administration Manual Section 9: Site Settings.

36


Figure 6.1: the publisher notification form

Revert all content to last saved version – When clicked, this option will prompt to confirm discarding content element changes. If confirmed, ContentCafé will revert all changed content back to the last saved version and reload the page/template.

Page Cache and Template Cache Clicking on the “Page Cache” or “Template Cache” option displays a link to rebuild the cache files used by this page/template, as shown in figure 6.2.

Figure 6.2: the link to recreate page cache files When clicked, this link rebuilds the cache files for all of the content elements on this page/template. This option can be useful if a content element’s cache file is accidentally deleted from a ‘.htcache’ directory.

37


Past Versions The “Past Versions” option lets you view older versions of the selected page/template. When clicked, a form appears below the “Past Versions” option, as shown in figure 6.3.

Figure 6.3: the page “past versions” form

The “Versions” dropdown menu allows you to select versions based on the comment and date/time the version was published. Selecting a version and clicking on the “View” button will display the selected version of the page/template. The control panel will also reload and the Page tab will contain red box indicating that you are viewing a past version of the page/template. As it indicates, you can select the “In-progress” version to view the current version of the page. Clicking on the “Preview” mode of the page mode indicator will show the selected version without the edit mode content indicators. Past elements are displayed with blue content indicators. See “Save/Revert Content Changes” in Section 4 for information on how to make a past version a work in progress.

38


Section 7: The Site Tab of the Control Panel The “Site” tab has options for manipulating ContentCafé site objects such as directories, images and uploaded documents. Below is a description of each option.

Directory Management The “Directory Management” option of the “Site” tab provides the interface for creating new subdirectories and deleting existing subdirectories within your ContentCafé site. Clicking on this option opens a pop-up window with the “Existing Subdirectories” tab displayed, as shown in figure 7.1.

Figure 7.1: the Directory Management pop-up window

Selecting a subdirectory and clicking the “Delete Selected” button will delete subdirectory if it does not contain other subdirectories or ContentCafé pages. The “Add a Subdirectory” tab displays a form for adding a new subdirectory to your ContentCafé site. The “Directory name” field is the name of the directory that will be used in URLs for pages within this directory. The “Directory description” is used by content elements like breadcrumbs to display a more descriptive name for the directory. The “Parent directory” is the location within your ContentCafé site where this directory will be created.

39


After filling out the form, click on the “Create New Directory” button to create the directory. The results of the creation of the new directory will be displayed.

Images This option allows you to view and manipulate images that have been added to your ContentCafé site and to manipulate image categories. The two options that appear when this option is selected are “Manage site images” and “Image categories”. Clicking on the “Manage site images” option opens a new pop-up window which allows you to add new images or to search for existing images, as shown in figure 7.2.

Figure 7.2: the “Manage site images” pop-up window

The interface for adding and searching for existing images is exactly the same as the interface for selecting an image in the data form of a content element. See Appendix B: Common Interfaces for more information. Unlike content element data forms, when you search for existing images you can click on an image to get image property information. A new pop-up window opens with two tabs: the “Image” tab displays the image and the “Attributes” tab displays information about the image, as shown in figure 7.3. The “Image URL”, “Width” and “Height” fields are informational. The “Default ‘Alt’ text” field is the default text that will be used for the ‘alt’ attribute of the image tag when this image is used in content elements. The “Categories” list allows you to change the categories for this image. The “Manage image categories” link opens a new pop-up window where you can add, modify and delete image categories; see the Administration Manual – Section 4: Category Management for instructions for managing categories.

40


Figure 7.3: the “Attributes” tab of the image properties window

Pages & Templates The “Pages & Templates” option, when clicked, displays a form below this option (see figure 7.4).

Figure 7.4: the “Pages & Templates” form

The “Directory” option allows a content manager to select a directory in the current ContentCafé site and, by clicking the “List Pages”

41


button, get a list of pages for that site with creation, activation and expiration dates/times for those pages. Each page also has links to “view” or “edit” the page. Clicking on the “view” link loads the page in the main browser window in read mode; clicking the “edit” link loads the page in the main browser window in edit mode. The “Templates” option lists the templates installed in this ContentCafé site. Selecting a template and clicking the “Edit Template” button takes the browser to that template in edit mode. The “Categories” option has the “Edit page categories” link. When this link is clicked, a new pop-up window opens allowing the content manager to edit page categories. See the Administration Manual – Section 4: Category Management for more information on adding, updating and deleting page categories.

Uploaded Documents In ContentCafé uploaded documents are non-HTML documents, such as PDFs and Microsoft Word documents, which are added to a site. Clicking the “Uploaded Documents” option displays the document management options, as shown in figure 7.5.

Figure 7.5: the document management options.

The “Manage uploaded documents” option is used to add, update and delete uploaded documents. Clicking on this link opens a pop-up window for managing uploaded documents, as shown in figure 7.6.

42


Figure 7.6: the page for managing uploaded documents

The window contains two tabs: “Existing Documents” and “Add a Document”.

Adding a Document When you select this tab, the form for adding a new document is displayed, as shown in figure 7.7.

43


Figure 7.7: the form to add a new uploaded document

The “Document title” is the title that ContentCafé will display for this document and the “Description” is a brief description of the document. The “Categories” list lets you select the uploaded document categories for this document; click on the “Manage document categories” link to add, update and delete uploaded document categories (see the Administration Manual – Section 4: Category Management for information on managing categories). The “Document to add” options let you either upload the document directly from your computer or select a document that has been previously FTP’d to the “uploads/temp” directory of your ContentCafé site. This document must be one of the

44


allowed uploaded document types assigned to this ContentCafé site (see the “Allowed uploaded document types” option). The “Image” and “URL” fields let you associate an image and URL to this document. Some content displays use this information when displaying the document. See Appendix B: Common Interfaces for information on how to select images and URLs in ContentCafé. When you click the “Add Document” button ContentCafé will attempt to add your document to the “uploads” directory of your ContentCafé site. ContentCafé will display a success message or an error message indicating that the document could not be uploaded.

Updating a Document

Selecting a document in the “Existing Documents” tab of the uploaded documents management window and clicking on the “Edit Selected Document” button opens a pop-up window with a form to update the selected uploaded document. This form is exactly like the “Add a Document” tab with all of the fields pre-filled with values from the selected uploaded document.

Deleting a Document

Selecting a document in the “Existing Documents” tab of the uploaded documents management window and clicking the “Delete Selected Document” button will prompt you to confirm deleting this document. If confirmed, the document is deleted from the ContentCafé site.

The “Uploaded documents categories” option, when clicked, opens a new pop-up window that allows the content manager to edit uploaded document categories. See the Administration Manual Section 4: Category Management for more information on adding, updating and deleting uploaded document categories. The “Allowed uploaded document type” option controls which types of documents can be uploaded to this ContentCafé site. Clicking on this option opens a new pop-up window for managing uploaded document types, as shown in figure 7.8.

45


Figure 7.8: the “Existing Types” tab of the Uploaded Document Types window

Editing an Uploaded Document Type Selected an uploaded document type from the “Document types” menu and clicking the “Edit Selected Type” button opens the form to edit the document type below the “Edit Selected Type” button (see figure 6.9).

Figure 7.9: the form to edit an uploaded document type

The “Document description” describes the uploaded document type. The “MIME type” identifies the type of uploaded document for ContentCafé. Official MIME types for documents are listed at http://www.iana.org/assignments/media-types/. The “File extensions” field is a comma-separated list of document extensions for this uploaded document type (without the ‘.’). Clicking on the “Update Document Type” will update this uploaded document type in ContentCafé.

46


Deleting an Uploaded Document Type Selecting an uploaded document type and clicking the “Delete Selected Type” button will delete the uploaded document type (you are not prompted to confirm this deletion).

The “Add a New Type” tab lets you add a new uploaded document type. The form for adding a new uploaded document contains the same fields described in the “Editing an Uploaded Document Type” documentation above.

My Account When the “My Account” option allows you change the settings related to your account including your password (see figure 7.10).

Figure 7.10: the “My Account” pop-up window

Make any modifications to your account settings and click to “Update Account” button to save your changes.

Site Administration This option only appears in the site tab if your ContentCafé account has been given access to the Site Administration page (see the

47


Administration Manual – Section 9: User Management). Clicking on this option takes you to the Site Administration page. See the Administration Manual for more information.

Logout The “Logout” option will log you out of your ContentCafé web site and reload the current page. Note that after logging out the page mode indicator will be hidden. It is important to log out of ContentCafé before quitting your web browser. This will free any page locks you may have for your current editing session.

48


Appendix A: Content Element Data Forms This appendix contains descriptions of the data forms content managers will use to manipulate the base content elements of ContentCafé. Many of these data forms contain image, link and/or formatted text components; this documentation will refer to Appendix B: Common Interfaces for manipulating those common components.

Breadcrumb Breadcrumb content elements provide a list of links that act as a navigation path from the top of the site to the current page. This path provides the user with easy access to the major sections of your site in the context of the current web page being viewed. Generally, breadcrumb content elements are placed on a template and locked (see Section 4: The Content Tab – Lock This Content) so they cannot be changed on a page derived from the template. This provides a consistent breadcrumb look across all pages. The data form for a breadcrumb content element consists of two tabs: the “Optional Attributes” tab and the “Styles” tab. The Optional Attributes tab allows the content manager to select an image or text to prepend (“Start option”) to the breadcrumb’s links, to separate (“Divider option”) the links and to append (“End option”) to the breadcrumb’s links. Figure A.1 shows the Optional Attributes tab in the data form for a breadcrumb content element. Selecting “none” for the start, divider or end option displays “[none selected]” to the right of the option. Selecting “text” displays a text input to the right of the option where the content manager can enter the text. Selecting “image” displays the image selection buttons to the right of the option; see “Appendix B: Common Interfaces – Images” for a description of how to select an image.

49


Figure A.1: the Optional Attributes form for a breadcrumb content element

The “Styles” tab, shown in figure A.2, is used to set the CSS style classes for the breadcrumb’s components.

Figure A.2: the “Styles” tab for a breadcrumb content element

The “Content container” style is for the DIV HTML tags that surround this content element. The “Link text” style is for the text/links that

50


comprise the breadcrumb’s path. The “Start text”, “Divider text” and “End text” styles are applied to the text for these optional attributes. The “Start image”, “Divider image” and “End image” styles are applied to the image for these optional attributes.

ColdFusion Module The ColdFusion Module content element allows you to use custom code within your ContentCafé pages. The CFML code for your ColdFusion Modules is placed within the “cfmodules” directory of your ContentCafé site. Content managers can then select the module using the data form for the ColdFusion Module content element. For information on how to write and install a ColdFusion Module see the Administration Manual Appendix A: Base Content Element Types. The data form for ColdFusion Modules consists of three tabs: “Module”, “Parameters” and “Styles”. The “Module” tab is shown in Figure A.3; it consists of a single field, “ColdFusion module”, which allows the content manager to select a module previously uploaded to the “cfmodules” directory of the ContentCafé site.

Figure A.3: the “Module” tab of the ColdFusion Module content element

The “Parameters” tab, as shown in figure A.4, is used to pass parameters into the ColdFusion module as “name=value” pairs. To add a parameter, click the “New Parameter” button then enter the parameter name and its value into the text field and click on the “Add” button. To delete a parameter, select the parameter from the listed “name=value” pairs and click on the “Delete Selected” button. Note, if you specify parameters the selected ColdFusion module must be coded to accept those parameters. Parameters are passed into the module through the “attributes” structure.

51


Figure A.4: the “Parameters” tab of the ColdFusion Module content element

The “Styles” tab, shown in figure A.5, is used to set the CSS style classes for the ColdFusion Module’s components. The “Content container” style is for the DIV HTML tags that surround the output of the ColdFusion Module content element. The “Default text content style” specifies the CSS class to apply to text output by the ColdFusion Module.

Figure A.5: the “Styles” tab of the ColdFusion Module content element

Container Container content elements act as a “well” for content managers to drop other content elements into. This creates a stack of a variety of distinct content elements within a single content element. The data form for the container content element has four tabs: “Existing Content”, “Add New Content”, “Activation/Expiration” and “Styles”. The “Existing Content” tab, shown in figure A.6, displays the content element names and their content types defined for this container. The order displayed in the menu “Content objects” is the order the content elements are displayed on the web page. Selecting a content element and clicking the “Move Content Up” or “Move Content Down” button will change the order of the content elements in the list.

52


Clicking on the “Remove Content” button will remove the content from the “Content objects” list. The content object is actually removed from the list when the content manager clicks on the “OK” or “Apply” button.

Figure A.6: the “Existing Content” tab for a container content element

The “Add New Content” tab provides a form for adding new content elements to this container (see figure A.7). Selecting a content type, entering a name and clicking the “Add Content” button will add the content element to the “Content objects” list of the Existing Content tab.

53


Figure A.7: the “Add New Content” tab for a container content element

The “Activation/Expiration” tab sets optional activation and expiration dates and times. Figure A.8 shows the form to set these dates/times. Clicking on the calendar icon allows the content manager to select the date and time; enter the time first then click on the date to make a selection.

Figure A.8: the “Activation/Expiration” tab for a container content element

The “Styles” tab provides the interface for manipulating the CSS styles for a container (shown in figure A.9). The “Content container” style is for the DIV HTML tags that surround the container content element. The “Active content” and “Inactive content” styles are used by some content displays to highlight the active content.

54


Figure A.9: the “Styles” tab for a container content element

Embedded Object Embedded Object content elements are multimedia objects like audio and video. This content element displays the multimedia object using the EMBED HTML tag with the source URL for the object pointing to either a ContentCafé uploaded document or an external object. The data form for Embedded Object content elements consists of three tabs: “Embed Options”, “Viewer Options” and “Styles”, as shown in figure A.10. The “Embed Options” tab controls the EMBED HTML tag and the standard attributes for that tag. The “Source URL” points to the source file for this object (e.g., an audio file). This can be a ContentCafé uploaded document or an external URL; see the “Links” section of Appendix B: Common Interfaces for more information on selecting links. The “Hide controller” option determines if the controller for the object should be displayed. “Width”, “Height” and “Alignment” are used for the display of the controller; the “Name” option can be used by JavaScript to manipulate the embedded object.

55


Figure A.10: the “Embed Options” tab for Embedded Objects content

elements

The “Viewer Options” tab allows a content manager to add additional “name=value” pairs to the EMBED HTML tag (e.g., “autoplay=false”). Figure A.11 shows the “Viewer Options” tab. Entering “name=value” pairs into the text input and clicking the “Add’ button adds the text to the list of viewer options; selecting a “name=value” pair from the list and clicking the “Delete Selected” button removes the viewer option selected from the list.

56


Figure A.11: the “Viewer Options” tab for Embedded Objects content

elements

The “Styles” tab, shown in figure A.12, has only one option: “Content container” is used to select the CSS style for the DIV tag that contains the Embedded Object content element.

Figure A.12: the “Styles” tab for the Embedded Object content element

Formatted Text The Formatted Text content element provides a word processor-style interface (Xinha) that allows content managers to enter formatted text into their web pages. Figure A.13 shows the data form for the Formatted Text content element. This data form consists of two tabs: “Text Items” and “Styles”. The “Text Items” tab has optional “Header text” and “Footer text” inputs and the “Content” input which is a Xinha formatted text editor. See Appendix B: Common Interfaces for a description of the formatted text editor Xinha.

57


Figure A.13: the “Text Items” tab of the Formatted Text content element

The “Styles” tab lets a content manager set the CSS styles for each component of the Formatted Text content element. The “Content container” is used to select the CSS style for the DIV tag that contains the Formatted Text content element (see figure A.14). The “Header text”, “Content text” and “Footer text” menus are applied to the header, content and footer text components, respectively.

58


Figure A.14: the “Styles” tab of the Formatted Text content element

Formatted Text and Image The Formatted Text and Image content element is similar to the Formatted Text content element but allows content managers to add an optional image with the formatted text. The data form for the Formatted Text and Image content element, shown in figure A.15, has four tabs. The formatted text input is on the “Formatted Text” tab while the header and footer are on the “Optional Text tab”. Text and style selections for these components are the same as the Formatted Text content element.

59


Figure A.15: the “Formatted Text” tab for the Formatted Text and Image

content element The “Image & Links” tab is shown in figure A.16. See Appendix B: Common Interfaces for information on updating images and links.

60


Figure A.16: the “Image & Links” tab for the Formatted Text and Image

content element

The “Styles” tab contains the same styles as the Formatted Text content element plus a style menu for the image.

Google Analytics This content element embeds the Google Analytics (http://www.google.com/analytics/) JavaScript code into web templates and pages. Figure A.17 shows the data form for this content element.

Figure A.17: The “Analytics Parameters” tab of the Google Analytics content

element

61


This data form consists of the “Analytics Parameters” tab, where the ‘_uacct’ value from Google Analytics is entered. For example, if Google Analytics tells you to enter this tracking code to your web page:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-999999-1"; urchinTracker(); </script>

The content manager would enter “UA-999999-1” into the form.

Google Search The Google Search content element displays a search form that will be submitted to Google’s search engine. This search can be limited to a specific web domain. The data form for the Google Search content element has two tabs: “Google Parameters” and “Styles” (see figure A.18).

Figure A.18: the “Google Parameters” tab of the Google Search content

element

The “Google Parameters” tab allows a content manager to specify the domain to search against (e.g., ‘mycompany.com’). If left blank, searches will return results not limited to a specific domain.

62


The “Text label” field is the text before the search text input. The “Text input size” field specifies the SIZE attribute of the INPUT HTML tag. The “Search button text” is the text that will appear within the button that users will click to submit the search to Google. Figure A.19 shows the “Styles” tab for the Google Search content element. The “Content container” is used to select the CSS style for the DIV tag that contains the Google Search content element. The “Text label”, “Text input” and “Submit button” styles apply to the text label, search text input and submit button of the search form, respectively.

Figure A.19: the “Styles” tab of the Google Search content element

Image The Image content element displays a single image added to ContentCafé; its data form has three tabs: “Image & Link”, “Optional text” and “Styles”, as shown in figure A.20.

63


Figure A.20: The “Image & Link” tab of the Image content element

The “Image & Link” tab provides interfaces for manipulating the image and link for the Image content element. See Appendix B: Common Interfaces for information on updating images and links. The “Optional Text” tab has text inputs for entering a header and footer for this Image content element, as shown in figure A.21.

Figure A.21: The “Optional Text” tab of the Image content element

The “Styles” tab (shown in figure A.22) is used to set the CSS styles for the components of the Image content element. The “Content container” is used to select the CSS style for the DIV tag that contains the Image content element. The “Image”, “Header text” and “Footer

64


text” apply to the image, header and footer of the Image content element, respectively.

Figure A.22: the “Styles” tab of the Image content element

Image Group List An Image Group List content element is a list of ContentCafé images that match specific image categories. Figure A.23 shows the three-tab data form used to modify Image Group List elements.

Figure A.23: the “Image Categories” tab of the Image Group List content

element

The “Image Categories” tab lets content managers select the image categories for the images to display. Additionally the number of images returned by the search can be limited.

65


The “Optional Attributes” tab, shown in figure A.24, allows the content manager to select an image or text to prepend (“Start option”) to the images in the image group list, to separate (“Divider option”) the images and to append (“End option”) to the end of the image group list. Selecting “none” for the start, divider or end option displays “[none selected]” to the right of the option. Selecting “text” displays a text input to the right of the option where the content manager can enter the text. Selecting “image” displays the image selection buttons to the right of the option; see “Appendix B: Common Interfaces – Images” for a description of how to select an image.

Figure A.24: the Optional Attributes form of the Image Group List content

element The “Styles” tab displays the form for selecting CSS styles for each component of the Image Group List content element (see figure A.25). The “Content container” is used to select the CSS style for the DIV tag that contains the Image Group List content element. The “Image default” and “Alternate text” options specify the style to apply to each image and its alternate text, respectively. The “Start text”, “Divider text” and “End text” styles are applied to the text for these optional attributes. The “Start image”, “Divider image” and “End image” styles are applied to the image for these optional attributes.

66


Figure A.25 the “Styles” tab of the Image Group List content element

List of Element Types The List of Element Types content element will display a series of content elements of a specified type using either dynamic criteria or a manually selected list. When a List of Element Types content element is first placed on a web page and edited the data form displays a drop down menu of content element types that can be listed, as shown in figure A.26.

Figure A.26 the “Element Type” tab for List of Element

67


Selecting a content element type updates the content of the “Selection” and “Element Styles” tabs to reflect the selected type. The “Selection” tab, as seen in figure A.27, lets you specify if the list will be based on dynamic criteria or manually selected.

Figure A.27 the “Selection” tab with dynamic selection

For dynamic criteria, all element types have the “Templates” and “Subsites” menus and then options based on the content element type selected (e.g., the news element lets you specify criteria for the Title, Thumbnail Text, Image Text, Element Categories and Release Date). The “allow form inputs to override this value” checkbox can be used to have form input values act as the criteria for generating the list. For example, if you had a form with a “title” input that submits to a page with a List of Element Types content element you could have that list based on the “title” value submitted.

68


Specifying criteria here will determine the list of elements that are displayed. It is strongly recommended that only at most three criteria are specified for the list; specifying more will result in slowing list generation. For manual criteria check the “manual selection of elements” radio button in the “Selection” tab then move elements to the “Pages to list” menu (see figure A.28). Hovering the mouse over any of the elements listed will display the page title and URL associated with the element.

Figure A.28 the “Selection” tab with manual selection

The “Miscellaneous” tab, shown in figure A.29, lets you fine tune the list. You can list all elements found or just the top X elements, decide if the current page should be included in the list, only show the list when processing a form (cgi.request_method eq “POST”), the text for the link to the element/page, whether the link goes to the page or the element on the page and the text to display if no elements are found that match the criteria specified.

69


Figure A.27 the “Miscellaneous” tab

The “Dividers” tab, shown in figure A.28, allows the content manager to select an image or text to prepend (“Start option”) to the images in the image list, to separate (“Divider option”) the images and to append (“End option”) to the end of the image list.

Figure A.28 the “Dividers” tab

Selecting “none” for the start, divider or end option displays “[none selected]” to the right of the option. Selecting “text” displays a text input to the right of the option where the content manager can enter the text. Selecting “image” displays the image selection buttons to the right of the option; see “Appendix B: Common Interfaces – Images” for a description of how to select an image.

70


The “List Styles” tab is used to specify the styles for the list (see figure A.29). These styles are independent of the content element type selected under the “Element Type” tab.

Figure A.29 the “List Styles” tab

The “Element Styles” tab displays style selections for the components of the content element type selected under the “Element Type” tab (see the description of each content element in the appendix for more information on available options under this tab).

List of Images An Image List content element is a list of ContentCafé images that are manually selected by a content manager. Figure A.30 shows the data form used to manipulate Image List content elements. The “Images” tab lists the images in this Image List content element. The order of the images in the list is the order they will be displayed. Selecting an image and clicking the “Move Image Up” or “Move Image

71


Down” button will move the position of the selected element. Clicking the “Delete Selected Image” button will delete the selected Image. Selecting an image from the list and clicking the “Edit Selected Image” button will open a pop-up window to edit the selected image; clicking the “Add an Image” button will open a pop-up window to add a new element. In both cases the pop-up window’s contents is the data form for an Image content element; see the “Image” section above for a description of the data form for an Image content element.

Figure A.30: the “Images” tab of the Image List content element

The “Optional Attributes” tab, shown in figure A.31, allows the content manager to select an image or text to prepend (“Start option”) to the

72


images in the image list, to separate (“Divider option”) the images and to append (“End option”) to the end of the image list. Selecting “none” for the start, divider or end option displays “[none selected]” to the right of the option. Selecting “text” displays a text input to the right of the option where the content manager can enter the text. Selecting “image” displays the image selection buttons to the right of the option; see “Appendix B: Common Interfaces – Images” for a description of how to select an image.

Figure A.31: the “Optional Attributes” tab of the Image List content element

The “Styles” tab displays the form for selecting CSS styles for each component of the Image List content element (see figure A.32). The “Content container” is used to select the CSS style for the DIV tag that contains the Image List content element. The “Image default” and “Alternate text” options specify the style to apply to each image and its alternate text, respectively. The “Start text”, “Divider text” and “End text” styles are applied to the text for these optional attributes. The “Start image”, “Divider image” and “End image” styles are applied to the image for these optional attributes.

73


Figure A.32: the “Styles” tab of the Image List content element

List of Links The List of Links content element is a list of HTML links (URLs) entered by a content manager. The links may point to ContentCafé web pages, ContentCafé uploaded documents and/or external (non-ContentCafé) URLs. Figure A.33 shows the data form for the List of Links content element. The “Links” tab lists the links for this content element; the order the links are in the menu is the order they will appear when displayed. Selecting a link from the list and clicking the “Move Link Up” or “Move Link Down” button moves the selected link in the list. Selecting a link and clicking the “Delete Selected Link” button will delete the link from the list. Clicking on the “Add a Link” button provides the interface to add a new link to the list. Selecting a link from the list and clicking the “Edit Selected Link” button allows modification of the selected link. In both

74


cases a pop-up window opens with the Text Link content element interface to add/edit a link (see Text Link below for information on this interface).

Figure A.33: the “Links” tab for the List of Links content element

The “Optional Attributes” tab, shown in figure A.34, allows the content manager to select an image or text to prepend (“Start option”) to the links in the list of links, to separate (“Divider option”) the links and to append (“End option”) to the end of the list of links. Selecting “none” for the start, divider or end option displays “[none selected]” to the right of the option. Selecting “text” displays a text input to the right of the option where the content manager can enter the text. Selecting “image” displays the image selection buttons to the

75


right of the option; see “Appendix B: Common Interfaces – Images” for a description of how to select an image.

Figure A.34: the “Optional Attributes” tab for the List of Links content

element

The “Styles” tab displays the form for selecting CSS styles for each component of the List of Links content element (see figure A.35). The “Content container” is used to select the CSS style for the DIV tag that contains the List of Links content element. The “Link text default” option specifies the style to apply to each link in the List of Links content element. The “Start text”, “Divider text” and “End text” styles are applied to the text for these optional attributes. The “Start image”, “Divider image” and “End image” styles are applied to the image for these optional attributes.

76


Figure A.35: the “Styles” tab for the List of Links content element

Login The login content element displays a login form with inputs for an account name and a password. The accounts are created in the “User Management” section of the Site Administration page (see the Administration Manual Section X: User Management). Figure A.36 shows the data form for the login content element with the “Form Items” tab selected. This tab is used to define the labels for the account name and password fields and the text for the submit button. The “Styles” tab, shown in figure A.37, lets you specify the styles for the components of the login content element as well the text for any error message generated by the login process.

77


Figure A.36: the “Form Items” tab of the Login content element

Figure A.37: the “Styles” tab of the Login content element

Logout The logout content element will log out the current account when a page is loaded which contains one of these elements. To prevent logout while building a logout page, append “?testing=yes” to the URL for the page (e.g., http://www.myserver.com/logout.cfm?testing=yes).

78


The data form for the Logout content element, shown in figure A.38, lets you specify the logout message that is displayed when the user is logged out and the styles for the content element container and the logout message.

Figure A.38: the “Text” tab of te Logout content element

News Item A News Item content element is an object consisting of a short text abstract, a longer description and optional images and links. These items are often used for news items but, by using News Categories (see the Administration Manual Section 4: Category Management), can be used for other purposes (e.g., events or conference sessions). Figure A.39 shows the data form for a News Item content element. It consists of four tabs for entering new item data: “News Text”, “Images & Links”, “Miscellaneous” and “Styles”. The “News Text” tab has inputs for entering the title, abstract (short description) and full text of the news item. The “Title” input is a plain text input while the “Abstract” and “Full text” inputs are formatted text inputs (see Appendix B: Common Interfaces – Formatted Text).

79


Figure A.39: the “News Text” tab for the News Item content element

The “Image & Links” tab, shown in figure A.40, provides the interface for adding a thumbnail (small version) image, a full size image, and link for more information. The “Thumbnail text” and “Image text” fields are used for “alt” tags and captions for the thumbnail and full size image, respectively. See Appendix B: Common Interfaces for information on manipulating images and links.

80


Figure A.40: the “Images & Links” tab for a News Item content element

The “Miscellaneous” tab allows setting news categories and a release date for this news item, as shown in figure A.41. Select news categories from the list shown or click on the “Manage news categories” link to modify news item categories (see the Administration Manual Section 4: Category Management for more information).

81


Figure A.41: the “Miscellaneous” tab of the News Item content element

The “Styles” tab allows the content manager to apply CSS styles to the components of the news item (see figure A.42). The “Content container” is used to select the CSS style for the DIV tag that contains the News Item content element. The “Title”, “Abstract text”, “Full text”, “Thumbnail ‘Alt’ text”, “Image ‘Alt’ text” and “Release date” styles are text styles applied to their respective components of the news item. The “Thumbnail” and “Image” styles are applied to the thumbnail and full image of the news item, respectively. The “Link text” style is applied to the optional link component of the news item.

82


Figure A.42: the “Styles” tab for the News Item content element

News List The News List content element displays a list of news items based on criteria selected by the content manager. The criteria can be page or news categories, templates used to generate the page or subdirectories of your ContentCafé site. Figure A.43 shows the data form for the News List content element.

83


Figure A.43: the “News Selection” tab of the News List content element

The “News page templates” field allows for the selection of any template or select templates that contain a News Item content element. Selecting template(s) will return pages that are derived from the selected template(s). The “News categories” field allows for selection of news items of any news category or specific categories. The “Page categories” fields works in the same manner but with page categories rather than news categories. The “Page directories” field selects pages in any directory or limited only to the specified directories. Figure A.44 shows the “Limit/Order” tab is used to limit the number of news items returned and to specify order of the news. The “Range start date” and “Range end date” are optional parameters for setting a range for news item release dates selected. The “News items to display” can be set to return “All Items” or the most recent X number of news items. The “Sort news items by” field specifies the news item field to sort the news list by (either Release date or News Item Title), either ascending or descending.

84


Figure A.44: the “Limit/Order” tab of the News List content element

The “Miscellaneous” tab, shown in figure A.45, is used to specify a text header for the news list, a link to an RSS feed, the RSS link’s text, an RSS link image and a “No news” text field to display when a news list does not return any news items (see Appendix B: Common Interfaces for information about manipulating images and links).

85


Figure A.45: the “Miscellaneous” tab of the News List content element

The “Styles” tab is used to specify CSS styles for the components of a news list (see figure A.46). The “Content container” is used to select the CSS style for the DIV tag that contains the News List content element. The “Title”, “Abstract text”, “Full text”, “Thumbnail ‘Alt’ text”, “Image ‘Alt’ Text” and “Release date” style menus set the text style classes for their respective components of the News List content element. The “Thumbnail” and “Image” style menus are used to set the CSS styles for the images components of the News List content element. The “Link text” field sets the style of the link of each news item.

86


Figure A.46: The “Styles” tab for the News List content element

News List RSS Feed Similar to the News List content element, the News List RSS Feed content element provides a list of news items for use in RSS. Because this content element is designed to display RSS code rather than HTML, it should only be used in templates designed specifically for RSS (see the Administration Manual Section 2: Template Management).

87


Figure A.47 shows the data form for the News List RSS Feed. The “News Selection” and “Limit/Order” tabs in this data form are the same as the News List content element (described above).

Figure A.47: the “News Selection” tab for the News List RSS Feed content

element

The “RSS Attributes” tab, shown in figure A.48, is used to set RSS attributes for the news feed. These include the title, a link for more information about this feed, a description of the feed, an image for the RSS feed (see Appendix B: Common Interfaces for information on manipulating images in ContentCafé), a copyright statement and the email addresses of the managing editor and webmaster for this news feed.

88


Figure A.48: the “RSS Attributes” tab of the News List RSS Feed content

element

Page/Document List Page/Document List content objects display a list of ContentCafé web pages and/or uploaded documents. The criteria for selecting pages and documents is specified by the content manager and can include

89


page/document categories, subdirectories, templates, and document types (for uploaded documents). Figure A.49 shows the data form for the Page/Document List content element.

Figure A.49: The “Pages/Documents” tab of the Page/Document List content

element

The “Pages/Documents” tab is used to enter the criteria for pages and uploaded documents displayed in the page/document list. Checking the checkboxes for pages and uploaded documents enables selection of ContentCafé pages and uploaded documents. The criteria for selecting ContentCafé pages can be based on the subdirectory of the ContentCafé site, page categories or templates used to derive pages. The criteria for selecting uploaded documents can be based on the uploaded document categories or document types.

90


The “Limit/Order” tab allows the content manager to specify a maximum number of pages/uploaded documents to display and the sort order for the list, as shown in figure A.50. Lists can be sorted by page/document title, page creation date or subdirectory.

Figure A.50: the “Limit/Order” tab of the Page/Document List content

element

The “Optional Attributes” tab has the divider options and the RSS attributes for the Page/Document list content element (see figure A.51). This tab allows the content manager to select an image or text to prepend (“Start option”) to the list of pages/documents, to separate (“Divider option”) the pages/documents and to append (“End option”) to the end of the list of pages/documents. Selecting “none” for the start, divider or end option displays “[none selected]” to the right of the option. Selecting “text” displays a text input to the right of the option where the content manager can enter the text. Selecting “image” displays the image selection buttons to the right of the option; see “Appendix B: Common Interfaces – Images” for a description of how to select an image. The RSS link is for specifying the link to an RSS page for this page/document list. The text and image are the text/image the user will click on to go to the RSS page.

91


Figure A.51: the “Optional Attributes” tab for the Page/Document List content

element The “Styles” tab, shown in figure A.52, is used to specify CSS styles for the components of a page/document list. The “Content container” is used to select the CSS style for the DIV tag that contains the Page/Document List content element. “Page/Document text default” is the default text style for the list of pages/documents. The “Start text”, “Divider text” and “End text” styles are applied to the text for these optional attributes. The “Start image”, “Divider image” and “End image” styles are applied to the image for these optional attributes.

92


Figure A.52: the ”Styles” tab for the Page/Document List content element

“RSS link text” and “RSS link image” styles are applied to the RSS text and image components, respectively.

Page/Document List RSS Feed Similar to the Page/Document List content element, the Page/Document List RSS Feed content element provides a list of ContentCafé pages and/or uploaded documents for use in RSS. Because this content element is designed to display RSS code rather than HTML, it should only be used in templates designed specifically for RSS (see the Administration Manual Section 2: Template Management). The first two tabs of the Page/Document List RSS Feed content element (“Pages/Documents” and “Limit/Order”) are exactly the same as the Page/Document List content element’s data form.

93


The “RSS Attributes” tab, shown in figure A.53, is used to specify additional information in the RSS feed. The title, description and copyright text are informational text for the viewer of the RSS feed. The “RSS link” field is a link for more information on the RSS feed or the site providing the RSS feed. The “RSS image” field is an image to include with the RSS feed. The “Publication date” is an informational date for when the RSS feed was published. The “Managing editor” and “Webmaster” fields are email addresses for the content and technical contacts for this RSS feed.

Figure A.53: the “RSS Attributes” tab of the Page/Document List RSS Feed

content element

Text The Text content element allows the content manager to enter plain text into a web page. Figure A.54 shows the data form for the Text content element.

94


Figure A.54: the “Text Items” tab of the Text content element

The “Text Items” tab has optional “Header text” and “Footer text” inputs and the “Content” input for the plain text content for the page. The “Styles” tab lets a content manager set the CSS styles for each component of the Text content element. The “Content container” is used to select the CSS style for the DIV tag that contains the Text content element (see figure A.55). The “Header text”, “Content text” and “Footer text” menus are applied to the header, content and footer text components, respectively.

95


Figure A.55: the “Styles” tab of the Text content element

Text Link The Text Link element displays a simple text link (URL). Figure A.56 shows the data form for the Text Link content element.

Figure A.56: the “Text Link” tab of the Text Link content element

The “Text Link” tab is used to enter the text and link. The “Link URL” is entered using the common interface for links (see Appendix B: Common Interfaces). The “Styles” tab, shown in figure A.57, is used to set the CSS styles for each component of the Text Link content element. The “Content

96


container” is used to select the CSS style for the DIV tag that contains the Text Link content element. The “Text/link style” is applied to the text for the text link.

Figure A.57: the “Styles” tab of the TextLink content element

97


Appendix B: Common Interfaces Content elements that contain formatted text, images and/or links use a common interface to enter these components into the data forms of the content elements. Below is a description of the formatted text, image and link interfaces.

Formatted Text The formatted text editor used with ContentCafé is the Xinha HTML editor (see figure B.1); more information on the Xinha project is available at http://xinha.webfactional.com/.

Figure B.1: the Xinha text editor Most of the options available in Xinha are similar to standard word processing applications; a few options below may help you when using Xinha.

Enlarges the Xinha HTML editor so it covers the entire pop-up window; this can be useful when you are entering a large amount of text. Clicking the icon again resizes the editor to its original size.

Toggles between the HTML and HTML source view modes. In HTML source view mode the HTML tags used to create the text can be edited.

98


These icons can be used to clean up text that has been pasted into a formatted text editor from another application. If the text entered into the editor can’t be converted into XML, ContentCafé will notify you of the problem and not save your changes.

The “Styles” list to the right of the area where HTML text is entered is generated from the style sheets available for template. Each class listed was assigned to the “formatted_text” object. See the Administration Manual Section 3: Style Sheets for more information on CSS styles.

Images Content elements that have image components display the image selection interface shown in figure B.2. The previously-selected image is shown to the left of the buttons for selecting an image.

Figure B.2: the interface for selecting an image Clicking the “Add a new image” button opens a pop-up window, shown in figure B.3. The “Upload Image” tab has two radio buttons for specifying where the image to add is located, either on your computer or previously FTP’d to images/temp in your ContentCafé site.

Figure B.3: The “New Image” tab with the form to specify where the new image is located.

99


After specifying the image’s location (via the ‘Browse’ button or selecting the image and clicking the ‘Add Image’ button) the properties form is displayed, as shown in Figure B.4. If the image needs to be uploaded to the server, it can take a while for this form to appear depending on the image size and your Internet connection.

Figure B.4: The “New Image” tab with the image properties

The “Image file name” field is the file name on the web server for this image minus the image’s extension. The “Image description” will be used as the ‘alt’ attribute of the IMG HTML tag. The “Image categories” can be used to categorize the image for selection later. The “Image size” options are only available if your ColdFusion server supports CFCs. If it does, the “Scale this image” checkbox lets you resize the image. Unless you have a very fast Internet connection, it is best to size the image on your local computer before uploading it to your ContentCafé site. The “Rotate this image” option will rotate the image 90 degrees left or right.

100


Once your have filled in the form for the properties of this image, click the “Add Image” button to add this image to your ContentCafé site. The image will also be selected in the content element’s data form. If you click the “Select an existing image” button in the data form for a content element, a pop-up window opens that allows for the selection of an image previously added to this ContentCafé site (see figure B.5).

Figure B.5: the “Existing Image” form for selecting an image

This form allows the content manager to display images based on a category with a specified number of images per page displayed. When the “Display” link is clicked the matching images are displayed, as shown in figure B.6.

Figure B.6: the results of an existing image search

If there are more images than will fit on one web page, “Next”, “Previous” and individual page links appear at the bottom of the page. Hovering the mouse over an image will display the ‘alt’ text for the image and the image’s size. To select an image, click on the image.

101


Links Changing links is handled through the “Change link” button in the data form of a content element, as shown in figure B.7.

Figure B.7: the “Change link” button

Clicking on this button opens the pop-up window used to select links (See figure B.8). This form is used to select the type of link and the parameters for that link.

Figure B.8: the “Change link” form

The “No Link” option specifies that there is no link. This option can be useful if you want to specify the link at a later time. The “ContentCafé Page” option displays a form for selecting a ContentCafé page, as shown in figure B.9. The “Directory” field specifies where in this ContentCafé site the page is located; if this field is changed, the “Page” menu gets updated. The “Page” field lists the ContentCafé pages for the selected directory. The “Make this a secure (https) URL” checkbox uses the secure “https” protocol rather than “http”.

102


Figure B.9: the “ContentCafé Page” selection form

The “Content” field lets you select the content element to navigate the browser on the page. “Top of this page” is the default and will take the browser to the top of the selected page; the other options will “jump” to the selected content element on the selected page. The “Window options” checkbox, when checked, will open the selected page in a new browser window when the link is clicked. The width and height of the new window can be specified as well; these options only work if the browser clicking the link supports JavaScript, otherwise the page opens in a new browser window sized to the browser’s default size. The “ContentCafé Uploaded Document” option of the link selection window is used to select an uploaded document (see figure B.10). The “Category” field can be used to limit the list of uploaded documents that appear in the “Documents” menu.

Figure B.10: the “ContentCafé Uploaded Document” selection form

The “Other link” option of the link selection window is used to specify a link outside of the current ContentCafé site, as shown in figure B.11.

103


Figure B.11: the “Other link” selection form

The “URL” field must be a full URL (that is, starting with “http” or “https”). The “Open link in a new window” checkbox will open the link in a new browser window when the link is clicked. The width and height of the new window can be specified as well; these options only work if the browser clicking the link supports JavaScript, otherwise the page opens in a new browser window sized to the browser’s default size. Once a link is entered, clicking on the “Change Link” button will set the link in the data form to the selected link. The link selection window will then close.