Ingeniux Tips

Below are some tips on how to create, edit, and publish webpages using the Ingeniux content management system.

Terms to know

CMS - Abbreviation for "Content Management System." In this case, Ingeniux ("IN-GENE-E-ICKS").

xID - Unique ID number given to every page, folder and component in the Ingeniux system. For example, the Whitman College homepage is x11. The xID is used to quickly identify pages in the system, as well as tell pages with identical or similar names apart (ex. "Faculty and Staff" pages, "Contact Us" pages). It is useful to take note of the xIDs of pages you commonly use to quickly access them using the "Go to" search bar in the system, or when adding links or components to pages.

You can find the xID of a page, component or folder either by looking in the Page Properties section of the Edit Form tab for a page, or by hovering over its location in the site tree.

Site Tree - The Site Tree is the main structure of the Whitman website, shown in the left column of the Ingeniux system, under the "Site" tab. This shows all the pages, folders, and components that make up the website. You can use the site tree to navigate between the pages you need to work on.

Parent/Child elements in IngeniuxParent - A page or component that has one or more other pages, components, or folders "beneath" it in the site tree structure. A parent has a small box with a "+" or "-" next to its name in the site tree to expand or contract the "child" items under it.

Child - A page, folder, or component, that is beneath another page, component, or folder.

Publishing Process using Ingeniux

Before publishing: Use Preview or Page View to view how the page will look on the live site after publishing. The view of the page in the Edit Form area does not accurately show how a final page will look. When in doubt, preview.

To publish a page on the website, follow these steps:

Basic Ingeniux workflow chart. Text workflow listed below

  1. Create a new page or component or edit an existing one
    If you are editing an existing item, you can skip to Step 2.
    Right-click on the item in the site tree that you want to be the parent of the new item you're creating and choose "New " > "Page." Here you will name the item (keep it simple, this is also used for a page's URL – it can also be edited later). You will also need to choose a page type. (Do not bother with Page Creation Rules, as they are not currently used on our site.) Common page types are listed below. Be sure to complete all fields marked "[Required]."
  2. Add new content or edit existing content. See Page Editing Tips for more information. See the Components section for information on adding additional content to the sidebars of your webpages. Most pages require both a title and an abstract.

    Abstracts are used in Section Indexes and in some components as a short description of a page's contents. Because abstracts also show up in search results, we recommend adding an abstract to all pages, required or not.

    Abstract entry field and search results
  3. Check in the page or component. If a page is published while checked out, only the changes made before its last checkout will be published. Check in buttons appear both at the top of the screen and in the context menu when right-clicking the page or component in the site tree.
  4. Mark for Publish. Items that are marked for publish will appear in bold in the site tree. If the page is bold (as most existing pages already are), you can skip to the next step. If a page is not marked, it will not be published. The Mark for Publish button appears in the context menu when right-clicking the item in the site tree.

    If an item has "children," there are two options when marking it for publish:
    1. Page - This marks for publish only the item you clicked on.
    2. Page and Children - This marks for publish the item you clicked on and all the "child" items beneath it.

    In the resulting dialog box, make sure the "Marked for Publish" box is checked and the "Version dialog" box next to it says "Current Version."
  5. Publish. This sends your changes to the live website.
    Like the Mark for Publish step above, if an item has "children," there are two options when publishing:
    1. Page - This publishes only the item you right-clicked on.
    2. Page and Children - This publishes the page you clicked on and all the "child" pages beneath it that are marked for publish.
    After choosing an option, a popup window will appear:
    1. Under "Publishing Target" choose "Live."
    2. Click the "Incremental" button. This publishes the items(s) you previously selected.

Other Publishing Tips

Be patient. Published content does not appear instantly on the live website. It can take anywhere between one minute to a half hour depending on current system operations and the number and size of publishes being performed at the time. The publishing system works on a first come, first served basis, and a publishing process does not begin until a previous publish has been completed. Attempting to publish pages while the system is already attempting to process a previous, identical request will cause the publish to be repeated and slow the system down for all users.

Common Page Types

Section Front

Used as the "homepage" for a given section of the website. These can have one or more large promo images that take up the full width of the page (960 pixels). If you add multiple images to the promo images section, the images will rotate on the page every few seconds. Each promo image you add should have a width of 960 pixels and a height of 330 pixels.

Section Index

Used as an index for multiple webpages in the site tree. If a section of the site is more than two levels deep, section indexes can be used directly under a Section Front to link to pages that are deeper in the site tree.

Detail

