Eztasktitanium Documentation USER MANUAL

® ezTaskTitanium Documentation

USER MANUAL

1. ezTaskTitanium - The Basics 5 1.1 Login to your website ...... 5 1.2 Page Management ...... 6 1.2.1 Sorting Pages ...... 7 1.2.2 Add & Rename a Page ...... 8 1.2.3 Copy a Page ...... 9 1.2.4 Set Meta Tags for a Page ...... 10 1.3 Page Editing ...... 11 1.3.1 Drag & Drop ...... 12 2. Layouts 13 2.1 1 Column ...... 14 2.2 2 Column ...... 15 2.3 3 Column ...... 16 2.4 TabStrip ...... 17 2.5 Content Rotator ...... 19 2.6 Toggle ...... 21 3. Modules 23 3.1 Calendar ...... 24 3.1.1 Options ...... 25 3.1.2 Importing an iCal file ...... 26 3.1.3 Calendar Properties ...... 27 3.1.4 Links to Calendar: Copy RSS Feed ...... 28 3.1.5 Links to Calendar: Copy iCal Link ...... 29 3.1.6 Adding and Modifying Categories ...... 30 3.1.7 Aggregating Calendars ...... 32 3.1.8 Adding/Editing A Single Event ...... 33 3.1.9 Adding/Editing Recurring Events ...... 38 3.2 Communicator - News & Events ...... 42 3.2.1 Settings & Options ...... 43 3.2.2 Add Article ...... 45 3.2.3 Edit and Manage Articles ...... 46 3.3 Directory Module ...... 49 3.3.1 Settings & Options ...... 50 3.3.2 Creating a Spreadsheet ...... 51 3.3.3 Importing Files ...... 52 3.3.4 Editing a Simple Directory ...... 54

3.3.5 Add a Record ...... 57 3.3.6 Delete a record ...... 58 3.3.7 Configuring a Directory ...... 59 3.3.7.1 Secure Email ...... 61 3.3.7.2 Adding Photos ...... 63 3.4 Document Manager ...... 65 3.4.1 Settings & Options ...... 66 3.4.2 Specifying Open or Download a file ...... 67 3.4.3 Document Sorting and Display ...... 68 3.4.4 Uploading Documents ...... 70 3.4.5 Folder Options ...... 73 3.4.6 Securing a File ...... 75 3.4.7 Direct Links to a file ...... 77 3.5 Form Builder ...... 78 3.5.1 Settings & Options ...... 79 3.5.1.1 Setting up form requirements ...... 80 3.5.2 Create a Form ...... 83 3.5.3 Form Reports ...... 88 3.6 Mega Menu ...... 90 3.6.1 Settings & Options ...... 92 3.6.2 Using the Mega Menu Editor ...... 93 3.6.3 Add Edit Delete Mega Menu Items ...... 95 3.6.4 Add Edit Delete Mega Menu Submenu Items ...... 97 3.7 Menus ...... 99 3.7.1 Settings & Options ...... 99 3.7.2 Select Menu Type and Animation ...... 100 3.7.3 Add Edit Delete Menu Items ...... 102 3.7.4 Add Edit Delete Menu Submenu Items ...... 104 3.8 Site Map ...... 106 3.8.1 Settings & Options ...... 107 3.8.2 Creating a Site Map ...... 109 4. Widgets 111 4.1 Code Object ...... 112 4.1.1 Example Code Objects ...... 114 4.2 Image ...... 115 4.2.1 Settings & Options ...... 116 4.2.2 Example: Editing an Image ...... 117 4.2.3 Example: Linking an Image ...... 120 4.3 Image Gallery ...... 121

4.3.1 Settings & Options ...... 122 4.3.2 Example: Uploading Photos and Resizing the Gallery ...... 123 4.3.3 Selecting the Gallery Style ...... 126 4.3.4 Gallery Style: Rotating Banner ...... 127 4.3.5 Gallery Style: Slideshow ...... 128 4.3.6 Gallery Style: Slideshow with Thumbnails ...... 130 4.3.7 Gallery Style: Slideshow with Navigation ...... 132 4.3.8 Gallery Style: Lightbox ...... 133 4.4 Media Player ...... 136 4.4.1 Settings & Options ...... 137 4.4.2 Importing a Video and Resizing the Media Player ...... 138 4.5 Text Editor ...... 140 4.5.1 Settings & Options ...... 141 4.5.2 Example: Adding Text, an Image and a Hyperlink ...... 144 4.5.3 Example: Adding a Table ...... 147 4.6 RSS Feed ...... 151 4.6.1 Settings & Options ...... 151 4.6.2 Standard RSS Listing ...... 153 4.6.3 Calendar Text Listing ...... 155 4.6.4 Calendar Object ...... 157 Index 0

1 ezTaskTitanium - The Basics 1.1 Login to your website

Login to your account The login to your account can be found by opening a browser and entering your domain / edit. Enter your Login ID and Password

Example: http://www.mydomain.com/edit

1.2 Page Management

Project Manager You will log directly into the Project Manager. The Project Manager is your control center for all of your pages.

1.2.1 Sorting Pages Sorting Pages There are two options for sorting or grouping your webpages for easy management. · Click on the Blue column name at the top of each column to sort by that column alphabetically. You can sort or group by Page Name, Group, Status, Modified date, Published date, and Modified By.

· Additionally, you can group your pages by clicking and selecting from the 'by Status' option at the top of the Project Manager.

1.2.2 Add & Rename a Page

Add a Page Add a webpage two ways: · Click on Options under the Project Manager and select 'Add a webpage' · Select 'Actions' on any webpage and select 'Add a webpage' from the options.

Rename a Page To rename, hover your cursor over Actions for that page and select Page Properties, edit or replace the page name.

1.2.3 Copy a Page

Copy a Page Hover over Actions for the page you wish to copy and select 'Copy this page'. The page will be copied with a '- copy' at the end of the page name. Select Page Properties to rename the page.

1.2.4 Set Meta Tags for a Page

Set Meta tags for a single page Hover over Actions for the page you wish to set Meta tags and select 'Meta tags'. The Page Meta Tags pop-up window will appear. Complete the form and click 'Apply'

1.3 Page Editing

Edit a Page Edit a page by clicking on the page name or by hovering over Actions for that page and selecting 'Edit'

Page Manager overview

1.3.1 Drag & Drop Using Titanium drag and drop in designing your page · In the initial page layout you will see 'Drop here!' text where you can drag your Layouts, Modules, and Widgets. Click on the icon you wish to include in your page and drag your cursor to the 'Drop here!' location and release the cursor. · Once that drop zone is occupied you can drag additional items by dragging the item icon to above or below the existing item until you see a red line, then release the cursor and your selected item will appear in that area.

In this example we drop a Text Editor just below an existing Text Editor headline.

2 Layouts Layout selection dictates how your content will be arranged on the page. Each layout will create a drop zone on the page where you can then load additional modules and widgets.

2.1 1 Column

Select a one column layout to display your content in a single block. Begin by clicking on the 1-Col Layout and dragging it to the desired location.

Drop additional modules, widgets, or layouts in your one column layout. Here is an example of a Text Editor with an image inside a one column layout.

2.2 2 Column

Select a Two Column Layout to divide the outside container into two sections. The width of each section can be customized. Begin by clicking on the 2-Col Layout and dragging it to the desired location.

Adjust the width of the divisions by clicking on the dividing bar (turning it blue) then dragging it to the desired width. You can adjust the width at anytime.

Drop additional modules, widgets, or layouts in each drop zone of your two column layout. Here is an example of a Text Editor with an image inside a two column layout with menus on the left.

2.3 3 Column