By far the most common page type in the system. Detail pages are fairly basic, consisting mostly of a title, abstract, body image, and body copy. Promo images should not be used on Detail pages. An abstract is required for detail pages.

Profile Index

Acts as an index for Faculty/Staff Profile Detail pages; can be used to replace current Staff/Faculty listings that currently use Detail pages.

Profile Indexes display contact information,  a photo, and a link to a Profile Detail page for each person included on the page. The group of people displayed on a Profile Index is determined by the categories you select in the Profile Navigation section of the edit form.

Profile Detail

A detail page for a Student/Staff/Faculty member. Name and abstract are required. If you plan to pull information from a Profile Detail page into a Profile Index page, you'll need to select a category for the profile in the Categorize tab. You'll also need to make sure that category is entered in the Profile Navagation section of the Profile Index you want it to display on.

Components

Components are pieces of reusable content. Components are used to create the left navigation for sections of the site (a section control) and to add content to left and right sidebars. There are several different types of components, each with a distinct purpose and characteristics

Common Components

Right/Left Column Link List Components

This component type is used for links to other pages on the website, external links to other sites or a link to download a document such as a PDF or Word doc, etc.

Note: A Right Column Link List Component is 230 pixels wide. When you display this component type on a page, the width of the body copy area of the page will be reduced to 460 pixels. The Left Column Link List component is also 230 pixels wide, but does not alter the width of the body copy because it displays below the left navigation.

Right Column Flexible Component

Right Column Flexible Components are free-form components used to displaying various types of content in the right column of a page.

You can change the title bar color, insert an image (limit to 230 px wide), and input Body Copy like you would in a detail page. Keep in mind that sidebar components are limited in size and meant for small bits of information.

Note: Right Column Flexible Components are 230 pixels wide. When displayed on a page, the width of the body copy area of the page will be reduced to 460 pixels.

Left Column Flexible Component

Similar to the Right Column Flexible Components (see above), except that they display in left column underneath the main navigation of a page, and have a width of 230 pixels. Unlike Right Column components, this width does not effect the width of the body copy area of the page they are on.

Right Column Taxonomy Component

The Right Column Taxonomy Component displays links to pages automatically based on taxonomy tags. For example, a Taxonomy Component set to search for the taxonomy tag "News > Students" will show links to news stories that use that tag. Click the "Pick" button under "Taxonomy Items" to choose the tags you'd like to include in the component. You can choose the number of items to include in the component. The maximum limit is six.

Using Components

Components must be added to a page under either the Left Column or Right Column sections of the Edit Form. You can click the "Pick" button to choose from a list of components that are available for that column. Another option is to find the appropriate component in the site tree and click and drag it into the List Item field under either the Left Column or Right Column sections in the Edit Form. Like pages, components need to be published in order to be visible on the live website (see the Publishing section above).

There are a few buttons to the right of a component field in the edit form:

  • Pick - Allows you to choose from a list of components to use for that particular column.
  • Go To - If there is already a component listed in the field, this will take you to that component's location in the site tree so you can edit it. Very helpful if you are unsure where the component is.
  • Clear - This removes the component from the page you are currently working on. Note that this does not un-publish or delete the component from the site tree, it just removes it from the current page. If you clear a component without deleting it, it can still be used on other pages.

Page Editing Tips

Body Copy

Pasting Text from Word

Paste text from Word buttonTo copy in text from Microsoft Word, copy the text from the Word document, click  the "Paste from Word" icon on the Body Copy toolbar paste your content into the resulting window, then click "Insert" to add the text into the page. Please note that the Paste from Word option is not perfect, and may result in some formatting and spacing issues.

Paste Text Only

Paste text from Word button

To paste text only (when copying text from Word or any other text editor), copy the desired text from the document, click the "Paste Text Only" icon on the Body Copy toolbar, paste your content into the resulting window, then click "Insert" to add the text into the page.

Please note that this option removes virtually all formatting, as well as links. Make sure to select the "Keep Line Breaks" option if your text has multiple paragraphs.

Inserting Links

Insert link

To insert a link, highlight the text you would like to make into a link and click the "Insert/Edit Link" button. This will bring up the Insert/Edit link window. This window has two sections: "Link To" and "Link properties." Under "Link to" you will need to specify which type of link you wish to use:

  • Internal - For linking to other pages on the Whitman website. In the "page" field below, you can then either start typing the name of the page you'd like to link to, and choose the correct one from a list. Or, if you know the xID of a page you can type it here, and the correct page should show up in a list for you to select.
  • External - For linking to sites outside the Whitman website or the Ingeniux system. Copy the URL of the site you would like to link to in the URL field. Links to content located on a website other than whitman.edu should open in a new tab or window, so a user doesn't have to completely leave the Whitman site. In the "Insert/Edit" window, choose "Open in New Window (_blank)" under the Link Properties section.
  • Document - This is for providing a link to a document that a user would be able to download, such as a PDF or Word document. Please choose the "Open in New Window (_blank)" option in the "Target" dropdown menu of the Link Properties area option when linking to a PDF.
  • Anchor - This links to an anchor element, if present, on the current page. Useful for skipping to another section of a very long scrolling page. Please note, that in Ingeniux, it is not possible to link to an anchor on another page using Insert/Edit link window.
  • Email - This will link to an email address.

Styling using Styles and Format menus

You can use the Styles and Format menus to change how text and image elements appear on a page. The Format menu provides options for headings and paragraph styles. Headings 1-4 are most commonly used. Headings should be used in order of hierarchy on the webpage. The titles of pages in Ingeniux are by default Heading 1, so sections on a page should use H2, H3 within H2, and H4 within H3.

Heading 1 (page title)

Heading 2

Heading 3

Heading 4

Paragraph

The Styles menu also includes options for underlined text, pull quotes, and the "leftimage" and "rightimage" options for floating images to the left or right  side of the body copy on a page.

Paragraphs vs. Line Breaks

When formatting your text, it is good to be aware of the difference between paragraph breaks and line breaks. Pressing the Enter/Return key will create a new paragraph  while pressing Shift + enter will create a line break. You'll see the difference below:

This is a paragraph.

This is another paragraph, created after hitting Enter/Return. This automatically creates a space between the two paragraphs.

This is a line of text.
This is another line of text using a line break. This is done by entering Shift + Enter/Return.

 

Image Formatting

Adding Images to a page

Insert image buttonTo add an image to a page:

  1. Click the "Insert/Edit Image" button on the Body Copy toolbar. This will open up the Insert/Edit Image window.
  2. Click the "Browse" button to the  right of the "Image URL" field to choose an existing image or upload new images.

Note: Refer to the  Image Dimensions and Resolution section below for information about the sizes and resolutions to use for your images.

Insert/Edit Image

After you click the "Browse" button, the assets window will display. This is where you can find images that have been previously uploaded or where you can upload new ones.

Note: when uploading images, you can select multiple images; however you can only add one image at a time to a page.

Image Assets screenshot

  1. To upload a new image:
    1. Navigate to a folder you'd like to put the image in. DO NOT add images to the initial "Images" folder. This significantly slows down the assets system, and keeps images from staying organized. Select a folder or subfolder within.
    2. Click the "Upload" button, then click "Select File to Upload" and browse for the image on your computer. Click "Open" once you've selected the image.
    3. You should now see an "Upload File" window. In this window, click the "Upload button".
    4. After the image is uploaded, select it and click "OK".
    To use an existing image:
    1. Navigate to the folder the image is in.
    2. Select the image and Click "OK".
  1. The Insert/Edit image window will display with a preview of your image. There are three tabs with various options. Let's focus on the first two:

General

  • Image URL - the location your image, which you can choose via the browse button to the right of this field.
  • Image Description - This is where you put a short description of the image. This is useful for search engines as well as users using screen readers, especially those to have impaired vision. Adding a description is highly recommended, and the system will provide a popup warning if you insert the image without adding one.

Appearance

  • Dimensions - Important for making sure you image fits onto the page. However, do not rely solely on this field to resize images. See the Image Dimensions and Resolution section below. Make sure "constrain proportions" is checked, otherwise you risk stretching your image.
  • Horizontal and Vertical Space - Please use the class menu below instead.
  • Border - Sets the border thickness surrounding the image. Leaving it blank or entering "0" provides no border.
  • Class - A list of pre-loaded CSS styles for positioning of an image. For images, use "leftimage" or "rightimage" to make an image float to the left or right of a page, and have the text wrap around the image with appropriate padding between text and image.
  • Style - You can enter additional CSS styling here to alter some aspects of the image's positioning and appearance. Recommended for advanced users only.
  1. Once you've set the options you need, click "Insert".

 

Managing Assets

  • Do not add images to initial "Images" folder in Ingeniux. Doing so significantly slows down the amount of time it takes for the assets folder to load. Add images to a relevant folder within the Images folder.
  • If you use List View rather than Display View, you won't see the image thumbnails but the window will load much faster.

Image dimensions and resolution