Select a Three Column Layout to divide the outside container into three sections. The width of each section can be customized. Begin by clicking on the 3-Col Layout and dragging it to the desired location.

Adjust the width of the divisions by clicking on the dividing bar (turning it blue) then dragging it to the desired width. You can adjust the width at anytime.

Drop additional modules, widgets, or layouts in each drop zone of your three column layout. Here is an example of a Text Editor with an image and Dropdown list inside a three column layout.

2.4 TabStrip

Use the TabStrip for adding layers of content in a limited space on a webpage and adding multiple options within one text area. Begin by clicking on the TabStrip and dragging it to the desired location.

Options:

· Add a tab: Enter a title for your tab and hit “apply”. Repeat for more tabs. Click on any tab to “Drag and Drop” “any widget” onto the tab.

· Add more tabs: Click the + sign at the end of your tabs list.

· Modify a tab: Click the + sign and select your tab from the tab list dropdown and change the tab name or delete the tab.

· Deleting a tab will also delete “all content associated with that tab”.

Here is an example of a three tab layout in Design and Preview mode.

2.5 Content Rotator

The content Rotator layout is used to randomly rotate any content dropped into the widget. Stack content widgets inside the Rotator Layout to randomly rotate content container. Begin by clicking on the Content Rotator and dragging it to the desired location.

· Click on the top left menu option of the Content Rotator and select Settings.

· Specify the number of areas to view when randomly rotating content in Attributes.

Example: If you have 3 widgets that are rotating, by setting number content areas to display to 1, only 1 widget will show at a time during preview.

2.6 Toggle

The content Toggle layout is used when you want to toggle between hiding and showing large amounts of content. Begin by clicking on the Toggle Layout and dragging it to the desired location.

Click on the 'Add a Title' icon to add a title for your Toggle, the Properties pop-up will appear. Enter the Title and select "Expand this toggle on open" if you would like for it to appear open when displaying the webpage.

Example:

3 Modules Modules provide extended functionality to your web page. From Calendars, to Document Managers, to Menus, Modules let you create dynamic functionality for your website.

3.1 Calendar

Aggregated, multi-layered calendaring permits users to manage one or multiple calendars with Google Calendar™, Calendar for Mac OS X, Microsoft Outlook™, or any client that supports standard iCal formatting. Visitors can download, subscribe to, and or print customized calendars with just those events they want to see.

With the Calendar module you can:

· Import events: Import an ICAL file from Qutlook or any other calendar that exports to the ICAL format.

· Manually add events: Right click on the desired day and simply choose "New appointment".

· Group and color code your events: Choose the calendar settings icon to add a new group. Group examples: Holidays, Closings, upcoming events, etc.

· Recurring events: Choose event details to set recurring options.

To begin using the Calendar module click on the Modules tab at the bottom of the page and then click and drag the Calendar Module to the desired location.

3.1.1 Options There are three Options for the Calendar Module: Import, Properties, Links for iCal

Upload iCal: Upload/Import events from an iCalendar file generated by a Google or Outlook Calendar. Used for importing events.

Calendar Properties: iCal link, RSS Feed Url, Add/modify event types for this Calendar.

Add a link to this Calendar to sync with a dynamic iCalendar.

3.1.2 Importing an iCal file iCal (short for iCalendar) is a computer file format supported by a large number of products, including Google Calendar, Apple Calendar (formerly known as iCal), and Microsoft Outlook. Within ezTask Titanium you can upload an iCal (.ics) file to import calendar data or you can link/sync to another Calendar using the iCal calendar data exchange.

To upload content from another Calendar. Export and save the calendar content to an iCal (.ics) file on your local computer.

Uploading an iCalendar (.ics) file:

· Click the 'Import Calendar Events' button, then click 'Click to Browse or Drop files here...' and navigate to the location of your local iCal file and select.

3.1.3 Calendar Properties

Click on the 'Calendar Properties' icon.

Here you can copy the iCal link or RSS Feed link for THIS calendar to import and link to another Calendar. You also can customize the event Categories by color and name.

3.1.4 Links to Calendar: Copy RSS Feed RSS (Rich Site Summary; originally RDF Site Summary; often called Really Simple Syndication) uses a family of standard web feed formats to publish frequently updated information: blog entries, news headlines, audio, video.

Exporting THIS Calendar's RSS Feed URL:

· Click on the 'Calendar Properties' icon. · Double-click to highlight then copy (CNTRL C or Apple C) the RSS Feed Url to your clipboard.

This can be used to create Calendar Event Feeds in the 'RSS Feed' widget. It can also be used by 3rd party programs to display events on THIS Calendar.

3.1.5 Links to Calendar: Copy iCal Link iCal (short for iCalendar) is a computer file format supported by a large number of products, including Google Calendar, Apple Calendar (formerly known as iCal), and Microsoft Outlook. Within ezTask Titanium you can upload an iCal (.ics) file to import calendar data or you can link/sync to another Calendar using the iCal calendar data exchange.

Copy Calendar iCal link to add your events to another calendar. This link could be used to carry information to another Titanium Calendar or a 3rd party calendar.

· Click on the 'Calendar Properties' icon. · Double click to highlight then copy (CNTRL C or Apple C) the iCal Link.

This can be pasted into another calendar that accepts iCal feeds including other Titanium Calendars.

3.1.6 Adding and Modifying Categories Categories allow you to group event types. There must be a Category for an added (aggregated calendar) or for a regular event on your calendar. For example Education users may have different categories for District events, Campus events, and Athletics events, Local Governments may have separate categories for City Council Meetings, Community Events, and Recycling Schedules. Each Category can be color coded.

The color coding is displayed in the event display on the calendar and in the Category Legend at the top of the Calendar. You audience can turn off Categories in the Category Legend to view only the those that interest them.

Categories are selected when you add an event, covered in the section Adding Appointments.

Adding and Modifying Categories: Click the Calendar Properties button .

1. In the 'Category' Field, click 'Add new record' to add a new Category type.

2. Fill in the Name and Color field. The color field offers 12 colors for your Categories. You can utilize additional colors by adding a Hex Value for a color not included in the selection.

3. Click the check mark to save changes.

4. Modify an event type, click on the pencil icon in the row belonging to the specific event Category you'd like to change.

5. Make any alterations, then click the check mark to save changes.

3.1.7 Aggregating Calendars There are instances when you may want to include information from another calendar into THIS calendar. A good example of this is in Education where a School District includes events from one or all of the campus websites in a District Master Calendar or in Local Municipalities when a city includes a separate department calendar (like a Police Department calendar) in the City Master Calendar. The department or campus is able to maintain a separate calendar but also include events on a master calendar.

Adding an iCal feed link. This merges another calendar with THIS current calendar.