The content area of pages that don't have a right sidebar is 700 pixels wide. Images in this area (either in the Body Image field or added directly into the Body Copy area) should be no wider than this. If a page has right sidebar displayed, the maximum width of Body Images and images in the Body Copy is 460 pixels.

For pages with no right column components:

Screenshot - Page Width 700 px (no right sidebar)

Widths for pages that do have right column components:

Screenshot - Page Width 460 px (with right sidebar)

Important widths to be aware of:
  • Body Images/Images in Body Copy area:
    • Full-width image (no right sidebar): 700 px wide (recommended height should not be more than 350 px)
    • Full-width image (right sidebar): 460 px wide (recommended height should not be more than 350 px)
  • Sidebar Images:
    • Right Column components: 230 px wide
    • Left Column components: 230 px wide
    • Right Column Promo components (Whitman Homepage): 300 px wide (height should be 140-160px)
  • Promo Images (full width images that span entire width of page on Section Fronts and Homepage): 960 x 330 px*

* To maintain a consistent look, these should always be the exact dimensions (both width and height) listed above.

To make your images fit the webpage while maintaining both quality and small size for quick downloading, images should be resized using image editing software to the actual size you want them to display.

Populating the 'height' and 'width' fields in the image areas in Ingeniux (or using HTML attributes or CSS) will make an image appear smaller on a page, but will NOT reduce the actual size of the image or the time it takes the image to display.

Images that are not properly sized will take longer to download, which is not ideal for people using slow internet connections or cellular devices. Downloading large images can eat through a cellular data plan very quickly!

Recommended image editing tools

Adobe Photoshop
Use the "Save for Web and Devices" feature when saving the image. Remember to enter the desired dimensions before saving, and use the Constrain Proportions option to make sure the image doesn't get distorted.

Pixlr.com
http://pixlr.com/editor/
With Pixlr, you can do some fairly fancy image editing, including cropping, resizing, adjusting color, etc. This is a great starting point for getting images web-ready.

TinyPNG
http://tinypng.org/
TinyPNG allows you to compress .png files without losing image quality. 

JPEGMini
http://www.jpegmini.com/
JPEGMini does the same as TinyPNG, but for .jpgs instead of .pngs.

Style Recommendations

Links

PDFs

Links to PDF documents should open up in a new tab or window when clicked on. When inserting or editing a link to a PDF, choose "Open in New Window (_blank)" in the link properties area.

Links to content in another section of the website

Links in a site's main navigation that lead to another section of the website (commonly done using a Virtual Link component) should be placed in a Left Column Link List component to separate them from the main navigation of that section of the website. The component should be name "Related Links" or something similar.

Links to off-site content

Links to content located on a website other than whitman.edu should open in a new tab or window, so a user doesn't have to completely leave the Whitman site. In the "Insert/Edit" window, choose "Open in New Window (_blank)" under the Link Properties section.

Other things to note

Text Color

Because blue text is commonly used across the web for links, don't use blue color for any text that is not a link to avoid confusing users. If possible, avoid colored text altogether.

Right- and left-aligned images

To align images to the left or right of a page with text wrapping around it, use the "leftimage" or "rightimage" option in the "Styles" dropdown in the Body Copy toolbar, or in the Insert/Edit image window in the "Appearances" tab under the "Class" dropdown menu.

Tables

Tables should be used for tabular data only. Tables should never be used for basic layout of webpage elements.

When tables are used improperly they make the page content hard to comprehend for people using screen readers. Also, tables often display poorly on mobile devices.

Mobile Content

Most page types now have a Mobile Content section. If you populate the "Mobile Title" and "Mobile Body Copy" fields for a page, that title and copy will override the content entered in the "Title" and "Body Copy" fields when the page is viewed on a mobile device. If you don't populate the fields in Mobile Content area, the existing content will remain the same on both mobile and desktop devices.

In most cases, your existing "Title" and "Body Copy" content will work just fine. However, pages that have large photos, tables or floated content in the "Body Copy" field may not display well. If you find that to be true for a particular page, you will want to populate the "Mobile Body Copy" field using a simpler layout.

Finally, only pages that are one or two levels deep in the site hierarchy will display in the mobile site navigation. For those pages, you can check or uncheck the "Show in Mobile Nav?" checkbox to choose whether or not the current page will display in the navigation menu for its section of the website. In most cases, this option does not need to be changed.

To preview your pages for mobile devices, click the "Preview" button and select either "Generic Mobile Device" or "iPhone" from the Device dropdown.

Please contact us at webteam@whitman.edu if you have any questions about this document or about using Ingeniux.