· Click on the 'Links for iCal' icon . · Enter/Paste into the 'iCal Feed Link' the iCal URL copied from another application or from another Titanium Calendar. · Select a Category. (You must first create a Category in the Calendar Properties to select one covered in the previous help section, Adding and Modifying Categories. · Click on the floppy disk icon to save changes and add a new record for an additional iCal link.

PLEASE NOTE: If your calendar includes too many iCal aggregates it many slow the display response time.

3.1.8 Adding/Editing A Single Event

Adding an Appointment/Event

· Click on the date to which you would like to add an Event.

· Click on 'Add New Event' after it appears in the date box. You can change the date in the next Add Event screen if you select the wrong date or have an event well into the future.

The 'Add Event' pop-up will appear. Use this form to add the details of your event.

Options available on the Calendar Event form

Event Date:

Events Time:

Events Type: (Category) Select which Category you would like to associate with your event.

Events Subject and Description:

Edit or Delete an Event

Click on the date event you would like to edit. You must be in the software and in Design mode to edit an event.

3.1.9 Adding/Editing Recurring Events Adding a Recurring Event:

· Click on the date you wish to add an Event. Select 'Add New Event'.

· Complete the Add Event screen as explained in the previous section. Click on the Recurrence option below the Description.

The pop-up will refresh to include a variety of options for Recurring Events. In this example we are creating a recurring event, Weekly Staff Meeting, that occurs every Thursday for remainder of 2016, by selecting then saving:

· Weekly

· Recur every 1 week(s) on Thursday

· End by 12/31/2016

To create an exclusion to your Recurring event:

First create and save the Recurring Event as described above. While in Design Mode click to edit the recurring event you would like to exclude. A pop-up will appear with the options to:

· Edit only this occurrence...

· Edit the series...

Click on 'Edit only this occurrence...' You can then delete that event and it will no longer be a part of the recurring dates for that event.

Changing options for one instance of a recurring event:

You can change any of the details for one instance of an event that is part of a Recurring Event Series but once saved that event event WILL NO LONGER BE A PART OF THE SERIES.

Click on the date of the event (that is part of a series)

Select 'Edit only this occurrence...'

Edit the details of your event as describe above and save.

Changing options for a recurring event:

Select 'Edit the series...'

Edit the details of your event as described above and save. This will save the changes to ALL events in the series.

3.2 Communicator - News & Events

The Titanium Communicator (News & Events Module) is used to publish articles that include News, Events, and Announcements for your organization. Using the Communicator Module is an excellent way to provide article management for the information you would like to communicate. An RSS Feed is auto-generated for any instance of the module within your website and the module also creates an automatic archive of your entries making it an ideal way to manage and track your announcements, press releases, and articles. Additionally, this module can be configured to post your “Published Articles” to Facebook and Twitter.

To begin using News & Events click on the Modules tab at the bottom of the page and then click and drag the News & Events Module to the desired location.

3.2.1 Settings & Options

There are two Options for the Communicator (News & Events) Module : Properties, Add an Article

When you open a Communicator page you will see a list of existing articles (if any), option to Search the article titles, Clear the search, and Add an Article

Properties option includes feed name, description, RSS Feed URL. Auto archiving option by month or year.

3.2.2 Add Article

Adding an Article Click on the Add Article icon in the blue bar or click on 'Add an Article' from the options at the top of the screen. Create your content in the editor. You can add photos, graphics to your article and format text just as you would when using the Text Widget. The Permanent Link is not editable and will be created when you save the article.

3.2.3 Edit and Manage Articles

Edit an Article Click on the title of the article to edit that article. The article will open in the Text Editor, change and edit your article as desired then click on 'Apply' to Save the article. · You can modify all available fields, including: Title, Article body, Created date, Expire On and Add this article to RSS feed. · You also have the option to delete the article.

You article will appear in the same order of the original archived article unless you change the Creation Date and apply.

Managing Articles in the Communicator

Permanent Links A Permanent Link is created when you save an article. This is a direct link to the article and cannot be edited. Use this link to share this particular article with your audience. You may find a Permanent Link useful when distributing articles like individual Press Releases.

Creation Date Each article posted has a date-time value, which is called Creation Date. Normally , this is set to the date when you publish the post for the first time. But you can change the Creation Date date for any article, and you can do this either when you first post it or later on.

The Creation Date is important because it controls the order that articles are shown in: · The post that appears first when a reader visits your articles is the one with the most-

recent Creation Date. · If you have more than one article, then the next-most-recent article is on the screen underneath the first one. And then the second-next-most-recent, etc.

You can modify the creation date by clicking on the calendar icon to the right of the 'Created date' text and selecting your desired date from the calendar or simply enter a new date in the date box. (The default date is set, at the time of the creation of the article.) Changing the Creation Date will not change the Permanent Link. It is sometimes useful to edit and recycle certain articles as part of a news feed. For instance, there may be occasions when using your Communicator as a news feed when there is just no news to publish. You could keep certain information articles on hand to post to your feed that informs or reminds your audience of valuable information in place of absent current news articles.

Expiration Date You can modify the Expiration Date by clicking on the calendar icon to the right of the 'Expire On' text and selecting your desired date from the calendar or simply enter a new date in the date box. The primary use of article expiration is to expire time-sensitive content. If the article contains information about an upcoming event or announcement, for example, and the event or announcement has passed you no longer want the article to display. Please note this does NOT delete the article it simple flags the article to not display. You can edit the article to change or eliminate the expiration date.

Add this article to RSS feed. By default the 'Add this article to RSS feed' is checked. Uncheck this box to remove this article from inclusion in the RSS Feed for the article. Unchecking this box does not delete the article but does remove it from the feed for this instance of the Communicator. You can read more about RSS feed in the help section on Widgets>RSS feed

3.3 Directory Module

Directory Module makes it easy to manage listings. Use it to create a simple address book, maintain a staff or member directory, organize certain content such as document, web page archives, or run a link directory. Create a connection with audience by including personal images in your personnel directories.

NOTE: In some circumstances, for example, for organizations utilizing Personnel Management software using Active Directory, a staff directory can be set up through LDAP that will automatically update the staff directory. Setting up the LDAP interface is outside the scope of basic web page building. For more details on setting up an LDAP connection contact your ezTask representative.

To begin using the Directory Module click on the Modules tab at the bottom of the page and then click and drag the Directory Module to the desired location.

3.3.1 Settings & Options There are two Options for the Directory Module : Upload, Properties, Add a new record, Download an Excel file of your existing records.

Upload a data file in .csv format. Modify your directory settings. Add a new record Download an Excel file of your existing records.

3.3.2 Creating a Spreadsheet To use the Directory Module, you must first input your data into a spreadsheet format using a program such as Excel (any spreadsheet application will work). You can include organizing categories such as departments, URLs, email addresses, phone numbers, dates, etc. In the following example we will create a Directory with the fields: Name, Department, Position, Email, Phone, Photo

You should avoid inserting special characters in your spreadsheet including these: # pound < left angle bracket $ dollar sign + plus sign % percent > right angle bracket ! exclamation point ` backtick & ampersand * asterisk ‘ single quotes | pipe { left bracket ? question mark “ double quotes = equal sign } right bracket / forward slash : colon \ back slash

3.3.3 Importing Files Importing a spreadsheet

Once you have prepared the data spreadsheet export the data to a comma delimited (.csv) file. Using Excel you would select File>Save As then select CSV from the drop-down Save as type:

· Click the 'Import Data File' icon in the blue bar. · Either, click the "Click to Browse or Drop files here..." button, or drag the spreadsheet file from your local computer onto the "Click to Browse or Drop files here..." button, click 'Apply'.

The directory is now viewable in the page builder.

3.3.4 Editing a Simple Directory Editing a Simple Directory

You can edit/change single entries from the Titanium interface in Design mode. Click on the first entry for the record you would like to edit and an Edit a Record pop-up will appear. Change the record as desired and click on Apply to save the record.

Add a Record to the Directory Suppose we want to add 'John Smith' to our directory. · Click on the 'Add a record' icon . · Fill in the Record Options with the information pertaining to the new record, click 'Apply'

The new record will exist in the directory, which is viewable in the page builder.

Edit a Record in the Directory Suppose we want to change 'John Smith' to 'Jonathan Smith'. · Click on the first column of the row to be edited. (In this demo, it is the 'Name' column, and we click on 'John Smith'). · Make desired changes to the Record Options, click 'Apply'.

The modified directory is viewable in the page builder.

3.3.5 Add a Record Adding a Record to a Directory

You can add a new record to an existing Directory using the Titanium interface in Design mode. Click on the Add a New Record icon in the blue bar an Edit a Record pop-up will appear. Fill in the blank fields for this record and click Apply to save the record. Leaving a blank field in the record may alter the appearance of the Directory.

3.3.6 Delete a record Deleting a Record to a Directory

You can edit/change single entries from the Titanium interface in Design mode. Select the first field of the record you would like to delete and the Edit a Record pop-up window will appear. At the bottom of the window click on Delete, you will then see the Delete Database Record pop-up that specifies , "Do you want to permanently delete this record?" Click OK

3.3.7 Configuring a Directory Click on the Properties icon to access the fields and set options for how the Directory will be displayed.

Setting sort fields for a Directory You can set sort fields, source, displayed width of the field, number of records to display per page, and a search bar option. In the following example we set a Primary Sort Field to Department and Secondary Sort Field to Name. Doing so our Directory's initial display is grouped by Department and alphabetically sorted by name within each Department.

Resulting in this Display:

Setting the display width of a field The Directory defaults to an even spacing and width for each field. If you have field(s) that require more or less width than others you can specify the width for one or all fields by putting a percentage in the width field.

Example with no width values:

Example setting one field value:

Additional options for Directory display At the bottom of the Directory Structure there are additional options that include Pagination, Search Bar, and a brief record of the import/export history of the Directory page.

3.3.7.1 Secure Email

Secure email is used to link to an email address without revealing the email address to your audience. A properly configured Directory will provide your audience with a pop- up form to complete and submit as an email without exposing the recipients email address.

How To Configure Secure Email 1. Click on the 'Directory Settings' icon . 2. In the 'Email' column, set the 'Get URL from' field to 'Secure Email' and 'Display' to Select 'Hide This Column'.

3. In the 'Name' column, set 'Get URL from' to 'Column 4' (the location of the email address in the previous step).

4. Click 'Apply' to apply settings.

Now, if you preview the page, you can click on a name in the 'Name' column, and it will bring up a Secure Email form.

3.3.7.2 Adding Photos Your Directory can include images for each record. As used in the following example a Staff Directory has an individual image for each staff member. When the user highlights (rollover) a record the image for that individual appears at the end of the record.

Prepare the Spreadsheet and images for import. In this example we return to our previous spreadsheet. The spreadsheet contains a Column for Photo. Each name in the Photo column must correspond and match the file name for the image(s) to be uploaded. Export the Spreadsheet to a comma delimited file (.csv) as previously discussed.

Prepare your images. You should have an image for every record that contains a file name in the Photo Column. For the best results your images should all be the same size, 125 pixels by 125 pixels is a good size.

Import the datafile (.csv) and images · Click the 'Import Data File' icon · Browse to select the .csv file to upload or drag the file to the Click to Browse or Drop files here... button. , containing references to photo files. · Next select the photos to upload that match the photo reference in the .csv file and click 'Apply'.

Change the Directory Properties to include the photos. · Click on the 'Directory Properties icon · In the column corresponding to your photos (in this example, it is named 'Photo'), set

'Get URL from' to the column corresponding to your photos. · Then select 'Hide This Column' and click 'Apply'

3.4 Document Manager

The Document Manager is designed to easily manage large numbers of documents. Documents uploaded are auto-hyperlinked, eliminating the need to create hyperlinks to your documents. Drag-to-upload multiple documents at once and utilize archive documents within folders and tabs. File-type icons are automatically populated according to file extension, and users can add friendly names, create permalinks, and even secure documents behind a password.

To Begin using the Document Manager click on Modules at the bottom of the page and drag the Document Manager to the desired location.

3.4.1 Settings & Options There are two Options for the Document Manager : Manage Documents and Document Properties

Manage your uploaded documents: You can add folders and files to your document manager, by right-clicking on an existing file or folder.

Document Properties: You have the option to Sort files and/or folders and to Open all links in a new window.

3.4.2 Specifying Open or Download a file Browsers often treat file link access through websites differently. Some browsers require a loaded extension in the browser for the users to open a file as opposed to downloading it. Others will attempt to always open a file.

Generally speaking, if you would like for your audience to attempt to automatically open a document in their browser you should select the Document Properties option: Open links in a new window

To set this option click on the Document Properties icon and select 'Open links in a new window' and 'Apply'

3.4.3 Document Sorting and Display Folder and Document Sorting Click on the Document Properties to set the Folders and/or Documents to sort when viewed. Items are sorted alphabetically. If not sorted the files appear in the default view: the order in which they are uploaded. You can manually change the order of documents by clicking on the document icon and dragging it to the desired location in the list.

NOTE: When folders and/or documents are set to sort, the sort is only applied to the preview/publish view and not to the document manager as seen in the following example.

Manually changing the order of documents and folders As stated you can manually move a document or folder by clicking and dragging the icon to a new location.

3.4.4 Uploading Documents Uploading documents If no documents exist in the document manager, you can click on the 'Upload Documents' icon. Browse or drag file to the 'Click to Browse or Drop file here..' button to upload documents.

Uploading documents to a Folder Click on the Manage Documents icon. The Document Manager pop-up will appear with a New folder you can use to organize your documents. Click on New folder and complete the Folder Properties pop-up to rename the folder and add an optional Friendly Name. In this example the New Folder is renamed 2016.

Right click on a the folder in the 'Document Manager' pop-up window, and click on 'Upload Files'.

Browse to upload files or drag files from your computer onto the 'Click to Browse or Drop files here...' button. Click 'Apply' to upload the files. Your files now reside in the designated folder.

3.4.5 Folder Options Click on the 'Manage Documents' icon .

Add a Folder Right click on a folder for options. The first three options allow you to add additional folders by selecting 'Add a folder above', 'Add a folder below', or 'Add a sub-folder'. In this example we add a sub-folder named 2016 Subfolder.

Folder Properties Right click on a folder for options and select Folder Properties. Here you can edit/change the name of the folder and optionally, add a Friendly Name. Folder Friendly Names are not displayed when you are IN the document Manager.

Upload files Select Upload files. Browse to upload files or drag files from your computer onto the 'Click to Browse or Drop files here...' button. Click 'Apply' to upload the files. Your files now reside in the designated folder.

Delete this folder Select Delete this folder and a pop-up window will ask for confirmation. Click 'Apply' if you are certain you want to delete that folder and it's contents.

3.4.6 Securing a File You can secure individual files that are in the Document Manager by requiring a Username and Password to access the Document.

Click on the 'manage documents' icon . Right click on the file you wish to secure. Click 'File properties'. On the right-hand side, under 'File Security', type a username and password (NOTE: Please use a more secure password than 'password123'). Click 'Apply'

Click 'Save' to save your changes in the Document Manager window.

Now when you view the Document in the Document Manager and publicly the file will display with a secure icon.

On the published webpage, when the user clicks on secured file, a window will open, asking you for a username and password.

3.4.7 Direct Links to a file You can provide your audience with a direct link to a file by copying the Permanent Link provided to that file under File Properties.

· Click on the 'Manage Documents' icon . · Right click on the file for which you would like the Download URL. · Click 'File properties'. · On the left-hand side, under 'Download Url', highlight the URL text by double-clicking and copy.

This URL provides a direct link to the file, otherwise individual files in the Document Manager are not accessible to the public. That is, someone who visits your site cannot copy and forward a link to a particular file (if it is uploaded through the Document Manager) unless you provide them with this Download URL. The Download URL does not apply to secure files.

3.5 Form Builder

Create and customize paperless forms, polls, and surveys, plus choose to allow file uploads with submission. Receive results in real-time via email or download everything at once in spreadsheet format.

3.5.1 Settings & Options There are two Options for the Form Objects Module : Form Poperties and Form Reports

Modify your form properties. Create and generate reports

3.5.1.1 Setting up form requirements Set the form requirements for sending There are several options and or requirements in setting up an email form. All emails contain a 'from', 'subject', and 'to' field. These must be filled in during the setup of your form in order for the form to work.

From - 'Sender' Enter a Sender email address in the (sender) field. This field is required. This can be you, the creator's address, or a generic address setup for this purpose like, [email protected] This field should be a valid email address.

Subject - 'Email Subject' Enter the overall subject of your form. Utilizing this field can be very useful in managing the responses to your form. If you have multiple forms in your project and each is labeled descriptively in the Subject field you can direct your email client to automatically file the responses in set folders.

To - 'Email results to' Enter the email address to whom the form response should be sent. You can have multiple addresses separating each by a comma.

The SPAM Protection field is Optional but highly recommended.

Confirmation Options Show a pop-up window as confirmation, link to another page, or send the user to a download file.

Create a pop-up window with a Message Enter a Message for the user to see in response to a form submission.

Link to a webpage in your project Select the webpage from within the project to send the user to.

Link to a file or an external URL Enter a document for the user to see in response to a form submission.

3.5.2 Create a Form Form Objects

A form is built using form objects. There are eight form objects, located on the Titanium editor tab at the bottom of the page.

To add a form object to the page, drag it from the editor tab to the form area in the web page builder. The form area is outlined with a blue dashed line. The form objects you drag to include in the form must be inside that line.

Dropdown A Dropdown is list representing a set of choices, only one of which can be selected at any time. The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space. Click the 'Edit Form Object' icon . Fill in the options accordingly. If this is to be a mandatory field on the form, click 'Make this required field', and click 'Apply'.

Radio Buttons A Radio Button is a labeled icon representing one of a set of options, only one of which can be selected at any time. Click the 'Edit Form Object' icon . Fill in the options accordingly. If this is to be a mandatory field on the form, click 'Make this required field', and click 'Apply'.

Checkboxes A checkbox is a small box into which a check is entered as the response to a question. Checkboxes can have multiple selections. Click the 'Edit Form Object' icon . Fill in the options accordingly. If this is to be a mandatory field on the form, click 'Make this required field', and click 'Apply'.

Comments The Comments Object give the visitor the opportunity to enter more than just a few characters of text. Click the 'Edit Form Object' icon . Fill in the options accordingly. If this is to be a mandatory field on the form, click 'Make this required field', and click 'Apply'.

Email Field The Email Object is text input that checks for proper email formatting. Click the 'Edit Form Object' icon . Fill in the options accordingly. If email confirmation is required, (meaning that the user will enter the email address twice) click 'Required email confirmation.' If this is to be a mandatory field on the form, click 'Make this required field', and click 'Apply'.

Text Field The Text Filed Object is the most commonly used form object and is for one-line text input. Click the 'Edit Form Object' icon . Fill in the options accordingly. If this is to be a mandatory field on the form, click 'Make this required field', and click 'Apply'.

Divider A divider button is used to separate fields on the form. Any fields after the divider

button will not display on the page until the divider button is clicked. Conversely, any fields before the divider button will not display once the divider button is clicked. Click the 'Edit Form Object' icon . Fill in the options accordingly, and click 'Apply'

Submit The Submit Object is used at the end of the form for submission. Click the 'Edit Form Object' icon . Fill in the options accordingly, and click 'Apply'

3.5.3 Form Reports Whether or not the submissions of the form are being emailed to someone, you can click on the Reports button and download a data file of the submission for that report.

Click on the Form Reports icon in the top blue bar.

The Form Report pop-up will appear and you can select the format of report to download or delete all the data from the form submissions.

You can also specify a date range to report on by selecting the Date Range option at the top left of the Form Report window.

3.6 Mega Menu

Mega menus are designed for large sites with numerous web pages. It is a drop down interface that is triggered by the user hovering over a main navigation tag and shows all options in one main, mega-panel and oftentimes groups related topics into categories. (MegaMenus are an optional feature of Titanium)

To begin click and drag the MegaMenu module to the desired area. Note that your MegaMenu may only be styled to function in certain areas of the webpage.

Tips for planning a Mega Menu

· Group like items together based on where you think users may look for them. Does a link to your training courses live in the Services category or the Support category? Think about your users’ view of the world – or better yet, survey them – to understand how your audience would look for training, before deciding where it goes.

· Avoid overdoing the mega-menu by grouping too many things together. If it requires substantial time for a user to read through the options, you’ve lost all benefit of a mega-menu. Simple is always better.

· Be succinct in how you label items, but add short descriptions if needed. Avoid internal terms that new prospects won’t understand, so as not to confuse your audience.

· Don’t “kitchen sink” it – just because something can go in the mega-menu doesn’t mean it should. If it’s ancillary to the category, it shouldn’t be there. So for example,

a “featured case study” promotion should not be in the Support mega-menu. It will be regarded by your task-oriented web visitor as an annoying distraction.

3.6.1 Settings & Options There is one option for the Mega Menu Module : Edit this Menu

Expect the following options to appear in the “Edit dialog”.

· Additional options include: Enter “Menu text” and “alt/title” tags. Link item to a web page and link to a file (not working at this time). Manually enter a URL and choose option to “open the link in a new window/tab”

· Also choose “Column” (1-5) for the parent item.

3.6.2 Using the Mega Menu Editor The Mega Menu Editor displays the menu in a structured multi-level arrangement of entry items. This allows you to fold and unfold categories of links making your menu easier to manage.

How the Editor corresponds to the displayed Mega Menu.

NOTE: Width of the MegaMenu. The Mega Menu (like other Titanium Modules and Widgets) is designed to fill it's container. Additionally, the drop-down of the Mega Menu will fill the width of the container. The only exception to this is if you select the upper level submenu to be a Single Column.

Mega Menu example build In this illustration there are four initial entries that will display as the main navigation tabs of our menu. The multi-column drop-downs will be sub-menus of each/any of these initial items.

Here we have added 4 Categories to Item 2 of our navigation.

Now we add submenus that belong to specific categories. In this example numbered submenus under Category 1 and Category 2.

3.6.3 Add Edit Delete Mega Menu Items

Add a Mega Menu Item Click on the 'Edit this Menu' icon A new Mega Menu will begin with one entry called Menu, as seen here.

Right click on Menu and you will see the standard options for Adding or Editing a menu. You can add a new menu item above, below, or as submenu. Any of these selections will invoke the Add New Mega Menu Item window. Complete the form selecting a link for that menu item and click 'Apply' to save.

Edit a Mega Menu Item Right click on the item you would like to edit and select Edit Menu Item. Complete the Edit Mega Menu Item form and click 'Apply' to save the menu item.

Delete Mega Menu Item Right click on the item you would like to delete. Select Delete Menu Item and OK the delete confirmation.

3.6.4 Add Edit Delete Mega Menu Submenu Items Add a Submenu Item Click on the 'Edit this Menu' icon · Right click on a menu to add a submenu under · Select 'Add a submenu item'. · Fill in the forms with the desired information. · Click 'Apply' to save your changes.

Edit a Submenu Item Click on the 'Edit this Menu' icon Right click on the item you would like to edit and select Edit Menu Item. Complete the Edit Mega Menu Item form and click 'Apply' to save the menu item.

Delete Menu Item Right click on the item you would like to delete. Select Delete Menu Item and OK the delete confirmation.

3.7 Menus

Create horizontal, vertical, panel bar, drop down style menus for your website navigation. Use drag and drop feature to reorder menu items. 3.7.1 Settings & Options There are two options for the Menu Module : Edit this Menu and Menu Properties

· Edit menu items: by default the first menu item is labeled “Menu”. Right click on a menu item to add a menu item “above” , “below”, “submenu item” , “edit”, or “delete” this menu item. To reorder menu items, right click and drag item to the desired location. Enter “Menu text” and “alt/title” tags. Link item to a webpage or link to a file. Manually enter a URL and choose option to “open the link in a new window/tab”

· Menu Properties: Choose a menu type: Horizontal, Vertical, Panel bar, or Dropdown lists. For the Panel bar type of menu there is an additional option to allow all panels to expand. If this is not selected only one panel bar option will expand at a time. (By default this option is checked). All menu types have “animation settings for “expand delay” and “collapse delay”.

3.7.2 Select Menu Type and Animation The Menu Module provides four different ways to display your menu navigation: Horizontal, Vertical, Panel Bar, and Dropdown List

Select the Menu Type · Click on the 'Menu Properties' icon · Click on the down arrow under Menu Type and Select the type of menu you would like to use.

Menu Type Examples

Horizontal Menu - Typically used as the main navigation menu across the top of a website

Vertical Menu - Often used as quicklink navigation in a website sidebar.

Panel Bar Menu - Similar to quicklinks and used in sidebar navigation, the Panel Bar submenu items fold and unfold by user interaction.

Dropdown List - Can be used within the main content of a website and provide the user with a dropdown selection.

3.7.3 Add Edit Delete Menu Items The Mega Menu Editor displays the menu in a structured multi-level arrangement of entry items. This allows you to fold and unfold categories of links making your menu easier to manage.

Add a Menu Item Click on the 'Edit this Menu' icon A new Menu will begin with one entry called Menu, as seen here.

Right click on Menu and you will see the standard options for Adding or Editing a menu. You can add new menu item above, below, or as submenu. Any of these selections will invoke the Add New Menu Item window. Complete the form selecting a link for that menu item and click 'Apply' to save.

Edit a Menu Item Right click on item you would like to edit and select Edit Menu Item. Complete the Edit Menu Item form and click 'Apply' to save the menu item.

Delete Menu Item Right click on item you would like to delete. Select Delete Menu Item and OK the delete confirmation.

3.7.4 Add Edit Delete Menu Submenu Items Add a Submenu Item Click on the 'Edit this Menu' icon · Right click on a menu to add a submenu under · Select 'Add a submenu item'. · Fill in the forms with the desired information. · Click 'Apply' to apply your changes.

Edit a Submenu Item Click on the 'Edit this Menu' icon Right click on item you would like to edit and select Edit Menu Item. Complete the Edit Mega Menu Item form and click 'Apply' to save the menu item.

Delete Menu Item Right click on item you would like to delete. Select Delete Menu Item and OK the delete confirmation.

3.8 Site Map

Create a dynamic Sitemap based on one or more “Shared Menu” items. The Sitemap Module is an automated site map builder that runs from the links you build in your website menus.

To begin click on the SiteMap module at the bottom of the page and drag to the desired location.

3.8.1 Settings & Options There is one option for the Sitemap Module : Site Map Properties

Sources Select which menu(s) you'd like to extract links from to populate the site map. You can selectively choose menu(s) or select all menus.

Options Set the number of columns to display, the number of sections per column, and alphabetize the section, and click 'Apply'. This often requires a little trial and error to create an effective display.

Tips · For long site maps, it is recommended to split them into multiple columns. · Alphabetizing by section improves readability and navigability.

3.8.2 Creating a Site Map

· Click on 'Site Map Settings' · Select the Sources, whose links will be used to populate the site map (menus and quicklinks are frequent sources of site navigation links).

3. If you would like to set the number of columns, the number of sections per column, or alphabetize by section, set those options, and 'Apply'.

. The site map will now be viewable in the page editor.

4 Widgets Widgets provide the means to insert commonly used types of information, and display it in a meaningful way. Currently Titanium offers six widgets.

4.1 Code Object

The code object is designed to accommodate code generated by: Facebook Feed, Twitter Feed, embedding video IFrames from Vimeo, YouTube, School Tube etc. or any widget on the Internet that offers embedded code objects.

NOTE: Paste only “well-formed” code into the Code Object Widget, and the object will render on the webpage when previewing and in the published page.

Add a Code Object Widget. Click on the Code Object Widget and drag it to the desired location.

You will see the widget with an Insert Code label in the location. Click on on the Inset Code and Paste your code into the widget and click Apply to save the widget.

4.1.1 Example Code Objects Here are some example code objects:

· Embedded YouTube video

· Embedded Facebook feed

· Embedded Twitter feed Tweets by @ezTask

· Example Twitter feed in code object:

4.2 Image

Add an image to a page that can link to documents, images, and web pages. The image is auto sized based on the container width. Images can be used for button navigation as well. Using this widget to place an image will improve “Responsive design”.

Add an Image Widget. Click on the Image Widget and drag it to the desired location.

4.2.1 Settings & Options Initially there is one option : Upload images

Once you have loaded image there are four options : Upload images, Edit this image, Image Properties, and Delete this image

Upload: Upload one image, either by dragging and dropping, or by browsing your local filesystem. To replace existing image, upload another image.

Image editor: Resize, color, crop, and/or rotate the image.

Image Properties: Add Alt/Title tags, Link to a file, link to a URL, Open link in a new window, and or create a rollover.

Delete Image: Delete the existing image.

4.2.2 Example: Editing an Image Upload image for personnel profile. In this example we are uploading a small image to use next to a personnel bio. Our objective is to have a small image and descriptive text for each individual.

Upload an image · Click on the 'Upload Images' icon. · Click on 'Click to Browse or Drop files here...' · Select the desired image file, either by dragging and dropping, or by browsing your local filesystem. · Click 'Apply'

The image is now viewable in the page editor. Unfortunately, the resolution of our image doesn't go well with the default column width. NOTE: Remember that the default behavior of the Image Widget is to fill the width of it's container. Let's change it!

Image Settings · Click on the 'Image Properties' icon . · Select 'Use original image size' and click 'Apply'

The image is now its default size. This image is a little dull. Let's spice things up by editing the

image!

Editing an Image · Click on the 'Edit this Image' icon . · The image will open in an editor.

· Click on the 'Hue/Saturation' icon . · Select from functions at the top of the editor when you are satisfied with the edits click 'Apply'

4.2.3 Example: Linking an Image We have an image. We want the image to link to a website: https://www.eztaskcom

· Click on the 'Image Properties' icon . · Paste or type the link in the 'Link to file or enter a URL' field. · If you would like there to be a rollover, select 'Create Rollover'. This "zooms" the image when it is hovered over. Now click 'Apply'

Now, when you preview the page, you can click on the image and it will take you to the ezTask website.

4.3 Image Gallery

Upload multiple images at one time to your gallery widget. Use browse to select your images or drag and drop your images to your upload window. Select a Gallery style.

Add an Image Gallery. Click on the Image Gallery Widget and drag it to the desired location.

4.3.1 Settings & Options Initially there are two options : Upload images and Select Aspect Ratio

Once you have loaded images there are six options : Upload images, Select Aspect Ratio, Edit this image, Image Properties, Gallery Settings, and Delete the image

· Upload: Select browse to choose multiple images on your computer. Or use Drag and Drop area on the upload screen. You can re-upload an image or images at any time to overwrite existing images with the same name.

· Setting aspect ratio: Select 4:3, 3:2, or 16:9 (HD). This will set the frame size for your images. You can also manually set the frame size in the Gallery Settings.

· Edit an image: Open an image in the Image Editor to Resize, rotate, etc.

· Image Properties: Add Captions and tags to the selected image. Link the image to a web page (not completed), Files, (not complete) or Enter a URL. Also choose “Open link in a new window”.

· Gallery settings: Select Gallery style; Slideshow, Slideshow with thumbnails, Slideshow with navigation bullets, Lightbox, or Rotating banner. Select “Animation” and slide “Duration”. Also choose to “auto start the slide show”.

· Delete an image: Delete the current image.

4.3.2 Example: Uploading Photos and Resizing the Gallery Upload Images · Click on the 'Upload Images' icon. · Click on 'Click to Browse or Drop files here...' · Select the desired image file(s), either by dragging and dropping, or by browsing your local file system, and click 'Apply'

The images are now viewable in the page editor. They can be cycled by clicking on the 'Next Image' arrow on the right side of the Image Gallery.

Resizing the Gallery 1. By default the image gallery is not set to the native dimensions of the image. To change this, click on the 'gallery settings' icon . 2. Set the Width and Height to the dimensions of your picture (in this demo that's 1000x750). 3. Additionally, the slideshow does not automatically start, by default, to enable this, check the 'Auto start slides show' box.

4. Click 'Apply'. · The images are now their default size.

· Admittedly, the images default size is probably too large to be usable on a web page.

Let's change it. · Return to the 'General gallery settings'. · This time, set the width to 0, and the height to 310px. By setting the width parameter to 0px, it will automatically scale proportionally with the height parameter.

· Click 'Apply'. · The image is now in a more usable size.

4.3.3 Selecting the Gallery Style There are 5 Gallery styles from which to select: Slideshow, Slideshow with Thumbnails, Slideshow with Navigation, Lightbox, and Rotating Banner. NOTE: We recommend you begin by choosing the last option, Rotating Banner. The Rotating Banner is set to fill the width of its container. For the best effect you should edit your images to the same initial size.

To select a Gallery Style · Click on the 'General gallery settings' icon . · Underneath 'Style & Size' click on the 'Select a style...' dropdown menu. · Choose your desired style, and click 'Apply'

4.3.4 Gallery Style: Rotating Banner Rotating Banner matches your images' width to the full width of its container. You can set the images to rotate sequentially, or in random order, depending on your Gallery Settings, for the duration you selected.

Image Gallery Customization You can select an animation effect, the slide duration, and to display in the images in a random order. In this example we have selected: · Fade In/Out · Slide Duration of 4 secs (recommended) · And we have enabled Random selection of images.

4.3.5 Gallery Style: Slideshow Slideshow Gallery Style displays your images sequentially, using the animation you selected (by default there is no animation, the gallery simply changes to the next image) , for the duration you selected (the default duration is 3 seconds).

Image Gallery Customization · Click on the 'General Gallery Settings' Button . · On the left hand side, under 'Style & Size' there is a drop down containing style options for the image gallery, select 'Slideshow'.

3. On the right hand side, You can select from 3 animations: 'Fade In/Out', 'Slide in Horizontal', 'Slide in Vertical'.

Slide Duration · You can specify how long each image will be displayed.

Auto Start Slide Show · Check the box to auto start the slide show. By default the slideshow does not automatically start, instead requiring a user to click on the 'Next' or 'Previous' arrow of the image gallery.

4. After you have made your selections, click 'Apply' to apply your settings.

4.3.6 Gallery Style: Slideshow with Thumbnails · Slideshow with Thumbnails displays your images sequentially, using the animation you selected (by default there is no animation, the gallery simply changes to the next image) , for the duration you selected (the default duration is 3 seconds). It includes a navigation bar comprising thumbnails of the images contained in the image gallery. By clicking on a particular thumbnail, it will be displayed as the main image in the image gallery.

Image Gallery Customization

Select Animation · You can select from 3 animations: 'Fade In/Out', 'Slide in Horizontal', 'Slide in Vertical'.

Slide Duration · You can specify how long each image will be displayed.

4.3.7 Gallery Style: Slideshow with Navigation · Slideshow with Navigation displays your images sequentially, using the animation you selected (by default there is no animation, the gallery simply changes to the next image), for the duration you selected (the default duration is 3 seconds). It includes a navigation bar comprising thumbnails of the images contained in the image gallery.

Image Gallery Customization

Click the cog to access 'Gallery Settings'

Select Animation · You can select from 3 animations: 'Fade In/Out', 'Slide in Horizontal', 'Slide in Vertical'.

Slide Duration · You can specify how long each image will be displayed.

4.3.8 Gallery Style: Lightbox · Lightbox displays your images sequentially, as thumbnails. By clicking on on it opens the full size image, with a navigation arrows. By clicking on the 'Previous' or 'Next' arrows (the left and right arrows, respectively), the previous or next image will be displayed. Animation doesn't function for Lightbox (NOTE: it shouldn't. However, if currently set to 'Auto Start' the first image will be displayed, full size, after a ~3 second delay. The image won't switch however.) · The default height for the thumbnails is 100px. So, there use the equation: number of rows x 100px to set the height parameter. So, for instance, if there were two rows of images in the lightbox, you would set the height parameter to 200px.

Image Gallery Customization

4.4 Media Player

Upload a video or link to an existing video. You can also link to YouTube or playlists.

Add a Media Player. Click on the Media Player Widget and drag it to the desired location on the page editor.

4.4.1 Settings & Options There are three options : Upload images, Select Aspect Ratio, and Properties

Upload: Upload HTML5 compliant video formats - mp4, webm, or ogv.

Set aspect ratio: Select 4:3, 3:2, or 16:9 (HD). This will set the frame size for your video. You can also manually set the frame size in the Media Player Settings.

Properties: Choose a style – Media Player, or Media Player with playlist. Or link to an external video. Choose “Media Player” to view an uploaded video or link to an external video, Example: http://youtu.be/GqlEnnSGwlA 137 . Choose “Media Player with playlist” and enter a link to a YouTube playlist. Example: PL2HUH5okl73JFq_QDyqVq9GCZ0Dd9L0OH . Also choose to 'Auto start media player'.

Note: Linking to an external video or play list will supersede your uploaded video. Remove the link and the local uploaded video will play.

4.4.2 Importing a Video and Resizing the Media Player Importing a Video

Upload a Video · Click on the 'Upload a Video' icon , or, if no video has been uploaded in the widget, click the icon in center of the Media Player editor. · Either drag and drop your video file onto the 'Click to Browse or Drop files here...' button, or click the button to browse to your video file, click 'Apply'

Link to a Video · Click the 'Settings' icon . · In 'MediaPlayer Settings' paste your YouTube link in the 'Link to external video' form, and click 'Apply'

Resizing the Media Player Changing the Aspect Ratio · Click the 'Set aspect ratio' icon and select the desired Aspect Ratio. For default, HD YouTube videos, the default ratio is 16:9 (for default non HD YouTube videos, the ratio is 4:3). (Since our demo video is an HD YouTube video, we select 16:9).

Manually Specifying the Width and Height Parameters 1. Click the 'Media Player Properties' icon . 2. Set the Width and Height parameters to your desired targets, and click 'Apply'

4.5 Text Editor

Cut and paste text from Word or Notepad or simply type in the desired content. Format the content by applying a CSS class from the dropdown. Add a table, create a hyperlink, add an image and more.

Add a Text Editor Click on the Text Editor Widget and drag it to the desired location.

Here is the Text Editor in a webpage. NOTE: There is no blue bar at the top of the widget. Always Save your Changes, the changes you make in the Text Editor are NOT automatically saved.

At the bottom of the Text Editor are the 'Design' and 'HTML' icons.

Use 'Design' to use the standard functions of the Text Editor. Use 'HTML' to edit the content of the Text Editor directly as HTML (for advanced users).

4.5.1 Settings & Options NOTE: You must save changes to the Text Editor before the changes will take effect. The “Save Changes” button will appear on the widget bar when the content of the text editor is modified. (Making changes in “HTML” view will not invoke the “Save Changes” button )

Options - these options appear at the top of the page under the blue page Options

Toolbar: The toolbar rides at the top of the page being edited when you click inside the Text Editor widget.

Save file drop down menu. This can be used to save changes to the Text Editor widget.

Undo. Clicking this icon will revert changes. You can click the arrow to see a list of changes.

Redo. Clicking this icon will redo a previously undone change. You can click the arrow to see a list of possible changes.

Spellchecker. Clicking this icon activates Spell checking mode in the Text Editor.

Print. Clicking this icon prints the text from the Text Editor.

Find and Replace. Allows you to search, and replace, the text in the Text Editor.

Image Manager. Opens the file manager, where you can select uploaded images to display in the Text Editor. Or, you can upload new images from your local file system.

Document Manager. Opens the file manager, where you can select uploaded documents to display in the Text Editor. Or, you can upload new documents from your local file system.

Image Map Editor. Select sub-regions of an image to link to various websites (e.g. a world map, in which each continent links to the Wikipedia article for that continent).

Format Stripper. Remove various formatting. Clicking on the arrow expands the menu.

Align Left. Align the content in the text editor to the left.

Align Center. Align the content in the text editor to the center.

Align Right. Align the content in the text editor to the right.

Justify. Justify the content in the text editor.

Indent. Indent the selected line(s).

Outdent. Outdent the selected line(s).

Bullet List. Add bullets to the selected line(s).

Numbered list. Make a numbered list of the selected line(s).

Bold. Click to type in bold text. Click again to disengage. Highlight text in the Text Editor and then click to bold the selected text.

Italic. Click to type in italicized text. Click again to disengage. Highlight text in the Text Editor and then click to italicize the selected text.

Underline. Click to type in underlined text. Click again to disengage. Highlight text in the Text Editor and then click to underline the selected text.

Strikethrough. Click to strike through your text. Click again to disengage. Highlight text in the Text Editor and then click to strike through the selected text.

Superscript. Click to type in superscript. Click again to disengage. Highlight text in the Text Editor and then click to convert the selected text to superscript.

Subscript. Click to type in subscript. Click again to disengage. Highlight text in the Text Editor and then click to convert the selected text to subscript.

Foreground Color. Click to select a text color. Highlight text in the Text Editor and select a text color to apply to the highlighted text.

Font Size. Click the arrow to select the font size, in pixels.

Paragraph Style. Click the arrow to select the paragraph style.

Apply CSS Class. Click the arrow to select the CSS class.

New Paragraph. Create a new paragraph.

Horizontal Rule. Add a horizontal line to the page.

Insert Symbol. Click to insert a symbol.

Insert Table. Click open the Table Wizard, and configure the design and properties of the table.

Show/Hide Border. Click to toggle border.

Hyperlink Manager. Add a hyperlink. Select text, an image, etc. and then click the icon to add a hyperlink to the text, image, etc.

Remove Link. Highlight a link and click this icon to remove the link.

4.5.2 Example: Adding Text, an Image and a Hyperlink Adding Text Click inside the Text Editor, and start typing. When you are finished typing click 'Save Changes' at the top left of the Text Editor.

Styling the Text Text entered into the Text Editor is automatically styled to the body font of your site. You can can set the style by highlighting the text you wish to style. Click the 'Apply CSS Class' and select a style from the dropdown and Save Changes (In this example, we will edit the 'Apply CSS Class', and select 'Heading 2')

Your new formatting is displayed in the Text Editor widget.

Adding an Image Click the 'Image Manager' icon Select the image either from the existing uploads, or

click the 'Upload' icon to browse your local file system. Once you have selected your image, a preview of it will be displayed in the Image Manager.

· You can edit your image before Inserting it. · When you are ready to add your image to the page, click the 'Insert' button at the bottom right of the Image Manager. · The image is now viewable in the Text Editor.

Adding a hyperlink · Highlight some content in the Text Editor (e.g. some text, or an image).

· Click on the Hyperlink Manager' icon . · Add a url, or email address. You can also edit the Link Text. · Click 'OK'. The selected content is now a functioning link.

4.5.3 Example: Adding a Table Quick Insert

Click the 'Insert Table' icon . On the grid, select the number of rows and columns.

Re-size the table by dragging one of the white squares on the perimeter of the table.

· You can type in a cell, add an image, or use other toolbar options.

· Right-click on a cell to bring up table options.

· Click the Show/Hide Border icon to toggle the table border.

Using the Table Wizard

· Click the 'Insert Table' icon . · Click the Table icon to the left of the 'Table Wizard' text.

· Configure your table in the table wizard.

· Add three rows, one column and two column spans to the top row.

· In the 'table properties' tab select the 'telerik-reTable-1' CSS Class Layout.

· Select 'OK'. · Fill in your table accordingly.

4.6 RSS Feed

RSS (Really Simple Syndication) uses a family of standard web feed formats to publish frequently updated information: blog entries, news headlines, audio, video. Enter a URL of any RSS feed to generate a feed list. The RSS feed widget will generate thumbnails for each item in the feed that contains an image.

4.6.1 Settings & Options There is one option : RSS Properties

Property Options

RSS feed URL: Enter a fully qualified URL to access a feed. This will include internal feeds (like our Communications module or Calendar ) or external feeds. Example: http://feeds.feedburner.com/makeuseof 151

Articles to display: Choose the number of articles to display in your feed.

Characters in the title: Choose the number of characters to display in the title. 200 by default is standard setting.

Characters in description: Choose the number of characters to display in the

description. 200 by default is standard setting.

Choose sort descending: Choose the order to display your articles. This is using the date the article was published. This option unchecked will sort ascending, oldest item first.

Thumbnail size: Choose the “width and height” the thumbnails will appear. Default is 50px x 50px.

Turn thumbnails off: Use this option to ignore thumbnail images.

Type of feed display: Standard RSS Listing, Calendar Text Listing, or Calendar Object

4.6.2 Standard RSS Listing Create a Standard RSS Listing

Highlight and Copy the RSS feed from the Communicator instance you would like to source.

Return to the page where you have place the RSS Feed widget

· Click the 'RSS feed properties' icon .

· Paste the link to your feed in the 'Enter RSS Feed URL' form

· Select the Standard RSS Listing options (the default) and configure your options, click 'Apply'

The RSS feed is now viewable in the Page Editor.

4.6.3 Calendar Text Listing Create a Calendar Text Listing

Highlight and Copy the RSS feed from the Calendar instance you would like to source.

Return to the page where you have place the RSS Feed widget

· Click the 'RSS feed properties' icon .

· Paste the link to your feed in the 'Enter RSS Feed URL' form

· Select the Calendar Text Listing option and configure your options, click 'Apply' NOTE: if you are using an aggregated calendar, which pulls events from multiple RSS feeds, click the 'Show aggregated events' box to display events from all aggregated calendars.

The Calendar RSS feed is now viewable in the Page Editor.

4.6.4 Calendar Object Create a Calendar Object The Calendar Object is a small index calendar. The dates with events are highlighted on the calendar. The user clicks on a date and is taken to information for that day.

Highlight and Copy the RSS feed from the Calendar instance you would like to source.

Return to the page where you have place the RSS Feed widget

· Click the 'RSS feed properties' icon .

· Paste the link to your feed in the 'Enter RSS Feed URL' form

· Select the 'Calendar Object' option and configure your options, click 'Apply' NOTE: if you are using an aggregated calendar, which pulls events from multiple RSS feeds, click the 'Show aggregated events' box to display events from all aggregated calendars.

The Calendar Object feed is now viewable in the Page Editor.